Scroll Animation Css Jquery, 16 Cool Animations On Scroll
Scroll Animation Css Jquery, 16 Cool Animations On Scroll
Animations on Scroll
(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)
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.
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.
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.
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
CSS3 Transition