<!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>Reveal on Scroll</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="brand">
<ul>
<li>By <span>Abhii</span></li>
</ul>
</div>
<div class="nav">
<ul>
<li>Inspiration: <a style="text-decoration: underline"
href="https://www.youtube.com/watch?v=RYUuGgC_IY0">Design Course</a></li>
</ul>
</div>
</header>
<main>
<article>
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae laborum molestiae asperiores
consectetur quis odio aliquam quidem porro dolore ab corporis ullam illo eum ipsa, impedit alias cumque!
Voluptatem saepe vero ratione suscipit molestiae, deserunt et nisi illo quas velit nulla harum pariatur
neque, accusamus maxime id facilis corporis voluptatum quia ex aspernatur! Nemo vitae ex nisi at quas
tempore natus provident temporibus et veritatis repellat mollitia, porro eos nostrum non ipsa
necessitatibus expedita itaque vero minus ab quam excepturi. Tempora, corrupti cum sapiente neque
maiores vitae expedita? Nulla, in. Officiis non id cum? Distinctio nulla quae voluptatem velit est?</p>
</article>
<article>
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, odio corporis. Culpa, aliquid! Officia
magni labore quae aliquid esse! Cumque, quae voluptatem. Ducimus nostrum veniam ut excepturi sunt
consequatur omnis, quas ullam eveniet beatae maxime molestias nihil eum perferendis asperiores minus
molestiae veritatis voluptates rerum hic voluptas necessitatibus porro doloremque! Incidunt cupiditate
error blanditiis dicta minus vitae veniam totam libero nam sed iure deleniti quas cum nesciunt
obcaecati, minima sit! Repellat esse atque repudiandae assumenda, voluptas harum excepturi saepe
provident odio unde eveniet veritatis perspiciatis quaerat! Vero maiores, quibusdam obcaecati ab rerum
delectus illum consequuntur architecto expedita necessitatibus mollitia! Totam ipsam provident suscipit,
iure saepe at obcaecati expedita dolorem non molestiae repellat eaque fugit commodi assumenda quia qui
dolore eos facere minus iste. Quis ipsam eligendi eius, praesentium soluta nisi consequuntur. Quibusdam
assumenda ut officia ipsum iure ad eveniet incidunt asperiores libero! Odit, illum, ducimus itaque
debitis ullam impedit unde aspernatur distinctio neque accusamus laudantium assumenda rerum aliquam rem
et repellat minus molestias sed velit voluptate, esse commodi nemo natus. Odio magni laudantium autem
ducimus fugiat, numquam nesciunt minus beatae illo veritatis adipisci corporis culpa doloribus
praesentium cum! Harum modi debitis provident dolor ipsum quae vitae, nihil excepturi magnam, quidem
necessitatibus expedita delectus aliquid pariatur reprehenderit. Commodi ipsam cupiditate rem
repellendus odio possimus necessitatibus magni veniam, doloremque suscipit amet esse provident aliquam
autem fuga vel rerum culpa! Modi exercitationem asperiores voluptatibus sunt harum? Delectus aperiam
voluptatibus, laborum consequuntur a deserunt? Officia voluptates aspernatur ipsum laborum perferendis
molestias cum quod eligendi esse fugit. Voluptatem quae laborum magni est, veniam accusantium
consectetur aspernatur perspiciatis ad quisquam fugiat distinctio eaque! Voluptas nobis rerum sed ad qui
impedit distinctio nulla maiores, officia iste omnis facere quasi. Ut, sed distinctio. Veritatis
laudantium dolores animi magni? Ipsum commodi saepe eius nisi perferendis ducimus magnam facere tenetur
libero ipsam, voluptates nemo laborum quaerat assumenda laudantium, dolorum soluta eligendi recusandae.
Atque, reprehenderit ipsum. Minus vitae dolore facilis, illum corrupti accusantium rem, consectetur
error molestias quaerat similique assumenda perferendis. Dolorum facilis nemo sequi voluptate magni ea.
Autem quam itaque eos illo in at excepturi quae, vitae adipisci quo est ad, omnis pariatur iste cum
aspernatur corporis quidem, et accusantium perspiciatis deleniti eaque error! Quo, necessitatibus vero.
Ea vitae expedita adipisci necessitatibus eius fuga soluta commodi repudiandae facilis ipsa quis
blanditiis eaque, molestiae animi modi nulla rem, pariatur quod earum aspernatur culpa. Consequatur
tempore voluptas nihil ut dolores et dicta quidem quae. Iste corporis magni, officiis tenetur tempora
hic soluta autem odit inventore rerum, reprehenderit repellendus, quae distinctio nostrum ipsam neque.
Dolorem assumenda quibusdam, autem itaque tempore ex! Perferendis numquam dignissimos velit itaque eos
cupiditate, dicta similique neque nisi explicabo earum molestias quam, doloremque aspernatur commodi
nemo quae magnam? Velit molestiae sit dolorem similique error quis nostrum debitis perspiciatis
accusantium. Accusamus deserunt omnis quis similique, iste dolores molestias amet consectetur totam
explicabo facere harum velit eius doloribus, sed quo repellat laborum? Accusantium, tenetur veniam fuga
quo ad odit. Labore illum nisi deleniti laudantium eius aspernatur similique nemo sunt nihil beatae!</p>
</article>
<article>
<h3>Lorem ipsum dolor sit amet.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, ad maxime deleniti amet ullam adipisci,
alias harum praesentium temporibus mollitia nobis. Corrupti repellat atque dolore eos nemo laudantium
ex, libero eaque, quam saepe cupiditate mollitia vitae repudiandae aspernatur sint sit. Doloremque
excepturi delectus, beatae quod, pariatur ipsa veniam maiores totam at nulla eligendi, eius assumenda!
Odit modi a veniam. Tempore iste nulla porro molestiae error ratione, illo recusandae inventore autem
maiores natus est, laboriosam atque quae officiis, sed quasi suscipit tempora quaerat ab accusantium!
Necessitatibus perspiciatis dignissimos, magnam optio laborum suscipit. Cum doloribus minima eligendi
magnam saepe placeat incidunt odit perspiciatis molestiae quo nisi impedit et perferendis, id possimus
eum dolorum reprehenderit unde maiores, atque quasi ab nulla quidem. Reprehenderit voluptatibus delectus
inventore voluptas non? Deserunt consequuntur ut minima sed eveniet sequi repudiandae ad eligendi facere
quos! Deleniti, corporis a. Minima impedit iure perspiciatis, sapiente odio blanditiis architecto,
aliquam quasi tenetur ex aperiam adipisci! Facere eveniet quia minima ipsa tenetur qui sunt facilis
voluptates excepturi, exercitationem provident vitae reprehenderit nobis eos in. Cupiditate nam ullam
possimus, similique quod quibusdam, accusamus repellat, quia aperiam qui reprehenderit laudantium alias
voluptate accusantium sunt perferendis sapiente. Explicabo corrupti exercitationem quibusdam repudiandae
perferendis odio et? Quasi quo illo, quia cumque recusandae libero necessitatibus culpa quaerat natus ea
fuga ratione odio saepe consectetur dignissimos nulla rem ducimus fugit, animi, quos veniam ipsa
reiciendis! Sapiente quidem perspiciatis optio distinctio quam laboriosam totam, assumenda maiores.
Sapiente eveniet in, blanditiis eligendi possimus doloremque dolores odit iure fugiat temporibus
commodi. Doloremque accusamus dolore cum quisquam nostrum necessitatibus, voluptas odio, magnam alias
iusto corporis aliquam beatae unde dolorum! Provident dolores molestias suscipit? Maiores, porro.
Mollitia consectetur placeat eaque enim nisi sit inventore ex tenetur explicabo, dignissimos hic harum
debitis ab nihil aspernatur officiis nostrum error similique ducimus ipsam voluptatum. Odit, ipsam.</p>
</article>
<article>
<h3>Lorem ipsum dolor sit amet.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta modi eaque culpa consectetur totam non
eveniet libero ipsum tempora maiores, asperiores amet odit cumque ratione iure illo hic aspernatur
laborum deserunt similique. Impedit libero earum magnam laudantium iste aliquid iure voluptate
obcaecati? Esse accusamus incidunt necessitatibus ipsum ex odit. Iusto autem quod accusamus error porro
illo ab, eum ducimus, provident nesciunt nobis totam unde ipsa, facilis incidunt. Nostrum blanditiis
veritatis temporibus omnis dolorem laudantium quas fugit, vel assumenda facere dignissimos ipsa quia
quod minus. Harum, nulla? Tempore fugiat enim, vitae, minus deserunt sequi labore facilis officia eius
porro earum numquam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, ad maxime deleniti
amet ullam adipisci,
alias harum praesentium temporibus mollitia nobis. Corrupti repellat atque dolore eos nemo laudantium
ex, libero eaque, quam saepe cupiditate mollitia vitae repudiandae aspernatur sint sit. Doloremque
excepturi delectus, beatae quod, pariatur ipsa veniam maiores totam at nulla eligendi, eius assumenda!
Odit modi a veniam. Tempore iste nulla porro molestiae error ratione, illo recusandae inventore autem
maiores natus est, laboriosam atque quae officiis, sed quasi suscipit tempora quaerat ab accusantium!
Necessitatibus perspiciatis dignissimos, magnam optio laborum suscipit. Cum doloribus minima eligendi
magnam saepe placeat incidunt odit perspiciatis molestiae quo nisi impedit et perferendis, id possimus
eum dolorum reprehenderit unde maiores, atque quasi ab nulla quidem. Reprehenderit voluptatibus delectus
inventore voluptas non? Deserunt consequuntur ut minima sed eveniet sequi repudiandae ad eligendi facere
quos! Deleniti, corporis a. Minima impedit iure perspiciatis, sapiente odio blanditiis architecto,
aliquam quasi tenetur ex aperiam adipisci! Facere eveniet quia minima ipsa tenetur qui sunt facilis
voluptates excepturi, exercitationem provident vitae reprehenderit nobis eos in. Cupiditate nam ullam
possimus, similique quod quibusdam, accusamus repellat, quia aperiam qui reprehenderit laudantium alias
voluptate accusantium sunt perferendis sapiente. Explicabo corrupti exercitationem quibusdam repudiandae
perferendis odio et? Quasi quo illo, quia cumque recusandae libero necessitatibus culpa quaerat natus ea
fuga ratione odio saepe consectetur dignissimos nulla rem ducimus fugit, animi, quos veniam ipsa
reiciendis! Sapiente quidem perspiciatis optio distinctio quam laboriosam totam, assumenda maiores.
Sapiente eveniet in, blanditiis eligendi possimus doloremque dolores odit iure fugiat temporibus
commodi. Doloremque accusamus dolore cum quisquam nostrum necessitatibus, voluptas odio, magnam alias
iusto corporis aliquam beatae unde dolorum! Provident dolores molestias suscipit? Maiores, porro.
Mollitia consectetur placeat eaque enim nisi sit inventore ex tenetur explicabo, dignissimos hic harum
debitis ab nihil aspernatur officiis nostrum error similique ducimus ipsam voluptatum. Odit, ipsam.</p>
</article>
</main>
<script src="main.js"></script>
</body>
</html>* {
padding: 0;
margin: 0;
box-sizing: border-box;
list-style-type: none;
text-decoration: none;
}
a {
color: initial;
}
body {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
header {
display: flex;
justify-content: space-between;
padding: 2rem 5rem;
background: lightblue;
position: fixed;
top: 0;
left: 0;
width: 100%;
transition: all 300ms ease;
z-index: 10;
}
.brand {
font-weight: 600;
text-transform: uppercase;
}
.brand span {
font-weight: normal;
}
.nav ul {
display: flex;
gap: 2rem;
}
main {
margin-inline: 2rem;
margin-block: 1rem;
position: absolute;
/* top: 300px; */
}
article {
width: 80%;
margin: 2rem auto;
}
article > h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
}
/* Scroller */
header.scroll-up{
transform: translateY(0);
}
header.scroll-down{
transform: translateY(-100%);
}const body = document.body;
const header = document.querySelector("header");
const main = document.querySelector("main");
const headerHeight = document.querySelector("header").offsetHeight;
main.style.top = headerHeight + "px";
let lastScroll = 0;
window.addEventListener("scroll", () => {
let currentScroll = window.pageYOffset;
// console.log("current: ", currentScroll);
// console.log("last: ", lastScroll);
if (currentScroll - lastScroll > 0) {
// scrolled down -- header hide
header.classList.add("scroll-down");
header.classList.remove("scroll-up");
} else {
// scrolled up -- header show
header.classList.add("scroll-up");
header.classList.remove("scroll-down");
}
lastScroll = currentScroll;
// console.log("last: ", lastScroll);
})
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.