By registering with us, you'll be able to discuss, share and private message with other members of our community.
SignUp Now!<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="animateview.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Asap&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Asap", sans-serif;
}
body{
background: #42455a;
}
section{
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
section:nth-child(1){
color: #e0ffff;
}
section:nth-child(2){
color: #42455a;
background: #e0ffff;
}
section:nth-child(3){
color: #e0ffff;
}
section:nth-child(4){
color: #42455a;
background: #e0ffff;
}
section .container{
margin: 100px;
}
section h1{
font-size: 3rem;
margin: 20px;
}
section h2{
font-size: 40px;
text-align: center;
text-transform: uppercase;
}
section .text-container{
display: flex;
}
section .text-container .text-box{
margin: 20px;
padding: 20px;
background: #00c2cb;
}
section .text-container .text-box h3{
font-size: 30px;
text-align: center;
text-transform: uppercase;
margin-bottom: 10px;
}
.reveal{
position: relative;
transform: translateX(500px);
transition: 1s all ease;
}
.reveal.active{
transform: translateX(0);
}
</style>
</head>
<body>
<section>
<h1>Scroll Down to Reveal Elements ↓</h1>
</section>
<section>
<div class="container reveal">
<h2>Caption</h2>
<div class="text-container">
<div class="text-box">
<h3>Section Text</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
eius molestiae perferendis eos provident vitae iste.
</p>
</div>
<div class="text-box">
<h3>Section Text</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
eius molestiae perferendis eos provident vitae iste.
</p>
</div>
<div class="text-box">
<h3>Section Text</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
eius molestiae perferendis eos provident vitae iste.
</p>
</div>
</div>
</div>
<br>
</section>
<div class="reveal" id="containeraa">
<img class="owl1" src="bookkeeping.png" alt="" width="60" height="auto" alt="A "/>
<p><br><span class="lsize1">Bookkeeping</span></p>
</div><br>
</body>
</html>
function reveal() {
var reveals = document.querySelectorAll(".reveal");
for (var i = 0; i < reveals.length; i++) {
var windowHeight = window.innerHeight;
var elementTop = reveals[i].getBoundingClientRect().top;
var elementVisible = 3;
if (elementTop < windowHeight - elementVisible) {
reveals[i].classList.add("active");
} else {
reveals[i].classList.remove("active");
}
}
}
window.addEventListener("scroll", reveal);
// https://alvarotrigo.com/blog/css-animations-scroll/
Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.
We use essential cookies to make this site work, and optional cookies to enhance your experience.