If you want to download the source code then click here
Hello friends, now i am creating scroll based animation tutorial and it’s easy to use and you can integrate any where easily just you need jquery plugin and some call functions that’s it. so when you scroll down to show one by one object will show front of the screen and it’s repeatable not once at a time. it is very impact full for your website. i hope you love this tutorial.
Below I’ve attached the basic structure of HTML. you can write and upderstand or you can copy to your file. i have added the link of bootstrap, aos jquery plugin library and jquery cdn. all these link you can find on cdnjs.com website, you just visit this website, search and copy link that’s it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!-- Bootstrap Grid CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/css/bootstrap-grid.css">
<!-- AOS CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css">
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
overflow-x: hidden;
font-family: Open Sans;
}
</style>
</head>
<body>
<!-- Jquery Cdn link -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- AOS JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
<script>
//script write here
</script>
</body>
</html>Below I have attached some video tutorial links, which you will get to learn a lot from them.
You also might like this video
- Scroll To Top Button (Back To Top) Using Simple JAVASCRIPT | Click to Scroll Top | CSS Smooth Scroll
- Profile Card UI Design Using HTML & CSS | CSS Flip Hover Effect & Dark Light Mode | Figma UI Design
- Show hide text on click using HTML, CSS & JQUERY | Expand & Collapse Text | Jquery Toggle Class
- Menu Hover Effect | Infinite Wavy Border Animation Using Only HTML, CSS ANIMATION
- Testimonial Carousel With Slick Carousel, Review Slider | HTML,CSS & JQUERY TUTORIAL
Animation on scroll using html, css, and aos js
As you can see above the video tutorial. you can seen my videos on learndesign youtube channel so i hope you love my videos. and you can use all of this code on your personal projects, school project feel free. just copy the code and use it, also have a download option to download all the files, images in one click.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!-- Bootstrap Grid CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/css/bootstrap-grid.css">
<!-- AOS CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css">
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
overflow-x: hidden;
font-family: Open Sans;
}
</style>
</head>
<body>
<section class="section1">
<h1 data-aos="zoom-in-up">Animate on scroll</h1>
</section>
<section class="section2">
<div class="container">
<div class="row">
<div class="col-md-6">
<img data-aos="zoom-out-right" src="https://images.pexels.com/photos/2879991/pexels-photo-2879991.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
</div>
<div class="col-md-6 p-5">
<hr data-aos="slide-right">
<h2 data-aos="slide-left">Suspendisse placerat quam nec erat imperdiet</h2>
<p data-aos="slide-up">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci ex perferendis enim deserunt, sapiente saepe, quidem, dolorum fugiat vitae culpa earum eius, similique facilis aspernatur at autem odit fugit mollitia.</p>
<a data-aos="slide-down" href="#">Learn More</a>
</div>
</div>
</div>
</section>
<section class="section3">
<div class="container">
<div class="row">
<div class="col-md-6 p-5">
<hr data-aos="slide-left">
<h2 data-aos="slide-right">Suspendisse placerat quam nec erat imperdiet</h2>
<p data-aos="slide-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci ex perferendis enim deserunt, sapiente saepe, quidem, dolorum fugiat vitae culpa earum eius, similique facilis aspernatur at autem odit fugit mollitia.</p>
<a data-aos="zoom-in-down" href="#">Learn More</a>
</div>
<div class="col-md-6">
<img data-aos="slide-left" src="https://images.pexels.com/photos/3315080/pexels-photo-3315080.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="">
</div>
</div>
</div>
</section>
<section class="section4">
<div class="container">
<div class="row">
<div class="col-md-4 p-5">
<img data-aos="slide-left" src="https://images.pexels.com/photos/3315080/pexels-photo-3315080.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="">
</div>
<div class="col-md-4 p-5">
<img data-aos="zoom-in" src="https://images.pexels.com/photos/3315080/pexels-photo-3315080.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="">
</div>
<div class="col-md-4 p-5">
<img data-aos="slide-right" src="https://images.pexels.com/photos/3315080/pexels-photo-3315080.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="">
</div>
<div class="col-md-4 p-5">
<img data-aos="slide-right" src="https://images.pexels.com/photos/3315080/pexels-photo-3315080.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="">
</div>
<div class="col-md-4 p-5">
<img data-aos="zoom-out-up" src="https://images.pexels.com/photos/3315080/pexels-photo-3315080.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="">
</div>
<div class="col-md-4 p-5">
<img data-aos="zoom-in-left" src="https://images.pexels.com/photos/3315080/pexels-photo-3315080.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="">
</div>
</div>
</div>
</section>
<section class="section1">
<h1 data-aos="flip-left">Animate on scroll</h1>
</section>
<!-- Jquery Cdn link -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- AOS JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
<script>
//script write here
</script>
</body>
</html>*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
overflow-x: hidden;
font-family: Open Sans;
}
img{
width: 100%;
}
section{
width: 100%;
min-height: 100vh;
padding: 100px 0;
display: flex;
justify-content: center;
align-items: center;
}
.section1{
background: rgba(63, 81, 181, .9) url(https://images.pexels.com/photos/2411245/pexels-photo-2411245.png?auto=compress&cs=tinysrgb&dpr=1&w=500) no-repeat;
background-size: cover;
background-position: center;
background-blend-mode: overlay;
}
.section2 img,
.section3 img{
max-height: 450px;
}
h1{
color: #fff;
font-size: 58px;
}
h2{
font-size: 38px;
margin-bottom: 25px;
}
p{
line-height: 28px;
}
hr{
height: 3px;
background-color: blue;
border:none;
width: 20%;
margin-bottom: 25px;
}
a{
display: inline-block;
background-color: blue;
color: #fff;
padding: 15px 35px;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 1px;
margin-top: 35px;
}
.section3{
background-color: #f7f7f7;
}As you can see above the code, i have write css reset style then section style which is min height 100vh, display flex etc. then section one style background image, and background blend mode. then i’ll added heading style then anchore styles that’s it.
AOS.init({
duration: 1000,
offset: 120,
easing: 'ease-in-out'
});
I’ve added aos js call function as you can see above the code. which is the duration of 1 second, offset 120 pixels and transition easing is the ease in out. you can add this code in internal script tag or also you can create a separate file and no need to script tag just put at the code and done.
I hope you like this article and video tutorial so thanks for reading and thanks for watching our video. I have added the video tutorial on our youtube channel and you must have got to learn something new. So you must share it and subscribe to my LearnDesign youtube channel so that you can get updates on my upcoming videos. thanks for your time.
