Scroll Animation CSS jQuery, 16 Cool
Animations on Scroll
How to Make On Scroll Animation
(https://1.bp.blogspot.com/-0S65n-24NfA/XVWD9njqkaI/AAAAAAAAAkY/meJcYgMZH-
It6McuFUm46eOpeOf_XrHsACLcBGAs/s1600/on-Scroll-Animation-css-scroll-animation-
animation-on-scroll-jquery-scroll%2Bdown%2Banimation%2Bjquery-how-to-make-scroll-
animation-codingtuting-jptuting-jignesh-panchal.png)
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 (https://www.codingtuting.com/p/jquery.html).
So, welcome back friends to the CodingTuting (https://www.codingtuting.com).
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
(https://www.codingtuting.com/2019/08/create-login-form-in-html-css.html)
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.
1. CSS Zoom Animation
2. CSS Fade Animation
3. CSS Rotate Animation
4. CSS Flip Animation
5. CSS Bounce Animation
Preview of CSS Scroll Animation jQuery
Cool Animation on Scroll, On Scroll Animation CSS, Scroll A…
You may also like
Cool Pricing Table with Awesome Animation
Animated Hamburger Menu Button
(https://www.codingtuting.com/2019/07/hamburger-menu-button-css-
animation.html)
Beautiful Social Media Share Buttons
(https://www.codingtuting.com/2019/06/css-floating-social-media-
share-buttons.html)
Navigation Bar Hover Effect
(https://www.codingtuting.com/2019/07/navigation-bar-hover-effects-
css.html)
Create Character Counter
(https://www.codingtuting.com/2019/08/character-count-online-
tool.html)
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 (https://fonts.google.com/) 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.
ScrollAnimation.html
1 <!--Code by CodingTuting.Com Jignesh Panchal--> ?
2 <!DOCTYPE html>
3 <html lang="en">
4 <head>
5
6 <meta charset="UTF-8">
7 <meta name="viewport" content="width=device
8 <meta http-equiv="X-UA-Compatible" content=
9
10 <link href="https://fonts.googleapis.com/cs
11 <link href="https://cdnjs.cloudflare.com/aj
12
13 <link rel="stylesheet" href="StyleScrollAni
14
15 <title>Scroll Animation</title>
16
17 </head>
18
19 <body>
20
21 <section>
22
23 <h1 class="main-heading">Scroll Animati
24
25 <div class="dummy-text">
26 <p>
27 Lorem Ipsum is simply dummy tex
StyleScrollAnimation.css
8 padding bottom: 50px;
9 }
10
11 .main-heading {
12 text-align: center;
13 font-family: roboto;
14 font-family:'Raleway', sans-serif;
15 font-weight: 400;
16 font-size: 35px;
17 }
18
19 .dummy-text {
20 padding: 0 50px;
20 padding: 0 50px;
21 text-align: justify;
22 line-height: 1.5;
23 font-size: 20px;
24 font-family: roboto;
25 }
26
27 .animation {
28 width: 300px;
29 height: 150px;
30 color: #fff;
31 font-family: 'Raleway', sans-serif;
32 text-align: center;
33 margin-left: auto;
34 margin-right: auto;
ScriptScrollAnimation.js
1 /*Code by CodingTuting.Com Jignesh Panchal*/ ?
2 $(window).scroll(function(){
3
4 //Zoom-in
5 $('.zoom-in').each(function(){
6 var zoomIn = 1, zoomOut = 0;
7
8 if(isScrolledIntoView($(this))){
9 $(this).css({
10 '-webkit-transform': 'scale(' + zoo
11 'transform': 'scale(' + zoomIn + ')
12 });
13 }
14
15 else{
16 $(this).css({
17 '-webkit-transform': 'scale(' + zoo
18 'transform': 'scale(' + zoomOut + '
19 });
20 }
21 });
22
23 //Zoom-out
24 $('.zoom-out').each(function(){
25 var zoomIn = 1, zoomOut = 1.8;
26
27 if(isScrolledIntoView($(this))){
I hope you got - How To Make Scroll Animation with CSS & jQuery
(https://www.codingtuting.com/2019/08/scroll-animation-css-jquery.html). 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
(https://www.codingtuting.com/search/label/CSS?&max-results=4) 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
Keywords & Queries covered in this tutorial are:
Website Animation for Scroll Animate On Scroll On Scroll Animation css
On Scroll Animation jQuery On Scroll Animation Effects How To Scroll Animation
CSS3 Transition
Never miss our latest news, subscribe here for free
Email address... Submit
