[go: up one dir, main page]

0% found this document useful (0 votes)
186 views8 pages

Scroll Animation Css Jquery, 16 Cool Animations On Scroll

This document discusses how to create scroll animations using CSS and jQuery. It provides examples of 16 different animation types including zoom, fade, rotate, and bounce. It explains using CSS transitions, transforms, and keyframes to create the animation effects. jQuery is used to detect when elements are visible in the viewport and add/remove CSS classes to play the animations. Code snippets and descriptions are provided for the HTML, CSS, and JavaScript implementations. The overall goal is to teach how to make scroll animations that replay each time the user scrolls rather than needing a page refresh.

Uploaded by

Prasad Darekar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
186 views8 pages

Scroll Animation Css Jquery, 16 Cool Animations On Scroll

This document discusses how to create scroll animations using CSS and jQuery. It provides examples of 16 different animation types including zoom, fade, rotate, and bounce. It explains using CSS transitions, transforms, and keyframes to create the animation effects. jQuery is used to detect when elements are visible in the viewport and add/remove CSS classes to play the animations. Code snippets and descriptions are provided for the HTML, CSS, and JavaScript implementations. The overall goal is to teach how to make scroll animations that replay each time the user scrolls rather than needing a page refresh.

Uploaded by

Prasad Darekar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

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

You might also like