I'm studying parallax and horizontal scrolling website and I get in touch with this fantastic website: http://www.black5.de/
Exploring with firebug I found that their developers:
use absolute positioned elements
use a non-scrolling container
recreate a custom navigation controller using arrow keys, mouse wheel and in-page anchor
I tried to re-implement this logic here: http://www.albertobottarini.com/parallax/index-manual.html
As you can see anchor links works but navigation with arrows and mouse wheel don't works (and it's correct because I don't create custom controllers for them). Implementing custom navigation seems very hard job (for example I have to take care about user keep pressing arrow key because they want to speed up navigation).
I tried some other jquery plugin (like jparallax) but the resulted webpage is the same as mine where everything seems choppy and jerky.
How can I recreate the fluidity and pleasantness of www.black5.de? Do you think it will be a huge project? Do you know some useful library/plugin?
Thanks
Related
I implemented a sticky sisebar library that aims to be easy to use as you are free in setting up the sidebar and its CSS. The library only gives you an additional value as custom property (--push-down) you can use in CSS to push the sidebar to its current position.
The problem I'm facing is that the script causes massive jitters in the sidebar position on some devices. These do only occur on the first scroll - if you've scrolled through the site once, it's working fine.
I would like to know why that could be the case (and if it's possible to be fixed. If not I still want to find out what's happening here.)
Using throttle functions does not make a difference here, as described here: https://stackoverflow.com/a/44779316/6336728. I'm already using the suggested method of doing layout read on scroll and layout write with requestAnimationFrame.
I put the code of my GitHub repo in this CodePen to try it out quickly; only the JS part is relevant.
I Want to create a slideshow of different images for a project with HTML, JS, and CSS. I want to create a scroll function that will move the image slides from left to right based on the movement of the mouse scroll.
If this sounds confusing this link shows exactly what I'm trying to do but due to my lack of experience, I have no idea how to accomplish this. Any ideas would help.
link: https://robbiecrenshaw.com/ about the halfway mark
thank you
(I'm a beginner in programming)
The animations used on this site are called scroll-based animations, where the animation progress is controlled directly by the scroll position.
They are implemented by listening to the scroll event that is fired when a user scrolls and updating the styles of certain elements dynamically based on the scroll position.
You can create scroll animations from scratch using JavaScript or implement them using a library like GSAP ScrollTrigger (which is what this specific site uses).
I created a demo similar to the effect you're looking for here: https://codepen.io/nickcil/pen/yLVEZPa
This example uses ScrollMagic to track the scroll position and update the transform property of an element to make the squares move left as you scroll down the page.
I have seen many websites using smooth scrolling (click here to see an example). So, my question is that how they achieve this effect, do they use some libraries, etc. I have searched for this but didn't find the right answer.
you can try using https://github.com/ivmello/easeScroll this jquery this will help you for smooth scrolling on mousewheel, but for other appering animation you have to use some animation library like gsap
The effect you are looking for is called Parallax. Do a search for "multi layer parallax websites". There was a good how-to with code high up the first page.
Edit: The second part of the example website is the Hero image (the banners) zooming, you can get that searching "Hero image zooming"
I'm trying to find a Javascript snippet that I can archive the UIScrollView + UIPageControl effect of the iOS using Javascript and CSS3.
Generating the page control to a dot to each view and do the switching is very easy, but the complicated part it is to do the elastic movement.
I would want to do this myself, but it seems to much work to me, like hours of work, tried googling, but I not found anything. I don't like JQuery but the mobile framework doesn't seems to do this.
If I had to do this by myself, do you guys have any suggested approach? I'm thinking in using a parent div, with a bunch of divs inside for each view. Use the parent with overflow: hidden;
and attach event to the parent view and listen to drags and bind to the horizontal scroll offset. This would be a good way? or using css transitions with left or translate-x would be more smooth?
EDIT:
This is what I tried (not working very well): JSFIDDLE
Yeah,
Im not sure about touch swipes, although i think the 'activate' or 'touchstart' handler might be useful. Using CSS3 transitions to achieve the elastic movement is quite smooth, just alter the left or right style property of your internal div and the transfom will move from its current position to where you need it to be.
This is not the worlds bestt example but have a look here
villasanrafael.eu/Gallery.php
I am attempting to get out of amateur status, so forgive any false assumptions or silly questions.
I am interested in updating my web site http://scenicdesktops.com, so that instead of the old-school inline element that scrolls in a traditional manner (independent of the rest of the page), I would like to implement a movable inline element with smooth, side-to-side, page-to-page style scrolling. I would like to do this using side buttons, which, when clicked, would result in a smooth, moving transition of this middle section to the next / previous page.
It would also be convenient to have page links at the bottom which move the middle section strait to that specific page, all with the same smooth side-to-side motion.
I am a fan of minimalistic code, so the lighter the better. Perhaps I might need jquery or mootools for this, but my know-how ends right about there. Can anyone point me in the right direction?
Use jQuery and jQuery Tools, then you can:
$(".scrollable").scrollable();
(very minimalistic)
See http://flowplayer.org/tools/demos/scrollable/index.html for a demo