Created
July 25, 2019 13:03
-
-
Save prof3ssorSt3v3/c567586a9a36da47df0e27a1d26334cc to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> | |
<title>Intersection Observer</title> | |
<style> | |
.container { | |
margin: 150px; | |
} | |
.container p { | |
color: #777; | |
font-size: 1.6rem; | |
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, | |
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; | |
line-height: 1.6; | |
padding: 1rem; | |
border: 1px solid #eee; | |
margin: 1rem 0; | |
transform: translateX(-100%); | |
transition: transform 0.5s linear; | |
/* opacity: 0; */ | |
} | |
.container p.active { | |
opacity: 1; | |
transform: translateX(0); | |
} | |
.container p:nth-child(5n) { | |
color: cornflowerblue; | |
} | |
.cover { | |
position: fixed; | |
top: 250px; | |
right: 50px; | |
bottom: 250px; | |
left: 50px; | |
background-color: hsla(30deg, 40%, 80%, 0.5); | |
} | |
</style> | |
</head> | |
<body> | |
<!-- container div has 30 paragraphs with lorem ipsum text --> | |
<div class="container"> | |
<p> | |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus | |
maxime placeat quos ducimus vero maiores quisquam nisi dolorem soluta | |
ab! Similique ab praesentium ipsam, quos ea voluptatum placeat | |
reprehenderit nam! | |
</p> | |
<p> | |
Quam suscipit fugit possimus culpa delectus nisi iste, dignissimos | |
accusantium odio consequuntur est corrupti voluptate dolor repudiandae | |
autem, nulla corporis. Qui nisi sit enim rerum a ipsum dolorum | |
exercitationem corrupti. | |
</p> | |
<p> | |
Temporibus cupiditate voluptas fugit tenetur reprehenderit doloribus | |
laudantium distinctio dolore, maxime quos praesentium nostrum quaerat | |
architecto molestiae, nesciunt voluptatem deleniti veniam minus. | |
Laborum, sapiente reprehenderit? Distinctio aliquam aliquid quo | |
veritatis. | |
</p> | |
<p> | |
Nostrum officia accusantium aliquid distinctio amet sit. Magni enim | |
dicta fuga, qui alias debitis vel, cupiditate aperiam cum, ut | |
blanditiis. Et cumque quidem eius minima optio molestias perferendis | |
amet omnis? | |
</p> | |
<p> | |
Ex fugiat maiores impedit enim facilis, magnam pariatur, aliquid ut id | |
sequi laudantium mollitia tenetur nemo rem ratione ea in quo quidem, | |
voluptatibus aliquam quia dolorum voluptatum debitis. Minima, veniam. | |
</p> | |
<p> | |
Cumque molestiae quas illum incidunt ipsa sequi cupiditate rem sapiente | |
nulla exercitationem corporis porro itaque temporibus in aperiam | |
consequatur eum voluptas officia, velit voluptatum! Pariatur aperiam | |
omnis dolores quaerat assumenda! | |
</p> | |
<p> | |
Odio vel at corporis sint necessitatibus inventore earum, expedita | |
obcaecati asperiores est repellat, ipsum deleniti ad commodi assumenda | |
error quisquam dignissimos cupiditate distinctio quidem corrupti | |
repellendus delectus. Tempore, placeat aperiam. | |
</p> | |
<p> | |
Adipisci sapiente a excepturi, expedita veritatis autem sed animi rem | |
quod voluptas possimus ea eos accusantium cum maiores! Harum dolores | |
nihil magnam delectus saepe, sed reiciendis in praesentium expedita | |
perferendis. | |
</p> | |
<p> | |
Mollitia magni sint necessitatibus, ratione sequi repellendus itaque | |
eaque provident temporibus velit corrupti, consectetur saepe laudantium | |
sed odit culpa exercitationem eum. Dolores quis sunt iusto a cum quas | |
tempore perferendis. | |
</p> | |
<p> | |
Quidem aspernatur non esse reprehenderit expedita porro mollitia ex | |
soluta enim inventore corporis voluptatem provident eius excepturi | |
tempora natus animi, sint, cumque sequi, officia voluptatum? At nisi | |
incidunt sint illo. | |
</p> | |
<p> | |
Fugiat dignissimos rem odit pariatur vero nam unde iste incidunt ullam | |
esse perspiciatis alias officia animi officiis, possimus laudantium | |
voluptates saepe, nisi quia dolore? Consequuntur corrupti numquam odio | |
praesentium assumenda. | |
</p> | |
<p> | |
Corporis, in iste natus, ipsa necessitatibus cupiditate pariatur | |
accusantium nihil cum architecto neque dolore velit qui ratione hic | |
culpa dignissimos! Similique, saepe ullam! Eum alias quasi omnis fugit | |
iste voluptatum. | |
</p> | |
<p> | |
Similique voluptas eaque voluptatem velit molestias atque iusto nulla. | |
Delectus facilis fugiat eligendi rerum. Quod quo quisquam, ipsum impedit | |
nobis nemo eos illum possimus quidem consequatur facilis quis! Expedita, | |
corporis. | |
</p> | |
<p> | |
Autem quo itaque temporibus iste magni libero aut nisi, excepturi eos, | |
et ea omnis, numquam nobis dolore inventore accusamus cumque aliquam | |
saepe sint nemo repudiandae. Est modi soluta dignissimos fuga? | |
</p> | |
<p> | |
Dolores architecto, corrupti similique aliquid eum repudiandae eaque ut, | |
earum nostrum possimus voluptatem cupiditate reiciendis hic animi | |
impedit, ab autem inventore quod ex quasi? Obcaecati quisquam | |
perferendis tempora pariatur ex? | |
</p> | |
<p> | |
Ipsa dolorem fuga quod labore quam iusto odio quae debitis, dignissimos | |
amet assumenda voluptate saepe excepturi repellendus pariatur adipisci | |
omnis temporibus tempore voluptatum aut. Quae ipsam laudantium maxime | |
odit laboriosam. | |
</p> | |
<p> | |
Adipisci placeat accusantium voluptas voluptates officiis nobis iure | |
aliquam ut veniam ex corporis iusto aperiam inventore itaque | |
voluptatibus omnis repudiandae magni sequi, molestiae illo iste fugit | |
mollitia laudantium dignissimos! Dolorem. | |
</p> | |
<p> | |
Debitis perferendis reiciendis esse velit repellendus fugiat voluptates | |
harum ipsa aliquid quisquam illo corrupti aut, error molestiae iusto id | |
consequuntur soluta nam quibusdam fuga ut molestias perspiciatis | |
deserunt. Voluptatum, debitis! | |
</p> | |
<p> | |
Dicta voluptatem repudiandae modi expedita beatae ad perspiciatis hic | |
deleniti explicabo fugit tempore praesentium quo sit quibusdam ipsam, | |
velit eos debitis nobis dolore maxime iste neque repellat incidunt. | |
Aspernatur, voluptate. | |
</p> | |
<p> | |
Pariatur maiores quos libero veritatis aut blanditiis, mollitia at nobis | |
illum odit eius amet voluptatibus debitis quas tenetur laudantium dolor | |
inventore atque vel porro in facilis similique molestiae! Soluta, | |
impedit. | |
</p> | |
<p> | |
Rerum, harum beatae sequi distinctio voluptatem quos et veniam laborum | |
itaque dolores accusantium porro perspiciatis magni eveniet aliquid a | |
libero maiores. Dolorum nostrum quasi, beatae similique ratione quisquam | |
quos dolore? | |
</p> | |
<p> | |
Numquam explicabo quo reprehenderit fugit aut veritatis, suscipit | |
cumque, incidunt, enim odit nihil consectetur facere natus voluptatum | |
dolores eaque officia cum aspernatur ea beatae modi. Ratione nihil | |
repudiandae voluptatibus dolor. | |
</p> | |
<p> | |
Est consequatur recusandae, deserunt voluptatibus veritatis id accusamus | |
magni, doloribus possimus eaque rem sint. Quae ea voluptates voluptatem | |
cumque sint nobis. Perspiciatis dignissimos iste qui dolores placeat | |
praesentium blanditiis aperiam. | |
</p> | |
<p> | |
Incidunt, in nisi dicta amet quam culpa, maiores ullam autem esse | |
tempore consectetur nam illum quos debitis magni obcaecati, cupiditate | |
vitae. Quae illo nemo aspernatur voluptatibus asperiores. Omnis, placeat | |
voluptatibus. | |
</p> | |
<p> | |
Odit rem ullam optio aliquam earum, illum cum dolor quos voluptate | |
libero impedit commodi iure repellat obcaecati minus dolore cupiditate | |
excepturi ad pariatur repellendus laborum omnis nemo! Quae, | |
necessitatibus harum. | |
</p> | |
<p> | |
Assumenda quam vero culpa nobis consectetur enim dolores quae autem | |
aliquid eum dicta quia nisi sunt quod velit recusandae aperiam sint, | |
debitis facilis nemo architecto reiciendis at. Reprehenderit, modi | |
nobis. | |
</p> | |
<p> | |
Dolorum atque obcaecati dolor earum adipisci ab exercitationem. Enim | |
esse quaerat deserunt itaque, animi, ipsa rerum incidunt obcaecati iusto | |
consequuntur debitis similique, non facere repellat soluta. Inventore | |
repellendus in magnam. | |
</p> | |
<p> | |
Facilis suscipit dolor aliquam commodi consequatur laborum eius deserunt | |
perferendis, quod rem ducimus maxime similique voluptas. Doloremque | |
eaque ducimus vitae neque necessitatibus, pariatur cum obcaecati, minima | |
reprehenderit repellat aliquam enim! | |
</p> | |
<p> | |
Iure sunt deserunt placeat iusto asperiores harum fuga libero laborum | |
tempora! Veniam distinctio eveniet natus dignissimos, incidunt quia quos | |
iste non deleniti iure. Excepturi, totam minus! Eos quae perspiciatis | |
nulla! | |
</p> | |
<p> | |
Illo similique asperiores voluptate distinctio reiciendis dolorem quis | |
ad nisi suscipit modi temporibus reprehenderit omnis totam ipsa corporis | |
eaque aliquam earum dolorum, minima voluptates blanditiis. Sit assumenda | |
cumque quae facere. | |
</p> | |
</div> | |
<div class="cover"> </div> | |
<script> | |
document.addEventListener("DOMContentLoaded", () => { | |
let options = { | |
root: null, | |
rootMargin: "-250px -50px", | |
threshold: 0.05 | |
}; | |
let observer = new IntersectionObserver(beTouching, options); | |
document.querySelectorAll(".container p").forEach(p => { | |
observer.observe(p); | |
//console.log("watching", p.textContent); | |
}); | |
}); | |
function beTouching(entries, ob) { | |
//entries all 30 paragraphs | |
entries.forEach(entry => { | |
if (entry.isIntersecting) { | |
console.log("intersecting"); | |
//console.log(entry.target); | |
//console.log(entry.time, entry.intersectionRatio); | |
entry.target.classList.add("active"); | |
//ob.unobserve(entry.target); | |
} else { | |
entry.target.classList.remove("active"); | |
} | |
}); | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Closing bracket missing. Otherwise everything else is okay.
document.addEventListener("DOMContentLoaded", () => { ..... })