Hi there,
I am wondering if there is a way to achieve this effect when scrolling using just CSS?
I really like the way the hat scrolls out of view and then each letter changes it’s size. I guess I can do the letter sizing with keyframes, but not sure how I do it when the page scrolls for each letter.
Any ideas on the best way to do this?
The animation can be done in CSS but you would have to have js trigger and interact with the animation based on how far the page has scrolled. It can’t be done in CSS alone unless you just wanted it as a stand alone animation not based on scroll.
Here’s a simple demo where I borrowed most of the js from CSS Tricks just to test.
Obviously the more animation you add the more complex it gets so if you want all the bells and whistles then you are better off with the ready made plugin you found (or similar ones).
As the position of each letter is totally dependent on the scroll position with no timing involved, the animation of the letters can only be 100% javascript. The same applies to the position of the top hat, the position of the magic wand and the angle of the magic wand.
The wobbling of the top hat is done by JavaScript but that could be done by CSS keyframe animation.
Thanks for the replies and the example @PaulOB I will have a play around with this.
Do you know if this effect has a name at all?
I’m not sure if there is a specific name for it but I usually refer to it as scroll animations.
There are many others around that do all sorts of animations like this one.
Or for full blown work something like this perhaps.
It all depends on what you want to accomplish. If it’s just a ‘one off’ little animation then write it yourself but of its a series of complex animation then one of those tools would be helpful but of course there are steep learning curves,
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.