This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 6 days ago.
I googled on some nice image sliders and stumbled across this one. When I put the javascript in a script tag in the html it works just fine, but when I try to put it in a .js file linked to the html it stops working and I can't figure out why. When I look at the console output, it says it can't read the "addEventListener" at line 10. Thanks in beforehand :)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
overflow: hidden;
}
body {
background-color: #262626;
font-family: "Roboto Slab", serif;
position: relative;
overflow-x: hidden;
}
main {
width: 100vw;
height: 100vh;
}
#backdrop {
width: 90%;
height: 100%;
margin: 0 auto;
margin-top: 1rem;
border-radius: 1rem 1rem 0 0;
background-color: #727365;
}
#home-link {
color: #f2f2e4;
text-decoration: none;
font-size: 1.7rem;
font-family: "Space Mono", monospace;
font-weight: 400;
position: absolute;
top: 1.95rem;
left: 2.6rem;
}
/* Hamburger menu */
#menu a {
text-decoration: none;
color: #262626;
}
#menu a:hover {
color: #0c0c0c;
}
#menu-toggle {
display: block;
position: absolute;
top: 2.5rem;
right: 3rem;
z-index: 1;
}
#menu-checkbox {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 2;
}
#menu-toggle span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #f2f2e4;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
opacity 0.55s ease;
}
#menu-toggle span:first-child {
transform-origin: 0% 0%;
}
#menu-toggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
#menu-checkbox:checked ~ span {
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #3f403b;
}
#menu-checkbox:checked ~ span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menu-checkbox:checked ~ span:nth-last-child(2) {
opacity: 1;
transform: rotate(-45deg) translate(0, -1px);
}
#menu {
width: 60vw;
height: 70vh;
position: absolute;
right: -100px;
margin: -100px 0 0 0;
padding: 50px;
padding-top: 125px;
border-radius: 1rem;
background-color: #bfbfae;
list-style: none;
transform-origin: 0% 0%;
transform: translate(100%, 0);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}
#menu li {
padding: 10px 0;
font-size: 22px;
}
#menu-checkbox:checked ~ ul {
transform: none;
opacity: 1;
}
/* footer */
#footer {
position: absolute;
top: 100vh;
}
/* Scrollbar */
::-webkit-scrollbar {
width: 13px;
}
::-webkit-scrollbar-thumb {
border-radius: 100px;
border: 3px solid transparent;
background-clip: content-box;
background-color: rgb(88, 88, 88);
}
::-webkit-scrollbar-thumb:hover {
background-color: rgb(109, 109, 109);
}
/* Media queries */
#media only screen and (min-width: 600px) {
}
#media only screen and (min-width: 769px) {
#backdrop {
margin-top: 2vh;
width: 98%;
height: 96.5%;
border-radius: 1rem;
}
#menu-checkbox {
display: none;
}
#menu-toggle span {
display: none;
}
#menu {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important;
transform: none !important;
background-color: rgba(160, 160, 160, 0.568);
backdrop-filter: blur(15px);
padding: 0 1rem 0 1rem;
border-radius: 2rem;
font-family: monospace;
position: fixed;
top: 102vh;
right: 50%;
translate: 50% 0;
height: fit-content;
width: 45vw;
display: flex;
justify-content: space-between;
}
#menu li {
display: inline;
font-size: 1.2rem;
}
#active {
background-color: #f2f2e4;
border-radius: 3rem;
}
.menu-links {
padding: 8px 35px 8px 35px;
}
#home-link {
display: flex;
justify-content: center;
position: static;
padding-top: 0.5rem;
}
}
.slider{
position: relative;
background: #000116;
width: 800px;
min-height: 500px;
margin: 20px;
overflow: hidden;
border-radius: 10px;
}
.slider .slide{
position: absolute;
width: 100%;
height: 100%;
clip-path: circle(0% at 0 50%);
}
.slider .slide.active{
clip-path: circle(150% at 0 50%);
transition: 2s;
}
.slider .slide img{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
.slider .slide .info{
position: absolute;
color: #222;
background: rgba(255, 255, 255, 0.3);
width: 75%;
margin-top: 50px;
margin-left: 50px;
padding: 20px;
border-radius: 5px;
box-shadow: 0 5px 25px rgb(1 1 1 / 5%);
}
.slider .slide .info h2{
font-size: 2em;
font-weight: 800;
}
.slider .slide .info p{
font-size: 1em;
font-weight: 400;
}
.navigation{
height: 500px;
display: flex;
align-items: center;
justify-content: space-between;
opacity: 0;
transition: opacity 0.5s ease;
}
.slider:hover .navigation{
opacity: 1;
}
.prev-btn, .next-btn{
z-index: 999;
font-size: 2em;
color: #222;
background: rgba(255, 255, 255, 0.8);
padding: 10px;
cursor: pointer;
}
.prev-btn{
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.next-btn{
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.navigation-visibility{
z-index: 999;
display: flex;
justify-content: center;
}
.navigation-visibility .slide-icon{
z-index: 999;
background: rgba(255, 255, 255, 0.5);
width: 20px;
height: 10px;
transform: translateY(-50px);
margin: 0 6px;
border-radius: 2px;
box-shadow: 0 5px 25px rgb(1 1 1 / 20%);
}
.navigation-visibility .slide-icon.active{
background: #4285F4;
}
#media (max-width: 900px){
.slider{
width: 100%;
}
.slider .slide .info{
position: relative;
width: 80%;
margin-left: auto;
margin-right: auto;
}
}
#media (max-width: 500px){
.slider .slide .info h2{
font-size: 1.8em;
line-height: 40px;
}
.slider .slide .info p{
font-size: 0.9em;
}
}
/*.mySlides {
display: none;
}
/* Slideshow container
.slideshow-container {
width: 100%;
height: 100%;
max-height: 100vh;
margin: auto;
}
/* The dots/bullets/indicators
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* On smaller screens, decrease text size
#media only screen and (max-width: 300px) {
.prev,
.next,
.text {
font-size: 11px;
}
}
/* Next & previous buttons
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Överdäckningen | Startsida</title>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="script/js.js"></script>
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght#200;300;400&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Space+Mono&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
</head>
<!--
Göra så loggan försvinner när man scrollar ner och kommer tillbaka när man scrollar upp
navbar responsiv, desktop
mediaquery för ipad
bilder, text
göra så bildspelet passar in
anpassa alla bilder för skärmstorlek, picture element
(karta kanske?)
lägga rätt fonter på rubriker och text
-->
<body>
<main>
<div id="backdrop">
<div class="slider">
<div class="slide active">
<img src="imgs/1.jpg" alt="" />
<div class="info">
<h2>Winter Mountains</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="slide">
<img src="imgs/2.jpg" alt="" />
<div class="info">
<h2>Tropical Desert</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="slide">
<img src="imgs/3.jpg" alt="" />
<div class="info">
<h2>Steaming Volcanoes</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="slide">
<img src="imgs/4.jpg" alt="" />
<div class="info">
<h2>Mountain River</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="slide">
<img src="imgs/5.jpg" alt="" />
<div class="info">
<h2>Egypt Pyramids</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="navigation">
<i class="fas fa-chevron-left prev-btn"></i>
<i class="fas fa-chevron-right next-btn"></i>
</div>
<div class="navigation-visibility">
<div class="slide-icon active"></div>
<div class="slide-icon"></div>
<div class="slide-icon"></div>
<div class="slide-icon"></div>
<div class="slide-icon"></div>
</div>
</div>
<script type="text/javascript">
const slider = document.querySelector(".slider");
const nextBtn = document.querySelector(".next-btn");
const prevBtn = document.querySelector(".prev-btn");
const slides = document.querySelectorAll(".slide");
const slideIcons = document.querySelectorAll(".slide-icon");
const numberOfSlides = slides.length;
var slideNumber = 0;
//image slider next button
nextBtn.addEventListener("click", () => {
slides.forEach((slide) => {
slide.classList.remove("active");
});
slideIcons.forEach((slideIcon) => {
slideIcon.classList.remove("active");
});
slideNumber++;
if (slideNumber > numberOfSlides - 1) {
slideNumber = 0;
}
slides[slideNumber].classList.add("active");
slideIcons[slideNumber].classList.add("active");
});
//image slider previous button
prevBtn.addEventListener("click", () => {
slides.forEach((slide) => {
slide.classList.remove("active");
});
slideIcons.forEach((slideIcon) => {
slideIcon.classList.remove("active");
});
slideNumber--;
if (slideNumber < 0) {
slideNumber = numberOfSlides - 1;
}
slides[slideNumber].classList.add("active");
slideIcons[slideNumber].classList.add("active");
});
//image slider autoplay
var playSlider;
var repeater = () => {
playSlider = setInterval(function () {
slides.forEach((slide) => {
slide.classList.remove("active");
});
slideIcons.forEach((slideIcon) => {
slideIcon.classList.remove("active");
});
slideNumber++;
if (slideNumber > numberOfSlides - 1) {
slideNumber = 0;
}
slides[slideNumber].classList.add("active");
slideIcons[slideNumber].classList.add("active");
}, 4000);
};
repeater();
//stop the image slider autoplay on mouseover
slider.addEventListener("mouseover", () => {
clearInterval(playSlider);
});
//start the image slider autoplay again on mouseout
slider.addEventListener("mouseout", () => {
repeater();
});
</script>
<header id="wrapper">
<nav>
ÖVERDÄCKNINGEN
<div id="menu-toggle">
<input id="menu-checkbox" type="checkbox" />
<span class="hamburger-span"></span>
<span class="hamburger-span"></span>
<span class="hamburger-span"></span>
<ul id="menu">
<li><a class="menu-links" id="active" href="#">Länk 1</a></li>
<li><a class="menu-links" href="html/link2.html">Länk 2</a></li>
<li><a class="menu-links" href="html/link3.html">Länk 3</a></li>
<li><a class="menu-links" href="html/link4.html">Länk 4</a></li>
</ul>
</div>
</nav>
</header>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro amet
dolores nisi delectus ad inventore laboriosam alias, architecto eos
sunt quod eum maiores provident aspernatur debitis ratione minus
quaerat cumque veniam. Delectus commodi odit molestiae excepturi.
Doloremque rem tempora quod est veritatis earum accusamus vel fugiat
numquam reprehenderit ad labore repudiandae recusandae neque
voluptatum a nulla dignissimos sapiente ut, officiis fugit porro.
Aliquid unde incidunt quisquam. Veniam sunt doloremque modi in
voluptates inventore. In corrupti hic eos, incidunt iusto dignissimos
praesentium ut adipisci possimus officiis nesciunt, eveniet asperiores
illum laudantium aliquid dicta temporibus aut maxime dolor fugit totam
animi velit repudiandae ea? Esse, quod repudiandae amet iusto
temporibus aperiam dolore aliquid, magni sunt eveniet deleniti at
suscipit quasi adipisci, quo officia accusantium repellat nostrum
nemo! Reiciendis repellat omnis facilis qui excepturi assumenda id
laborum vero voluptas, vitae aspernatur eius magnam voluptates iusto,
dolores a fugit tenetur quo nostrum ipsa sequi cumque? Velit voluptate
et at aut iste obcaecati nisi, vitae repellat placeat quasi iusto.
Rerum vero eos earum nobis in inventore quos aliquid id, assumenda
tempora? Modi repudiandae dolorem architecto ut animi doloribus,
tempore possimus nihil ipsum accusamus fugiat laboriosam culpa iure
eum mollitia ab? Quidem quas minus necessitatibus voluptate, rem vero
eligendi possimus totam voluptates laudantium atque illo provident
quasi! Laboriosam quo odio quia in! Commodi voluptatem facilis eos
neque non, magni fugiat numquam consectetur, ipsa dolores ut rerum,
sint sequi quos illo obcaecati omnis harum laudantium error inventore
praesentium. Commodi fugit nostrum asperiores vel ducimus
reprehenderit quis suscipit laborum et fugiat libero eius assumenda
esse nobis, iste, impedit ipsa repudiandae aut aspernatur placeat
inventore! Eligendi sit in obcaecati quia repudiandae explicabo
officia eveniet omnis earum. Quibusdam alias amet quas nobis ullam
vitae enim quod facilis quam maiores! Rem consequatur distinctio
laudantium harum labore, minus qui molestiae suscipit modi libero quia
pariatur maxime hic, voluptate totam numquam, illo beatae voluptatibus
atque ipsa assumenda. Ipsum laudantium, modi nam repellat similique
vitae asperiores corrupti accusamus voluptate maxime harum expedita,
ipsa fugiat obcaecati deserunt porro impedit blanditiis error
reprehenderit temporibus ex at, molestias eius magnam? Voluptatem,
repellat ratione distinctio sit odio assumenda non ad fugit eligendi
nemo eveniet enim porro asperiores, aliquam aliquid? Officia
reiciendis libero tempore cupiditate rem laboriosam odit aspernatur!
Perferendis, id odit. Laudantium, culpa. Iure placeat deserunt
consectetur! Cumque, asperiores itaque nobis laudantium fuga fugit,
nemo autem maiores quo et perferendis laborum illum quis suscipit
eveniet ullam modi. Soluta cum eaque, sequi eveniet deserunt quia odio
officia tenetur vero corrupti labore eum voluptatum quam cumque fuga
hic numquam! Ullam, a dolore omnis nemo beatae at possimus eum
officiis molestiae exercitationem temporibus ab blanditiis voluptatum
reiciendis mollitia maxime perspiciatis harum nostrum officia deleniti
delectus. Hic quos molestias rerum ducimus fugiat consectetur facilis
perspiciatis animi, incidunt error ut tenetur similique unde molestiae
labore perferendis sapiente totam mollitia! Qui, similique ad eos,
cumque laudantium sapiente dolores quas omnis nam fuga exercitationem
blanditiis quaerat aut animi at beatae explicabo nihil adipisci.
Voluptatum qui repudiandae provident ratione, tenetur illum fuga quas
sapiente laborum ipsa obcaecati aut quod perspiciatis, ullam, veniam
explicabo nulla quaerat incidunt quidem! Est odit corrupti quibusdam
doloribus! Vel excepturi voluptatum, nobis voluptatem error
consectetur placeat quibusdam architecto! Molestiae ipsum suscipit est
aperiam veniam nobis laboriosam porro alias, sit eos repellendus
labore, ratione unde ducimus, accusantium illum voluptatum. Tempore,
rem repellat, laboriosam velit aut aliquid ipsa quibusdam consectetur
soluta veniam architecto totam! Reiciendis aliquid vel voluptatem
tempore ea, unde officiis. Corrupti perspiciatis voluptates, suscipit
vero voluptatibus corporis commodi excepturi reprehenderit eos et
nulla voluptatem fuga porro maxime quam eius distinctio, at id aliquid
itaque consequuntur ut repudiandae. Officiis, qui eveniet animi
officia voluptate ipsum, fuga, nisi doloribus in obcaecati quia error
eaque ad cupiditate aliquam alias modi placeat mollitia quibusdam
illum quas aliquid sint? Eligendi, nostrum maiores quas iste
recusandae quae natus impedit consequatur id ipsam dignissimos sequi
excepturi, nobis ducimus dolorum tenetur repellendus praesentium in
dicta atque velit voluptatum quia. Placeat culpa aliquid ab natus
quaerat non quasi cupiditate reprehenderit soluta, unde repellendus
illum, praesentium distinctio blanditiis quod magnam laborum excepturi
iusto molestiae accusamus dolorem nihil. Voluptatum, molestias
debitis? Ipsum veritatis iure suscipit, saepe alias aliquam enim,
officiis deleniti soluta ratione tempora maxime ab beatae autem
accusamus nemo sit, porro dolore illum esse hic. Repudiandae expedita
iste, inventore, officia, ut voluptatibus unde ullam sint debitis enim
ipsa dolorum ducimus quos. Suscipit tenetur ratione sed iure! Tempora
maxime, et neque natus dolores aliquam hic magni commodi quod a vel
delectus quisquam aperiam cupiditate eaque aspernatur tempore atque
tenetur modi? Exercitationem repellat hic officiis atque aperiam
repellendus et eos quisquam ratione, quidem enim quae sint facere
laudantium amet iure? Dolorum esse autem corrupti explicabo laborum
eum at distinctio dicta aut molestias sunt, totam ab eligendi
possimus. Ipsa, dolorem numquam sint doloribus reprehenderit
laboriosam aperiam alias, culpa recusandae minima assumenda tempore
placeat sunt nesciunt, dolores quidem repudiandae dolor. Ipsa illo, ex
repellat iusto ea fugit sapiente hic, adipisci nam, soluta numquam
error eum neque quos commodi quae a architecto voluptas perspiciatis?
Velit impedit libero ut sit minima exercitationem delectus nobis
quibusdam ab excepturi, soluta maxime ipsum, maiores laudantium iste?
Atque corrupti cupiditate non deserunt alias deleniti delectus numquam
repellendus soluta obcaecati fugit veniam, porro asperiores nesciunt
sed hic esse iusto ipsam provident est praesentium nam eveniet neque
at. Eaque aliquid ipsam vitae. Impedit quas est asperiores sunt
recusandae, iure beatae accusantium quidem quos iste sint sed
architecto eum perferendis dolorum tempora nihil odio error.
</p>
</div>
<footer id="footer">
<p id="footer-text">Lorem ipsum dolor sit amet consectetur.</p>
</footer>
</main>
</body>
</html>
Yeah, What #evolutionxbox said. If you have the JS included in the header, or any place above where you have defined nextBtn in the HTML or any of the other elements you plan on using, then those elements are going to be null when the script executes.
You should make sure you script runs after the document is loaded by putting the above into a function and running it by attaching said function to the window onload event.
The JS include should look something like the following
function yourScript(){
/* Your script goes here */
}
window.addEventListener("load",yourScript);
You can also use
window.addEventListener("DOMContentLoaded",yourscript);
If you want to run the script after the DOM has been parsed, but before the images and other third party content has been loaded. This is probably fine for your script.
I was recently learning the intersection observer API to make some scroll animations and had a couple of issues.
transform:translate property didn't work properly. I was trying to achieve a left to center slide while i scroll to that div, but that didn't happen. However if I apply transform:scale property or even opacity they work well.
If I bypass a section with 'on scroll opacity transition' too quickly its behavior changes 180. I mean that if by default if I have set the opacity to increase from 0 to 1 on up to down scroll and I do this once and then scroll up fast the animations don't happen and as a result if I again scroll down things start to disappear(opacity:0) instead of appear(opacity:1), opposite to what I have set.
*** I have tried brave and chrome to see if it may work but no positivity****
code>>>>>>>>
Uploaded on codepen>>>link>>> https://codepen.io/Muneebthelearner/pen/PoRRgOE
// CARD ANIMATION ************
const card1 = document.querySelector(".firstcard");
const options = {
root: null,
threshold: 0.25
};
let observer = new IntersectionObserver(callback, options);
function callback(entries, observer) {
entries.forEach((entry) => {
if (!entry.intersectionRatio) {
return;
} else {
entry.target.classList.toggle("after");
}
console.log(entry.target);
});
}
observer.observe(card1);
// IMAGE ANIMATION ***********************
const building = document.querySelector(".building");
let imageobserver = new IntersectionObserver(imagecallback, options);
function imagecallback(entries, imageobserver) {
entries.forEach((entry) => {
if (!entry.intersectionRatio) {
return;
} else {
entry.target.classList.toggle("show");
}
console.log(entry.target);
});
}
imageobserver.observe(building);
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#500&family=Roboto:wght#300;400&display=swap");
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f5e8c7;
padding: 0.5rem 1rem;
}
.logo {
max-width: 50px;
}
ul {
display: flex;
justify-content: space-between;
list-style: none;
}
ul > * {
padding: 0.5rem 1rem;
}
a {
text-decoration: none;
font-size: 1.1rem;
font-family: "Roboto", sans-serif;
color: black;
font-weight: 300;
}
/* wolf-section */
.main {
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7)),
url("https://i.postimg.cc/d1McYFh7/wolves-2864647-1920.jpg");
color: white;
max-width: 100%;
min-height: 100vh;
background-position: center bottom;
background-size: cover;
display: grid;
place-items: center;
text-align: center;
}
.main-text {
max-width: 600px;
}
.heading {
font-size: 3rem;
font-family: "Montserrat", sans-serif;
line-height: 60px;
}
.about {
font-family: "Roboto", sans-serif;
font-weight: 300;
line-height: 20px;
}
.one {
padding: 0.5rem 1.5rem;
margin: 1rem 0rem;
}
/* Cards section */
.cards {
padding: 2rem 1rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.firstcard,
.secondcard,
.thirdcard {
width: clamp(200px, 250px, 100%);
background-color: rgba(0, 0, 0, 0.7);
padding: 0rem;
margin:1rem 0rem;
text-align: center;
}
.firstcard {
/*transform: translateX(-150%);
position: relative;
left: -500px; */
/* transform: scale(1.2); */
opacity: 0;
}
.firstcard.after {
/* transform: translateX(0%);
transform: scale(1); */
/* left: 0px; */
opacity: 1;
transition: all 1s ease-in;
}
.title {
text-align: center;
font-size: 1.2rem;
font-family: "Roboto", sans-serif;
font-weight: 400;
padding: 0.5rem 0rem;
color: black;
background-color: #afb4ff;
}
.about_animal {
text-align: justify;
padding: 0.5rem;
font-family: "Roboto", sans-serif;
font-weight: 300;
color: white;
}
.donate {
padding: 0.5rem 1.5rem;
margin: 1rem 0rem 0.5rem;
}
/* TOO text section; */
.too_text {
padding: 1rem;
font-family: "Roboto", sans-serif;
font-weight: 300;
}
.theory {
font-size: 2rem;
font-family: "Montserrat", sans-serif;
text-align: center;
padding: 1rem 0rem;
}
.building {
max-width: 100%;
opacity: 0;
transition: all 1.5s ease;
transform: scale(1.1);
}
.building.show
{
opacity: 1;
transform: scale(1);
}
<header>
<nav>
<div class="logo_div">
<img src="https://i.postimg.cc/BbspTYV7/logo.png" alt="" class="logo">
</div>
<ul>
<li>Home</li>
<li>Contact</li>
<li>About</li>
<li>Login</li>
</ul>
</nav>
</header>
<section class="main">
<div class="main-text">
<h1 class="heading">
WildLife is Looking for your love
</h1>
<p class="about">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi sit beatae quidem, nemo quae excepturi nesciunt alias facilis deserunt nostrum!</p>
<button class="one">Login</button>
<button class="one">Donate</button>
</div>
</section>
<section class="cards">
<div class="firstcard">
<h3 class="title">Animal X</h3>
<p class="about_animal">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et molestias iure fugiat quisquam vero voluptates qui corporis quod itaque porro?
</p>
<button class="donate">Donate</button>
</div>
<div class="secondcard">
<h3 class="title">Animal Y</h3>
<p class="about_animal">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et molestias iure fugiat quisquam vero voluptates qui corporis quod itaque porro?
</p>
<button class="donate">Donate</button>
</div>
<div class="thirdcard">
<h3 class="title">Animal Z</h3>
<p class="about_animal">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et molestias iure fugiat quisquam vero voluptates qui corporis quod itaque porro?
</p>
<button class="donate">Donate</button>
</div>
</section>
<section class="too_text">
<div class="Ltext">
<h3 class="theory">About Us</h3>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus ullam quod dignissimos mollitia voluptates consectetur provident, enim quas sed. Labore aut, sequi commodi ex delectus expedita aperiam consequuntur maiores, eos adipisci quod similique suscipit rem illum quisquam ratione hic facilis dolorum minima pariatur? Sit, commodi quo consequuntur excepturi nesciunt perferendis deleniti nobis accusantium cupiditate, rerum architecto similique asperiores perspiciatis? Quo mollitia fugit esse ducimus est nisi enim exercitationem modi! Libero dolorum illo est, provident accusantium aut harum doloremque numquam, perspiciatis vitae, vel quaerat error dolor eveniet dicta dolores ex nobis suscipit impedit eligendi quis ut delectus! Quam maxime laudantium illo sequi sint soluta recusandae consequatur nam blanditiis eum ipsa tenetur vel iure aliquam, quae optio nemo ab aut! Recusandae consectetur id soluta eum temporibus aliquam neque, doloremque voluptatem consequatur assumenda quae eos facere dolorem necessitatibus nobis repudiandae beatae repellat minima similique voluptates, itaque expedita! Corporis at dolor cum eius tempora excepturi fugit, reiciendis aut debitis saepe eaque! Voluptatum, asperiores unde eveniet officiis officia ullam nam quasi debitis explicabo consequatur adipisci tenetur corrupti itaque possimus sequi dicta dolorum hic voluptate perspiciatis, repellat vel excepturi pariatur recusandae quis! Labore, incidunt, iusto accusantium sint dolore cupiditate voluptatem at consequuntur iure quasi obcaecati neque.</p>
<img src="https://i.postimg.cc/sg53gKhH/image.jpg" alt="" class="building">
</div>
</section>
<section class="dummy_text">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam totam ab, dolor doloribus facilis possimus quas veniam quidem. A quam quis eligendi dicta eaque dignissimos placeat molestiae nisi eum sint nostrum facere, deserunt provident illum, modi praesentium nulla similique. Voluptates vel nisi, et mollitia delectus obcaecati omnis modi unde? Quaerat maiores labore tempora quod voluptate! Optio, perspiciatis voluptatum dolores non atque corporis consequatur consectetur mollitia sapiente animi, rem rerum. Similique eaque neque quam debitis a autem? Atque illum autem quibusdam excepturi officiis adipisci debitis repellat quos inventore magni minima, obcaecati iure dignissimos, sed placeat
Optio, perspiciatis voluptatum dolores non atque corporis consequatur consectetur mollitia sapiente animi, rem rerum. Similique eaque neque quam debitis a autem? Atque illum autem quibusdam excepturi officiis adipisci debitis repellat quos inventore magni minima, obcaecati iure dignissimos, sed placeat</p>
</section>
Concerned classes:
1.firstcard
2.building
I have this test page.
I added some JS to make the nav bar hide and show based on scrolling up or down, and that's fine, everything is working, except:
When I scroll down, so the navbar APPEARS, it has transition: all 3s; (I set it to 3 seconds so it's obvious), but when I scroll down, so the the navbar DISAPPEARS, the transition time doesn't apply.
NOTE: I noticed that the more transition time I give to the navbar when I scroll down, the more transition time will have when I scroll up, but only in proportion:
EXAMPLE: If I give the navbar transition: all 3s; when it disappears will have something like .5 seconds of transition, if I give it transition: all 6s; when it disappears will have something like 1 second of transition. So if I want to set a reasonable transition time like transtion: 1s; or transition: .5s;, when I scroll up the navbar's transition will appear to be instantaneously.
What can I do?
let toggleButton = document.getElementById('burger')
let navBarLinks = document.getElementById('nav1')
toggleButton.addEventListener('click', () => {
navBarLinks.classList.toggle('active')
})
const nav = document.querySelector('header');
let prevScrollpos = window.pageYOffset;
window.addEventListener('scroll', () => {
let currentScrollpos = window.pageYOffset;
if (prevScrollpos < currentScrollpos) {
nav.classList.add('hide');
}
else {
nav.classList.remove('hide');
}
prevScrollpos = currentScrollpos;
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
}
:root {
font-size: 15px;
}
/* ↓ ↓ ↓ */
header {
overflow-x: hidden;
transition: all 3s;
transform: translateY(0%);
position: fixed;
z-index: 5;
}
.thing {
position: relative;
top: 64px;
}
header.hide {
transform: translateY(-100%);
}
/* ↑ ↑ ↑ */
.logoandburger {
display: flex;
width: 100vw;
justify-content: space-between;
align-items: center;
background: linear-gradient(45deg,lightpink,powderblue);
padding: 1em 1.5em;
position: relative;
z-index: 2;
}
.burger {
position: absolute;
left: 85%;
}
.bubbles {
position: relative;
top: -8px;
left: -20px;
display: none;
}
#keyframes bubbly {
from {
transform: scale(.5);
opacity: 0;
}
to {
transform: scale(1.9);
opacity: 1;
}
}
.burger:active ~ .bubbles {
display: block;
animation: bubbly .2s linear;
}
.nav1 {
background: linear-gradient(45deg,powderblue,lightpink);
text-align: center;
transform: translatex(100%) translateY(-110%);
transition: .5s;
}
.nav1.active {
transform: translatex(0%) translatey(0%);
}
ul {
line-height: 2.5em;
padding: 1em 0;
}
a {
color: black;
font-family: verdana;
font-size: 1.2rem;
}
<header id="nav2">
<div class="logoandburger">
<h1 class="logo">Logo</h1>
<img src="menu.svg" class="burger" id="burger" width="35px;" alt="menu icon">
<img src="bubble.svg" class="bubbles" width="30px" alt="">
</div>
<nav class="nav1" id="nav1">
<ul class="nav">
<li>Home</li>
<li>Products</li>
<li>About Us</li>
<li>Contacts</li>
</ul>
</nav>
</header>
<h1 class="thing">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas o illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas o illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas o illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus volupt</h1>
<script src="main.js">
</script>
It looks to me like your header is traveling 100% of the body height to get to it's position, which is why it's taking so long. Try setting transform: translateY(); to a set pixel value to check the difference. Or check the header height programmatically and specify the distance that way.
Example:
header {
overflow-x: hidden;
transition: all 1s;
transform: translateY(-200px);
position: fixed;
z-index: 5;
}
Run example below:
let toggleButton = document.getElementById('burger')
let navBarLinks = document.getElementById('nav1')
toggleButton.addEventListener('click', () => {
navBarLinks.classList.toggle('active')
})
const nav = document.querySelector('header');
let prevScrollpos = window.pageYOffset;
window.addEventListener('scroll', () => {
let currentScrollpos = window.pageYOffset;
if (prevScrollpos < currentScrollpos) {
nav.classList.add('hide');
}
else {
nav.classList.remove('hide');
}
prevScrollpos = currentScrollpos;
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
}
:root {
font-size: 15px;
}
/* ↓ ↓ ↓ */
header {
overflow-x: hidden;
transition: all 1s;
transform: translateY(0%);
position: fixed;
z-index: 5;
}
.thing {
position: relative;
top: 64px;
}
header.hide {
transform: translateY(-100px);
}
/* ↑ ↑ ↑ */
.logoandburger {
display: flex;
width: 100vw;
justify-content: space-between;
align-items: center;
background: linear-gradient(45deg,lightpink,powderblue);
padding: 1em 1.5em;
position: relative;
z-index: 2;
}
.burger {
position: absolute;
left: 85%;
}
.bubbles {
position: relative;
top: -8px;
left: -20px;
display: none;
}
#keyframes bubbly {
from {
transform: scale(.5);
opacity: 0;
}
to {
transform: scale(1.9);
opacity: 1;
}
}
.burger:active ~ .bubbles {
display: block;
animation: bubbly .2s linear;
}
.nav1 {
background: linear-gradient(45deg,powderblue,lightpink);
text-align: center;
transform: translatex(100%) translateY(-110px);
transition: .5s;
}
.nav1.active {
transform: translatex(0%) translatey(0%);
}
ul {
line-height: 2.5em;
padding: 1em 0;
}
a {
color: black;
font-family: verdana;
font-size: 1.2rem;
}
<header id="nav2">
<div class="logoandburger">
<h1 class="logo">Logo</h1>
<img src="menu.svg" class="burger" id="burger" width="35px;" alt="menu icon">
<img src="bubble.svg" class="bubbles" width="30px" alt="">
</div>
<nav class="nav1" id="nav1">
<ul class="nav">
<li>Home</li>
<li>Products</li>
<li>About Us</li>
<li>Contacts</li>
</ul>
</nav>
</header>
<h1 class="thing">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas o illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas o illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas o illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus volupt</h1>
<script src="main.js">
</script>
When left undeclared, transition-timing-function defaults to the value ease-out.
In one of your transitions, you are seeing the end of the animated transition and in the other transition, you are seeing the beginning. Evidently these are not similar, because ease-out is not a symmetrical timing-function.
To counter-act this, we can explicitly declare the transition-timing-function as linear, like this:
transition: all 0.6s linear;
Further Reading:
https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function
Working Example:
let toggleButton = document.getElementById('burger')
let navBarLinks = document.getElementById('nav1')
toggleButton.addEventListener('click', () => {
navBarLinks.classList.toggle('active')
})
const nav = document.querySelector('header');
let prevScrollpos = window.pageYOffset;
window.addEventListener('scroll', () => {
let currentScrollpos = window.pageYOffset;
if (prevScrollpos < currentScrollpos) {
nav.classList.add('hide');
}
else {
nav.classList.remove('hide');
}
prevScrollpos = currentScrollpos;
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
}
:root {
font-size: 15px;
}
/* ↓ ↓ ↓ */
header {
overflow-x: hidden;
transition: all 0.6s linear;
transform: translateY(0);
position: fixed;
z-index: 5;
}
.thing {
position: relative;
top: 64px;
}
header.hide {
transform: translateY(-75px);
}
/* ↑ ↑ ↑ */
.logoandburger {
display: flex;
width: 100vw;
justify-content: space-between;
align-items: center;
background: linear-gradient(45deg,lightpink,powderblue);
padding: 1em 1.5em;
position: relative;
z-index: 2;
}
.burger {
position: absolute;
left: 85%;
}
.bubbles {
position: relative;
top: -8px;
left: -20px;
display: none;
}
#keyframes bubbly {
from {
transform: scale(.5);
opacity: 0;
}
to {
transform: scale(1.9);
opacity: 1;
}
}
.burger:active ~ .bubbles {
display: block;
animation: bubbly .2s linear;
}
.nav1 {
background: linear-gradient(45deg,powderblue,lightpink);
text-align: center;
transform: translatex(100%) translateY(-110%);
transition: .5s;
}
.nav1.active {
transform: translatex(0%) translatey(0%);
}
ul {
line-height: 2.5em;
padding: 1em 0;
}
a {
color: black;
font-family: verdana;
font-size: 1.2rem;
}
<header id="nav2">
<div class="logoandburger">
<h1 class="logo">Logo</h1>
<img src="menu.svg" class="burger" id="burger" width="35px;" alt="menu icon">
<img src="bubble.svg" class="bubbles" width="30px" alt="">
</div>
<nav class="nav1" id="nav1">
<ul class="nav">
<li>Home</li>
<li>Products</li>
<li>About Us</li>
<li>Contacts</li>
</ul>
</nav>
</header>
<h1 class="thing">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas o illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas o illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas o illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus volupt</h1>
<script src="main.js">
</script>