<section id="main"></section>
<div class="main-text">
<p>Hello,</p>
<p>This page has scroll animations</p>
<p>The animations change depending on user preferences</p>
<p>
By default, the boxes fade-in from the right side of the page and move toward the left.
If the user prefers reduced motion, the boxes just fade-in without movement.
</p>
</div>
</section>
<section id="sections">
<div class="sections-text">
<h2>Section</h2>
<h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, dicta?</h3>
</div>
<div class="container">
<div class="box box-1">
<h2>Box 1</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit perspiciatis accusantium nesciunt,
officia sapiente natus!
</p>
</div>
<div class="box box-2">
<h2>Box 2</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit perspiciatis accusantium nesciunt,
officia sapiente natus!
</p>
</div>
<div class="box box-3">
<h2>Box 3</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit perspiciatis accusantium nesciunt,
officia sapiente natus!
</p>
</div>
</div>
</section>
<section id="sections">
<div class="sections-text">
<h2>Section</h2>
<h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, dicta?</h3>
</div>
<div class="container">
<div class="box box-1">
<h2>Box 1</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit perspiciatis accusantium nesciunt,
officia sapiente natus!
</p>
</div>
<div class="box box-2">
<h2>Box 2</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit perspiciatis accusantium nesciunt,
officia sapiente natus!
</p>
</div>
<div class="box box-3">
<h2>Box 3</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit perspiciatis accusantium nesciunt,
officia sapiente natus!
</p>
</div>
</div>
</section>
<section id="sections">
<div class="sections-text">
<h2>Section</h2>
<h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, dicta?</h3>
</div>
<div class="container">
<div class="box box-1">
<h2>Box 1</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit perspiciatis accusantium nesciunt,
officia sapiente natus!
</p>
</div>
<div class="box box-2">
<h2>Box 2</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit perspiciatis accusantium nesciunt,
officia sapiente natus!
</p>
</div>
<div class="box box-3">
<h2>Box 3</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit perspiciatis accusantium nesciunt,
officia sapiente natus!
</p>
</div>
</div>
</section>
@charset "utf=8";
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
body {
margin: 0px;
padding: 0px;
font-family: "Poppins", sans-serif;
background: #301934;
}
* {
box-sizing: border-box;
scroll-behavior: smooth;
}
#main {
width: 100%;
height: 100vh;
position: relative;
}
.main-text {
position: absolute;
width: 80%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.main-text p:nth-child(1) {
font-weight: 500;
font-size: 27px;
line-height: 20px;
}
.main-text p:nth-child(2) {
font-size: 55px;
font-weight: 500;
letter-spacing: 0.5px;
}
.main-text p:nth-child(3) {
font-size: 30px;
line-height: 50px;
}
.main-text p:nth-child(4) {
font-size: 20px;
line-height: 25px;
}
.main-text p {
color: #b393d3;
margin: 23px 0px 25px;
line-height: 58px;
}
#sections {
background-color: transparent;
display: flex;
justify-content: center;
align-items: center;
margin: 30px 0px;
flex-direction: column;
overflow: hidden;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin: 20px 0px;
}
.sections-text h2 {
font-weight: 600;
color: #b393d3;
font-size: 30px;
line-height: 0px;
}
.sections-text h3 {
font-weight: 500;
color: #b393d3;
}
.box {
width: 300px;
height: 320px;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 7px;
margin: 15px;
background: rgba(85, 60, 154, 0.5);
border: 1px solid rgba(255, 255, 255, 0.1);
transform: translateX(100%);
opacity: 0;
transition: transform 0.5s linear, opacity 0.5s linear;
}
.reveal {
transform: translateX(0);
opacity: 1;
}
@keyframes reveal {
to {
transform: translateX(0);
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.box {
transform: translateX(0);
opacity: 0;
}
.reveal {
opacity: 1;
}
@keyframes reveal {
to {
opacity: 1;
}
}
}
.box h2 {
color: #301934;
font-size: 23px;
line-height: 0px;
}
.box p {
text-align: center;
width: 230px;
margin: 0px 0px 20px 0px;
color: #fff;
}
@media (max-width: 1000px) {
* {
box-sizing: border-box;
}
.main-text {
top: 46%;
}
}
@media (max-width: 1140px) {
.main-text {
margin: 10px;
}
.main-text h1 {
font-size: 3rem;
}
}
@media (max-width: 720px) {
.main-text {
width: 70%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
function reveal() {
const boxes = document.querySelectorAll(".box");
for (let i = 0; i < boxes.length; i++) {
const windowHeight = window.innerHeight;
const elementTop = boxes[i].getBoundingClientRect().top;
const elementVisible = 150;
if (elementTop < windowHeight - elementVisible) {
boxes[i].classList.add("reveal");
} else {
boxes[i].classList.remove("reveal");
}
}
}
window.addEventListener("scroll", reveal);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.