Всем привет! В этом видео вы узнаете, как создать веб-сайт с анимацией прокрутки, чтобы привлечь больше внимания к веб-сайту, используя HTML, CSS и Javascript. Надеюсь, это видео будет полезным.
Библиотеки JavaScript ScrollReveal - https://scrollrevealjs.org
HTML КОД:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reveal Website Elements On Scroll - HTML, CSS & Javascript</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<script src="https://unpkg.com/scrollreveal"></script>
</head>
<body>
<section class="sec-01">
<div class="container">
<h2 class="main-title">Reveal Elements On Scroll</h2>
<div class="content">
<div class="image">
<img src="img1.jpg" alt="">
</div>
<div class="text-box">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
<div class="media-icons">
<a href="#" class="icon"><i class="fab fa-facebook"></i></a>
<a href="#" class="icon"><i class="fab fa-instagram"></i></a>
<a href="#" class="icon"><i class="fab fa-twitter"></i></a>
<a href="#" class="icon"><i class="fab fa-youtube"></i></a>
</div>
</div>
</section>
<section class="sec-02">
<div class="container">
<h3 class="section-title">Lorem Ipsum</h3>
<div class="content">
<div class="image">
<img src="img2.jpg" alt="">
</div>
<div class="info">
<h4 class="info-title">Description</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
</div>
</section>
<section class="sec-03">
<div class="container">
<h3 class="section-title">Lorem Ipsum</h3>
<div class="content">
<div class="media-info">
<li><a href="#"><i class="fab fa-facebook"></i> Facebook</a></li>
<li><a href="#"><i class="fab fa-instagram"></i> Instagram</a></li>
<li><a href="#"><i class="fab fa-twitter"></i> Twitter</a></li>
<li><a href="#"><i class="fab fa-youtube"></i> Youtube</a></li>
<li><a href="#"><i class="fab fa-linkedin"></i> Linkedin</a></li>
</div>
<div class="image">
<img src="img3.jpg" alt="">
</div>
</div>
</div>
</section>
<script>
//common reveal options to create reveal animations
ScrollReveal({
//reset: true,
distance: '60px',
duration: 2500,
delay: 400
});
//target elements, and specify options to create reveal animations
ScrollReveal().reveal('.main-title, .section-title', { delay: 500, origin: 'left' });
ScrollReveal().reveal('.sec-01 .image, .info', { delay: 600, origin: 'bottom' });
ScrollReveal().reveal('.text-box', { delay: 700, origin: 'right' });
ScrollReveal().reveal('.media-icons i', { delay: 500, origin: 'bottom', interval: 200 });
ScrollReveal().reveal('.sec-02 .image, .sec-03 .image', { delay: 500, origin: 'top' });
ScrollReveal().reveal('.media-info li', { delay: 500, origin: 'left', interval: 200 });
</script>
</body>
</html>
CSS КОД:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
html{
scroll-behavior: smooth;
}
body{
background: #111222;
}
section{
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding: 80px 100px;
color: #fff;
}
.container{
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.main-title{
font-size: 4em;
margin-bottom: 50px;
}
.content{
position: relative;
width: 1150px;
display: flex;
justify-content: center;
align-items: center;
}
.content .image{
position: relative;
width: 800px;
height: 400px;
overflow: hidden;
}
.content .image img{
z-index: 111;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
}
.content .text-box{
z-index: 222;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
padding: 40px;
max-width: 400px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
transform: translate(-80px, 50px);
}
.content .text-box h3{
font-size: 2em;
margin-bottom: 10px;
}
.media-icons{
margin-top: 100px;
}
.media-icons a{
color: #fff;
font-size: 2em;
margin: 60px;
}
.section-title{
font-size: 3em;
margin-bottom: 80px;
}
.info-title{
font-size: 1.8em;
margin-bottom: 10px;
}
.info{
width: 700px;
margin-left: 50px;
}
.media-info{
width: 400px;
margin-left: 50px;
}
.media-info li{
list-style: none;
font-size: 1.4em;
}
.media-info li a{
color: #fff;
text-decoration: none;
}
.media-info li:not(:last-child){
margin-bottom: 50px;
}
.media-info li:nth-child(1), .media-info li:nth-child(5){
padding-left: 100px;
}
.media-info li:nth-child(2), .media-info li:nth-child(4){
padding-left: 50px;
}
.sec-03{
margin-bottom: 100px;
}
JAVASCRIPT КОД:
<script>
//common reveal options to create reveal animations
ScrollReveal({
//reset: true,
distance: '60px',
duration: 2500,
delay: 400
});
//target elements, and specify options to create reveal animations
ScrollReveal().reveal('.main-title, .section-title', { delay: 500, origin: 'left' });
ScrollReveal().reveal('.sec-01 .image, .info', { delay: 600, origin: 'bottom' });
ScrollReveal().reveal('.text-box', { delay: 700, origin: 'right' });
ScrollReveal().reveal('.media-icons i', { delay: 500, origin: 'bottom', interval: 200 });
ScrollReveal().reveal('.sec-02 .image, .sec-03 .image', { delay: 500, origin: 'top' });
ScrollReveal().reveal('.media-info li', { delay: 500, origin: 'left', interval: 200 });
</script>