Start a personal dev blog on your domain for free with Hashnode and grow your readership.
How to animate elements when you scroll down?
Hello,
How can I animate elements when I scroll down?
I know this can be done with ScrollMagic.io but I can't seem to understand how I can solve my problem with this plugin.
So basically what I want is to have a background image and when you scroll down, the background stays there and over it elements show/hide based on the scroll position.
Any idea?
Thanks, Klevis
Marco Alka
Software Engineer, Technical Consultant & Mentor
Jul 25, 2018
tl;dr of Jason's answer:
throw away that JS lib, you don't need it. Just create a div element with the image as background-image, make it
position: fixed
andbackground-size: cover
. Then write your content as usual. The background image will stay and cover your screen, while you can scroll through your content.Edit (VanillaJS scroller animations):
Marco Alka
Jul 26, 2018
Klevis Miho I think you don't need the lib and CSS can give you plenty of control! All you have to do is make containers, which define sliding behavior and to which child elements can relate. Then fill them with the sliding backgrounds, one per container. You only have one background fixed and every other background is absolute. The first one is absolute at the bottom of its container, every other one needs two classes, which either put them at the top or bottom of their container, depending on the scroll position. Then all you need to do is define a few elements you want to display and where they should appear. I made a simple example with two backgrounds and six elements, which appear at certain scroll positions relative to their background's scroll position in the container. It's just a quick hack and can be improved in a number of ways, but I hope you get the gist of how to get simple stuff done without big, complex and inflexible libraries.
Klevis Miho
Jul 27, 2018
Marco Alka that seems to solve my issue. I think I will use your solution. Thank you very much.
Jason Knight
The less code you use, the less there is to break
Jul 25, 2018
If all you have is a background-position:fixed background and stuff showing up on screen when you scroll, why are you getting JavaScript involved?
Though if you're talking goofy animated slide-in fade-in style nonsense, or that parallax scrolling garbage, JUST STOP! All you're doing is pissing off users by making things slower loading, memory wasting, battery wasting, and harder to use.
That type of artsy fartsy "flashy" stuff only exists to let graphic artists DELUDE themselves into thinking they know what design is, and to cover up for a lack of 'content of value'. It really has no business on any legitimate website about a legitimate topic which is why you rarely find that stuff anywhere but sleazy, scummy advertising pages for things that cannot stand on their own merits.
... or on pages created by artists and programmers who don't know how to keep it in their pants.
End of the day people visit websites for the CONTENT, not the goofy graphics, stock images, or fancy animations you slop around the content; to that end that's where your efforts should go... no matter what lies some marketing executive who knows nothing about websites or graphic artist who doesn't know the first blasted thing about accessibility might try to spoon feed you -- either out of their own ignorance, or trying to cover up for a lack of competence.
I'm not saying you can't make it pretty, but look around at the big success stories of the web. Are they pulling these types of graphical flashy stunts? Hell no.
Klevis Miho
Jul 25, 2018
I totally agree, but in this case it will be a intranet thing.