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
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.
Marco Alka
Software Engineer, Technical Consultant & Mentor
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: fixedandbackground-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):