How to Make On Scroll Animation
 |
| Animation on Scroll with CSS and jQuery at CodingTuting |
UI Animations are the key effect on the beauty of any Web Page. Animation on Scroll is one of them. Today we'll learn How to make CSS Animation on Scroll using jQuery.
So, welcome back friends to the CodingTuting. I'm Jignesh Panchal with another awesome tutorial. Friends, I hope you like our last cool creation on Login Form. If you haven't seen, please Click here.
Let's move to today's creation.
I've created 16 different animations. I used CSS3 to created the animation and jQuery to control the animation. Many scroll animations are performed only once, then we need to reload the web page to see the animation again.
But our animation works with every scroll, it doesn't need to reload the web page. We'll create the following kinds of Scroll Animation CSS.
2. CSS Fade Animation
3. CSS Rotate Animation
4. CSS Flip Animation
5. CSS Bounce Animation
Preview of CSS Scroll Animation jQuery
Focus on the source code
As you know, I always give a summary of the source code before share it. See How I did this? Don't be hurry for source code.
I'm using Google Fonts in my code. You can use it too or any others as you like.
- I created the basic HTML structure and give the descriptive class names to the elements.
- I applied the CSS Transition, Transform effects for moving effects. For some animations, I used CSS3 Keyframe animations.
- I created the jQuery function isScrolledIntoView() to analysis the viewport of the screen
- At last, I applied the CSS for item visible in viewport and for the item move away from the viewport to this isScrolledIntoView() function.
I've written the descriptive text in the comment in jQuery page, so you'll not face any difficulty in finding the appropriate function. Also, the name of all CSS are descriptive.
See the Pen Animation on Scroll using CSS and jQuery by CodingTuting (@codingtuting) on CodePen.
I hope you got - How To Make Scroll Animation with CSS & jQuery. Add this Scroll Animation jQuery as per your need of effect to the element and make a Scroll Animation Website. You can make more new animation by getting the idea form this CSS Animations.
Please read our more articles on Web Design and all. If there is any bug in this tutorial please let us know in the comment.
We would like your suggestion on any topic. Please suggest us, we'll try to post about that topic as soon as. If you've any query regards the Web Design, Development, etc. Please do comment.
Sharing is Caring
Thanks for Reading
2 Comments
Write CommentsThis is a fantastic website , thanks for sharing. แทงบอล
ReplyCool stuff you have got and you keep update all of us. Unity in diversity
ReplyEmoticonEmoticon