I wrote a code using JavaScript that the user can display the desired text by clicking on the icon and hide the text by clicking again.
The text is displayed with a nice animation, but when the text is being hidden, the second animation doesn't play.
Is there a way to hide the text along with the animation?
In summary:
I want the .animation_out class to be added to the .box_excerpt class to run a second animation when the text is being hidden.
Total codes:
document.querySelectorAll('.box_icon').forEach(eye => {
eye.addEventListener("click", function() {
let excerpt = this.parentNode.querySelector(".box_excerpt");
if (this.classList.contains("bi-play-circle-fill")) {
this.classList = "bi bi-power box_icon";
excerpt.style.display = "block";
$(this).closest('.box_excerpt').toggleClass('animation_out');
} else {
this.classList = "bi bi-play-circle-fill box_icon";
excerpt.style.display = "none"
$(this).closest('.box_excerpt').toggleClass('animation_out');
}
});
});
.box_main {
display: flex;
justify-content: space-around;
}
.box_mini {
position: relative;
overflow: hidden;
width: 400px;
height: 500px;
background: #c992e8;
box-shadow: 0 0 4px #000;
transition: all 0.5s ease;
}
.box_icon {
font-size: 80px;
color: #4b80c4;
position: absolute;
top: 5%;
left: 38%;
z-index: 3;
}
.box_excerpt {
position: absolute;
top: -25px;
left: 0;
right: 0;
bottom: -40px;
z-index: 2;
font-size: 20px;
line-height: 36px;
padding: 117px 25px 10px;
color: #01831b;
text-align: justify;
background: #9effcd;
overflow: hidden;
display: none;
animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
-webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
#-webkit-keyframes scale-in-center {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
#keyframes scale-in-center {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
.animation_out {
animation: scale-out-center 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
-webkit-animation: scale-out-center 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
#-webkit-keyframes scale-out-center {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 1;
}
}
#keyframes scale-out-center {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 1;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="box_main">
<div class="box_mini">
<i class="bi bi-play-circle-fill box_icon"></i>
<p class="box_excerpt">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus nam alias velit nihil dolorum
corporis hic quibusdam exercitationem reiciendis nostrum. Dolor nam aliquam veritatis modi sequi
mollitia quam quod, distinctio quidem, nisi soluta natus praesentium odio assumenda sunt tempora a culpa
pariatur labore ea quaerat porro quae dolore! Modi rerum accusantium accusamus ipsam eos sequi at ullam,
laboriosam nemo quis omnis odit dicta voluptatem officiis? Vitae optio quos nihil molestias dicta at
praesentium error incidunt ratione qui. Accusantium beatae ex eaque saepe cupiditate hic tenetur. Totam
earum consequuntur atque sunt tempore possimus saepe odit. Nam, voluptatum. Quo esse possimus ipsa.
</p>
</div>
<div class="box_mini">
<i class="bi bi-play-circle-fill box_icon"></i>
<p class="box_excerpt">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus nam alias velit nihil dolorum
corporis hic quibusdam exercitationem reiciendis nostrum. Dolor nam aliquam veritatis modi sequi
mollitia quam quod, distinctio quidem, nisi soluta natus praesentium odio assumenda sunt tempora a culpa
pariatur labore ea quaerat porro quae dolore! Modi rerum accusantium accusamus ipsam eos sequi at ullam,
laboriosam nemo quis omnis odit dicta voluptatem officiis? Vitae optio quos nihil molestias dicta at
praesentium error incidunt ratione qui. Accusantium beatae ex eaque saepe cupiditate hic tenetur. Totam
earum consequuntur atque sunt tempore possimus saepe odit. Nam, voluptatum. Quo esse possimus ipsa.
</p>
</div>
</section>
you can't use $(this).closest('.box_excerpt') as box_excerpt element is not a parent of box_icon an idea can be to use $(this).parent().find('.box_excerpt')
document.querySelectorAll('.box_icon').forEach(eye => {
eye.addEventListener("click", function() {
let excerpt = this.parentNode.querySelector(".box_excerpt");
if (this.classList.contains("bi-play-circle-fill")) {
this.classList = "bi bi-power box_icon";
excerpt.style.display = "block";
if ($(this).data( 'notFirst')) {
$(this).parent().find('.box_excerpt').toggleClass('animation_out');
} else {
!$(this).data( 'notFirst', true);
}
} else {
this.classList = "bi bi-play-circle-fill box_icon";
$(this).parent().find('.box_excerpt').toggleClass('animation_out')
}
});
});
.box_main {
display: flex;
justify-content: space-around;
}
.box_mini {
position: relative;
overflow: hidden;
width: 400px;
height: 500px;
background: #c992e8;
box-shadow: 0 0 4px #000;
transition: all 0.5s ease;
}
.box_icon {
font-size: 80px;
color: #4b80c4;
position: absolute;
top: 5%;
left: 38%;
z-index: 3;
}
.box_excerpt {
position: absolute;
top: -25px;
left: 0;
right: 0;
bottom: -40px;
z-index: 2;
font-size: 20px;
line-height: 36px;
padding: 117px 25px 10px;
color: #01831b;
text-align: justify;
background: #9effcd;
overflow: hidden;
display: none;
animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
-webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
#-webkit-keyframes scale-in-center {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
#keyframes scale-in-center {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
.animation_out {
animation: scale-out-center 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
-webkit-animation: scale-out-center 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
#-webkit-keyframes scale-out-center {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 1;
}
}
#keyframes scale-out-center {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 1;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="box_main">
<div class="box_mini">
<i class="bi bi-play-circle-fill box_icon"></i>
<p class="box_excerpt">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus nam alias velit nihil dolorum corporis hic quibusdam exercitationem reiciendis nostrum. Dolor nam aliquam veritatis modi sequi mollitia quam quod, distinctio quidem, nisi soluta natus
praesentium odio assumenda sunt tempora a culpa pariatur labore ea quaerat porro quae dolore! Modi rerum accusantium accusamus ipsam eos sequi at ullam, laboriosam nemo quis omnis odit dicta voluptatem officiis? Vitae optio quos nihil molestias
dicta at praesentium error incidunt ratione qui. Accusantium beatae ex eaque saepe cupiditate hic tenetur. Totam earum consequuntur atque sunt tempore possimus saepe odit. Nam, voluptatum. Quo esse possimus ipsa.
</p>
</div>
<div class="box_mini">
<i class="bi bi-play-circle-fill box_icon"></i>
<p class="box_excerpt">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus nam alias velit nihil dolorum corporis hic quibusdam exercitationem reiciendis nostrum. Dolor nam aliquam veritatis modi sequi mollitia quam quod, distinctio quidem, nisi soluta natus
praesentium odio assumenda sunt tempora a culpa pariatur labore ea quaerat porro quae dolore! Modi rerum accusantium accusamus ipsam eos sequi at ullam, laboriosam nemo quis omnis odit dicta voluptatem officiis? Vitae optio quos nihil molestias
dicta at praesentium error incidunt ratione qui. Accusantium beatae ex eaque saepe cupiditate hic tenetur. Totam earum consequuntur atque sunt tempore possimus saepe odit. Nam, voluptatum. Quo esse possimus ipsa.
</p>
</div>
</section>
You can make the 'p' tag wrap with other div and apply the css on it (or) simply add color: #9effcd; to .box_excerpt
Like,
.box_excerpt {
position: absolute;
top: -25px;
left: 0;
right: 0;
bottom: -40px;
z-index: 2;
font-size: 20px;
line-height: 36px;
padding: 117px 25px 10px;
color: #01831b;
text-align: justify;
background: #9effcd;
overflow: hidden;
display: none;
animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
-webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
color: #9effcd;
}
Related
html,body{
height: 100%;
}
body{
margin: 0;
background-color: #0f0f0f;
color: white;
font-family: 'Ubuntu', sans-serif;
display: grid;
grid-template-columns: 1fr 8fr;
}
header{
height: 5vh;
grid-column: 1/3;
grid-row:1/2 ;
background-color: black;
z-index: 2;
display: block;
}
section{
position: relative;
display: flex;
flex-direction: column;
min-height: 300px;
}
.TopContent{
height: 70vh;
grid-column: 1/3;
grid-row:2/3 ;
background-color: white;
z-index: 1;
}
.Content{
grid-column: 1/3;
}
.TopNavigation{
display: flex;
flex-direction: column;
}
.TopNavBtn{
background-color: #000000;
text-align: center;
vertical-align: middle;
color: white;
margin: 0px;
border: 0px;
height: 5vh;
width: 90px;
font-size: 25px;
transition-duration: 0.3s;
}
.TopNavBtn:hover{
height: 7vh;
font-size: 27px;
background-color: #272727;
font-weight: bold;
}
.Navigation{
grid-column: 1/2;
background-color: #0f0f0f;
}
.Divider{
aspect-ratio: 900/300;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.Grad1
{
background-image: url("img/svg/Grad1.svg");
}
.Grad2
{
background-image: url("img/svg/Grad2.svg");
}
.Grad3
{
background-image: url("img/svg/Grad3.svg");
}
.Grad4
{
background-image: url("img/svg/Grad4.svg");
}
.RGrad1
{
background-image: url("img/svg/RGrad1.svg");
}
.RGrad2
{
background-image: url("img/svg/RGrad2.svg");
}
.RGrad3
{
background-image: url("img/svg/RGrad3.svg");
}
.RGrad4
{
background-image: url("img/svg/RGrad4.svg");
}
.b{
background-color: #015657;
}
.g{
background-color: #303030;
}
.w{
background-color: white;
}
#keyframes logo {
0%{background-image: url("img/grass.png");}
25% {background-image: url("img/dia.png");}
50%{background-image: url("img/spawner1.png");}
75%{background-image: url("img/oak1.png");}
100%{background-image: url("img/grass.png");}
}
.logo{
background-image: url("grass.png");
background-repeat: no-repeat;
width: 200px;
height: 200px;
animation-name:logo;
animation-duration: 10s;
animation-play-state:paused ;
animation-iteration-count:infinite ;
align-items: center;
align-content: center;
margin: auto;
}
.logo:hover{
animation-play-state:running ;
}
<!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">
<link rel="stylesheet" type="text/css" href="Project.css"/>
<title>Document</title>
</head>
<body >
<header id="TNav">
<nav class="TopNavigation" id="xdd">
<button class="TopNavBtn">xd</button>
</nav>
</header>
<article class="TopContent">
<div class="logo"></div>
</article>
<nav class="Navigation">
</nav>
<article class="Content">
<section class=" b" >
<p>Aliquid, ab? Quod nulla aliquam libero placeat et distinctio fugit maiores quisquam odit illo repellat, provident modi. Placeat, maiores facere, ut dolorem assumenda amet alias natus, expedita sit mollitia minima?</p>
</section>
<div class="Divider Grad1" ></div>
<section class=" g">
<p>Aliquid, ab? Quod nulla aliquam libero placeat et distinctio fugit maiores quisquam odit illo repellat, provident modi. Placeat, maiores facere, ut dolorem assumenda amet alias natus, expedita sit mollitia minima?</p>
</section>
<div class="Divider RGrad1" ></div>
<section class="b">
<p>Tenetur mollitia esse omnis rem voluptatum, quaerat, delectus nulla quasi similique deleniti tempora a libero ducimus, sit asperiores fugiat temporibus error. Alias consectetur sit odio? Praesentium, reiciendis dicta. Ducimus, consequatur.</p>
</section>
<div class="Divider Grad2" ></div>
<section class="g">
<p>Debitis sed ullam assumenda quasi! Quibusdam, laudantium minus cum delectus quasi facilis, quam amet alias ex, voluptatibus cumque ratione praesentium laborum sint nemo eaque sunt tempora qui ad odio consequatur!</p>
</section >
<div class="Divider RGrad2" ></div>
<section class="b">
<p>Autem ratione tempora officiis reprehenderit, voluptatem rem sit quas veritatis! Aspernatur rerum nam architecto ex voluptates earum illo rem quia, culpa quaerat fuga voluptatibus impedit eaque iste sint nostrum facilis!</p>
</section>
<div class="Divider Grad3" ></div>
<section class="g">
<p>Autem ratione tempora officiis reprehenderit, voluptatem rem sit quas veritatis! Aspernatur rerum nam architecto ex voluptates earum illo rem quia, culpa quaerat fuga voluptatibus impedit eaque iste sint nostrum facilis!</p>
</section>
<div class="Divider RGrad3" ></div>
<section class="b">
<p>Autem ratione tempora officiis reprehenderit, voluptatem rem sit quas veritatis! Aspernatur rerum nam architecto ex voluptates earum illo rem quia, culpa quaerat fuga voluptatibus impedit eaque iste sint nostrum facilis!</p>
</section>
</article>
<script>
let NavBar = document.getElementById("xdd");
let bound = NavBar.getBoundingClientRect();
window.onscroll= function (){
console.log("scrolled")
console.log(bound)
if(bound.top >=0)
{
}
else
{
console.log("isnt")
}
}
// to check if the DOM is loaded
document.addEventListener("DOMContentLoaded", (event) =>{
console.log("ready");
})
</script>
</body>
</html>
I am trying to detected whether an Elemnt is inside the Viewport. When i looked this up, i was directed to usimg getBoundingClientRect to get its location relative to the Viewport.
However, when i tried implementing this solution, it didnt work, as this always returned a DOMRect with the x,y, top and left values being 0 and the others staying constant no matter where i scroll.
The html element(s) i want to get the location of:
<header id="TNav">
<nav class="TopNavigation" id="xdd">
<button class="TopNavBtn">xd</button>
</nav>
</header>
Its CSS:
header{
height: 5vh;
grid-column: 1/3;
grid-row:1/2 ;
background-color: black;
z-index: 2;
display: block;
}
.TopNavigation{
display: flex;
flex-direction: column;
}
The JS code:
let NavBar = document.getElementById("xdd");
let bound = NavBar.getBoundingClientRect();
window.onscroll= function (){
console.log("scrolled")
console.log(bound)
if(bound.top >=0)
{
}
else
{
console.log("isnt")
}
}
// to check if the DOM is loaded
document.addEventListener("DOMContentLoaded", (event) =>{
console.log("ready");
})
the code is implemented at the very bottom of the <body>.
I tried testing if the DOM is loaded and changing which element i read the location of.
Here is what the the getBoundingClientRect() returns:
Thanks to user Unmitigated, i now have the answer:
The let bound = NavBar.getBoundingClientRect had to be moved inside the window.onscroll event handler, like so:
<script>
let NavBar = document.getElementById("xdd");
window.onscroll= function (){
let bound = NavBar.getBoundingClientRect();
console.log("scrolled")
console.log(bound)
if(bound.top >=0)
{
}
else
{
console.log("isnt")
}
}
// to check if the DOM is loaded
document.addEventListener("DOMContentLoaded", (event) =>{
console.log("ready");
})
</script>
When I open menu in smaller resolution(mobile resolution) and click on some link from the menu its not closing, its still there the menu. Can you help me? I think there is missing something in js code but I don't know what I can write more to close menu after clicking on the link from the menu.
const body = document.querySelector("body");
const navbar = document.querySelector(".navbar");
const menuBtn = document.querySelector(".menu-btn");
const cancelBtn = document.querySelector(".cancel-btn");
menuBtn.onclick = () => {
navbar.classList.add("show");
menuBtn.classList.add("hide");
body.classList.add("disabled");
}
cancelBtn.onclick = () => {
body.classList.remove("disabled");
navbar.classList.remove("show");
menuBtn.classList.remove("hide");
}
window.onscroll = () => {
this.scrollY > 20 ? navbar.classList.add("sticky") : navbar.classList.remove("sticky");
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
/* custom scroll bar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::selection {
background: rgb(0, 123, 255, 0.3);
}
.content {
max-width: 1250px;
margin: auto;
padding: 0 30px;
}
.navbar {
position: fixed;
width: 100%;
z-index: 2;
padding: 25px 0;
transition: all 0.3s ease;
}
.navbar.sticky {
background: #1b1b1b;
padding: 10px 0;
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.1);
}
.navbar .content {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a {
color: #fff;
font-size: 30px;
font-weight: 600;
text-decoration: none;
}
.navbar .menu-list {
display: inline-flex;
}
.menu-list li {
list-style: none;
}
.menu-list li a {
color: #fff;
font-size: 18px;
font-weight: 500;
margin-left: 25px;
text-decoration: none;
transition: all 0.3s ease;
}
.menu-list li a:hover {
color: #007bff;
}
.banner {
background: url("banner.jpg") no-repeat;
height: 100vh;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.about {
padding: 30px 0;
}
.about .title {
font-size: 38px;
font-weight: 700;
}
.about p {
padding-top: 20px;
text-align: justify;
}
.icon {
color: #fff;
font-size: 20px;
cursor: pointer;
display: none;
}
.menu-list .cancel-btn {
position: absolute;
right: 30px;
top: 20px;
}
#media (max-width: 1230px) {
.content {
padding: 0 60px;
}
}
#media (max-width: 1100px) {
.content {
padding: 0 40px;
}
}
#media (max-width: 900px) {
.content {
padding: 0 30px;
}
}
#media (max-width: 868px) {
body.disabled {
overflow: hidden;
}
.icon {
display: block;
}
.icon.hide {
display: none;
}
.navbar .menu-list {
position: fixed;
height: 100vh;
width: 100%;
max-width: 400px;
left: -100%;
top: 0px;
display: block;
padding: 40px 0;
text-align: center;
background: #222;
transition: all 0.3s ease;
}
.navbar.show .menu-list {
left: 0%;
}
.navbar .menu-list li {
margin-top: 45px;
}
.navbar .menu-list li a {
font-size: 23px;
margin-left: -100%;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.navbar.show .menu-list li a {
margin-left: 0px;
}
}
#media (max-width: 380px) {
.navbar .logo a {
font-size: 27px;
}
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Navigation Bar | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
</head>
<body>
<nav class="navbar">
<div class="content">
<div class="logo">
CodingNepal
</div>
<ul class="menu-list">
<div class="icon cancel-btn">
<i class="fas fa-times"></i>
</div>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Features</li>
<li>Contact</li>
</ul>
<div class="icon menu-btn">
<i class="fas fa-bars"></i>
</div>
</div>
</nav>
<div class="banner"></div>
<div class="about">
<div class="content">
<div class="title">Responsive Sticky Navigation Menu Bar on Scroll using HTML CSS & JavaScript</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo impedit atque consequatur! Iusto distinctio temporibus repellendus labore odit adipisci harum ipsa beatae natus, eum eius, hic aperiam odio! Quasi molestias magnam illo voluptatem iusto
ipsam blanditiis, tempore cumque reiciendis quaerat vero tenetur, sequi dolores libero voluptas vitae voluptate placeat dolorum modi ipsa nisi repellat facilis aliquam asperiores. Aut nam repellat harum quas saepe dolorum voluptates ratione, itaque
consectetur explicabo a facilis rem mollitia maxime repudiandae fuga reprehenderit, odio cum incidunt labore molestiae quis non perferendis ipsam. Illum, in, deserunt. Ipsa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit hic excepturi nobis id, eos dolor libero, nam assumenda, at culpa quos perspiciatis ratione ea modi! Natus sapiente a, explicabo sit quisquam eligendi esse provident eos enim doloremque
blanditiis aut placeat veniam, libero nostrum quae. Ipsam, iste reprehenderit minima accusantium illo dolorem recusandae, ipsa autem quidem reiciendis a mollitia sit tenetur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint doloremque perspiciatis voluptate ducimus reiciendis rem expedita voluptatibus dicta harum, quo, aspernatur maiores possimus officia quod? Aliquid molestiae illo sequi, tempora perferendis
at incidunt nam porro voluptatibus, iste aperiam blanditiis adipisci ducimus repellendus distinctio nostrum ipsum! Voluptas facilis cum, atque tempora magnam beatae sequi! Doloribus expedita, cupiditate quo quod nemo aliquam, mollitia cum ea nam
ullam soluta temporibus! Repudiandae incidunt consequatur distinctio deleniti obcaecati sit facilis unde, quisquam veniam ad doloribus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet veniam error deleniti cum beatae non assumenda illum est dolores, possimus suscipit quibusdam eveniet id fuga dolore unde modi, sapiente voluptas. Mollitia veritatis explicabo cumque
enim quia voluptates provident totam perferendis excepturi animi assumenda optio minus laudantium eveniet possimus amet blanditiis dolore in fuga atque, earum officia tempora quam similique est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque ad sunt distinctio quidem incidunt cupiditate sequi deleniti, corrupti officia nam veritatis facilis veniam dolorum enim nisi ipsum dolor rem! Doloribus, eaque odit voluptatem iste
laboriosam provident facere quo. Cum repellat pariatur, error ratione repellendus nisi quam culpa tempora facere in atque nesciunt, magni est aliquid unde soluta optio! Dolore pariatur, quaerat quo in cupiditate deleniti exercitationem. Facilis
suscipit corporis unde aut minima nihil, eum molestias itaque, tenetur, beatae ipsa at!</p>
</div>
</div>
</body>
You need to close the menu on link click as well as cancel. I've created a function for that to avoid duplication.
const body = document.querySelector("body");
const navbar = document.querySelector(".navbar");
const menuBtn = document.querySelector(".menu-btn");
const cancelBtn = document.querySelector(".cancel-btn");
const menuLinks = document.querySelectorAll('.menu-list li a');
const closeMenu = () => {
body.classList.remove("disabled");
navbar.classList.remove("show");
menuBtn.classList.remove("hide");
};
menuBtn.onclick = () => {
navbar.classList.add("show");
menuBtn.classList.add("hide");
body.classList.add("disabled");
};
cancelBtn.onclick = () => {
closeMenu();
};
menuLinks.forEach(link => {
link.onclick = () => {
closeMenu();
};
});
window.onscroll = () => {
this.scrollY > 20 ? navbar.classList.add("sticky") : navbar.classList.remove("sticky");
};
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
/* custom scroll bar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::selection {
background: rgb(0, 123, 255, 0.3);
}
.content {
max-width: 1250px;
margin: auto;
padding: 0 30px;
}
.navbar {
position: fixed;
width: 100%;
z-index: 2;
padding: 25px 0;
transition: all 0.3s ease;
}
.navbar.sticky {
background: #1b1b1b;
padding: 10px 0;
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.1);
}
.navbar .content {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a {
color: #fff;
font-size: 30px;
font-weight: 600;
text-decoration: none;
}
.navbar .menu-list {
display: inline-flex;
}
.menu-list li {
list-style: none;
}
.menu-list li a {
color: #fff;
font-size: 18px;
font-weight: 500;
margin-left: 25px;
text-decoration: none;
transition: all 0.3s ease;
}
.menu-list li a:hover {
color: #007bff;
}
.banner {
background: url("banner.jpg") no-repeat;
height: 100vh;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.about {
padding: 30px 0;
}
.about .title {
font-size: 38px;
font-weight: 700;
}
.about p {
padding-top: 20px;
text-align: justify;
}
.icon {
color: #fff;
font-size: 20px;
cursor: pointer;
display: none;
}
.menu-list .cancel-btn {
position: absolute;
right: 30px;
top: 20px;
}
#media (max-width: 1230px) {
.content {
padding: 0 60px;
}
}
#media (max-width: 1100px) {
.content {
padding: 0 40px;
}
}
#media (max-width: 900px) {
.content {
padding: 0 30px;
}
}
#media (max-width: 868px) {
body.disabled {
overflow: hidden;
}
.icon {
display: block;
}
.icon.hide {
display: none;
}
.navbar .menu-list {
position: fixed;
height: 100vh;
width: 100%;
max-width: 400px;
left: -100%;
top: 0px;
display: block;
padding: 40px 0;
text-align: center;
background: #222;
transition: all 0.3s ease;
}
.navbar.show .menu-list {
left: 0%;
}
.navbar .menu-list li {
margin-top: 45px;
}
.navbar .menu-list li a {
font-size: 23px;
margin-left: -100%;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.navbar.show .menu-list li a {
margin-left: 0px;
}
}
#media (max-width: 380px) {
.navbar .logo a {
font-size: 27px;
}
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Navigation Bar | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
</head>
<body>
<nav class="navbar">
<div class="content">
<div class="logo">
CodingNepal
</div>
<ul class="menu-list">
<div class="icon cancel-btn">
<i class="fas fa-times"></i>
</div>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Features</li>
<li>Contact</li>
</ul>
<div class="icon menu-btn">
<i class="fas fa-bars"></i>
</div>
</div>
</nav>
<div class="banner"></div>
<div class="about">
<div class="content">
<div class="title">Responsive Sticky Navigation Menu Bar on Scroll using HTML CSS & JavaScript</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo impedit atque consequatur! Iusto distinctio temporibus repellendus labore odit adipisci harum ipsa beatae natus, eum eius, hic aperiam odio! Quasi molestias magnam illo voluptatem iusto
ipsam blanditiis, tempore cumque reiciendis quaerat vero tenetur, sequi dolores libero voluptas vitae voluptate placeat dolorum modi ipsa nisi repellat facilis aliquam asperiores. Aut nam repellat harum quas saepe dolorum voluptates ratione, itaque
consectetur explicabo a facilis rem mollitia maxime repudiandae fuga reprehenderit, odio cum incidunt labore molestiae quis non perferendis ipsam. Illum, in, deserunt. Ipsa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit hic excepturi nobis id, eos dolor libero, nam assumenda, at culpa quos perspiciatis ratione ea modi! Natus sapiente a, explicabo sit quisquam eligendi esse provident eos enim doloremque
blanditiis aut placeat veniam, libero nostrum quae. Ipsam, iste reprehenderit minima accusantium illo dolorem recusandae, ipsa autem quidem reiciendis a mollitia sit tenetur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint doloremque perspiciatis voluptate ducimus reiciendis rem expedita voluptatibus dicta harum, quo, aspernatur maiores possimus officia quod? Aliquid molestiae illo sequi, tempora perferendis
at incidunt nam porro voluptatibus, iste aperiam blanditiis adipisci ducimus repellendus distinctio nostrum ipsum! Voluptas facilis cum, atque tempora magnam beatae sequi! Doloribus expedita, cupiditate quo quod nemo aliquam, mollitia cum ea nam
ullam soluta temporibus! Repudiandae incidunt consequatur distinctio deleniti obcaecati sit facilis unde, quisquam veniam ad doloribus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet veniam error deleniti cum beatae non assumenda illum est dolores, possimus suscipit quibusdam eveniet id fuga dolore unde modi, sapiente voluptas. Mollitia veritatis explicabo cumque
enim quia voluptates provident totam perferendis excepturi animi assumenda optio minus laudantium eveniet possimus amet blanditiis dolore in fuga atque, earum officia tempora quam similique est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque ad sunt distinctio quidem incidunt cupiditate sequi deleniti, corrupti officia nam veritatis facilis veniam dolorum enim nisi ipsum dolor rem! Doloribus, eaque odit voluptatem iste
laboriosam provident facere quo. Cum repellat pariatur, error ratione repellendus nisi quam culpa tempora facere in atque nesciunt, magni est aliquid unde soluta optio! Dolore pariatur, quaerat quo in cupiditate deleniti exercitationem. Facilis
suscipit corporis unde aut minima nihil, eum molestias itaque, tenetur, beatae ipsa at!</p>
</div>
</div>
</body>
I want to implement a custom scroll up & down button outside the Bootstrap 4 modal but I have no idea how to achieve this functionality. I has hidden the scroll bar using (::-webkit-scrollbar {display:none;}) property to enhance the modal body design.
On PC we can scroll using the mouse but some people may get confused so that's why I want to add two custom up & down buttons. (Check out the image I attached)
Is it possible to achieve the functionality using javascript?
[![My project website with buttons
.modal-body::-webkit-scrollbar {
display: none;
}
.modal-body P {
color: red;
}
.modal.left_modal .modal-dialog {
position: fixed;
margin: auto;
width: 450px;
max-width: 85%;
height: 100%;
-webkit-transform: translate3d(0%, 0, 0);
-ms-transform: translate3d(0%, 0, 0);
-o-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
}
.modal.left_modal .modal-content {
height: 100vh !important;
}
.modal.left_modal.fade .modal-dialog{
left: -50%;
-webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
-moz-transition: opacity 0.3s linear, left 0.3s ease-out;
-o-transition: opacity 0.3s linear, left 0.3s ease-out;
transition: opacity 0.3s linear, left 0.3s ease-out;
}
.modal.left_modal.fade.show .modal-dialog{
left: 0;
box-shadow: 0px 0px 19px rgba(0,0,0,.5);
}
.modal_outer .modal-body {
overflow-y: auto;
overflow-x: hidden;
height: 100vh;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<button class="btn btn-primary mt-3 float-right" id="modal_view_left" data-toggle="modal" data-target="#get_quote_modal">Open modal</button>
<div class="modal modal_outer left_modal fade" id="get_quote_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" >
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title">LEFT MODAL</h2>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni numquam accusantium dolore ipsum! Aut distinctio maxime obcaecati, sapiente nisi laudantium dignissimos optio, ea ex quas laboriosam ab officia odit, sequi.</p><br><br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni numquam accusantium dolore ipsum! Aut distinctio maxime obcaecati, sapiente nisi laudantium dignissimos optio, ea ex quas laboriosam ab officia odit, sequi.</p><br><br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni numquam accusantium dolore ipsum! Aut distinctio maxime obcaecati, sapiente nisi laudantium dignissimos optio, ea ex quas laboriosam ab officia odit, sequi.</p><br><br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni numquam accusantium dolore ipsum! Aut distinctio maxime obcaecati, sapiente nisi laudantium dignissimos optio, ea ex quas laboriosam ab officia odit, sequi.</p><br><br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni numquam accusantium dolore ipsum! Aut distinctio maxime obcaecati, sapiente nisi laudantium dignissimos optio, ea ex quas laboriosam ab officia odit, sequi.</p>
</div>
<div class="modal-footer">
<button type="reset" class="btn btn-primary ml-auto" data-dismiss="modal">cancel</button>
</div>
</div>
</div>
</div>
]1]1
Absolutely possible. In the snippet you will find the basic setup needed to achieve this.
Though I did not implement scrolling more on each click or styles of any kind, you will have to add that yourself. Read the scrolltop value of your modal content and add your desired number, this has to happen in every click to set the correct new scroll value.
javascript scroll documentation
.modal-body::-webkit-scrollbar {
display: none;
}
.modal-body P {
color: red;
}
.modal.left_modal .modal-dialog {
position: fixed;
margin: auto;
width: 450px;
max-width: 85%;
height: 100%;
-webkit-transform: translate3d(0%, 0, 0);
-ms-transform: translate3d(0%, 0, 0);
-o-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
}
.modal.left_modal .modal-content {
height: 100vh !important;
}
.modal.left_modal.fade .modal-dialog{
left: -50%;
-webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
-moz-transition: opacity 0.3s linear, left 0.3s ease-out;
-o-transition: opacity 0.3s linear, left 0.3s ease-out;
transition: opacity 0.3s linear, left 0.3s ease-out;
}
.modal.left_modal.fade.show .modal-dialog{
left: 0;
box-shadow: 0px 0px 19px rgba(0,0,0,.5);
}
.modal_outer .modal-body {
overflow-y: auto;
overflow-x: hidden;
height: 100vh;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<button class="btn btn-primary mt-3 float-right" id="modal_view_left" data-toggle="modal" data-target="#get_quote_modal">Open modal</button>
<div class="modal modal_outer left_modal fade" id="get_quote_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" >
<button id="scrollDown">v</button>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title">LEFT MODAL</h2>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni numquam accusantium dolore ipsum! Aut distinctio maxime obcaecati, sapiente nisi laudantium dignissimos optio, ea ex quas laboriosam ab officia odit, sequi.</p><br><br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni numquam accusantium dolore ipsum! Aut distinctio maxime obcaecati, sapiente nisi laudantium dignissimos optio, ea ex quas laboriosam ab officia odit, sequi.</p><br><br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni numquam accusantium dolore ipsum! Aut distinctio maxime obcaecati, sapiente nisi laudantium dignissimos optio, ea ex quas laboriosam ab officia odit, sequi.</p><br><br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni numquam accusantium dolore ipsum! Aut distinctio maxime obcaecati, sapiente nisi laudantium dignissimos optio, ea ex quas laboriosam ab officia odit, sequi.</p><br><br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni numquam accusantium dolore ipsum! Aut distinctio maxime obcaecati, sapiente nisi laudantium dignissimos optio, ea ex quas laboriosam ab officia odit, sequi.</p>
</div>
<div class="modal-footer">
<button type="reset" class="btn btn-primary ml-auto" data-dismiss="modal">cancel</button>
</div>
</div>
</div>
</div>
<script>
let btn = document.getElementById('scrollDown');
let elem = document.getElementsByClassName('modal-body'); // returns array
btn.onclick = function(e) {
elem[0].scroll(0, 1000); // scrolls inside modal body
};
</script>
Relevant script:
let btn = document.getElementById('scrollDown');
let elem = document.getElementsByClassName('modal-body'); // returns array - you can use ID instead
btn.onclick = function(e) {
// if you set an id on the modal body, you do not need elem[0], just elem
elem[0].scroll(0, 1000); // scrolls inside modal body
};
I am new on css, html and javascript. Trying to create a website but stuck on animation.
#import url('https://fonts.googleapis.com/css?family=Montserrat:700');
body{
background-color: rosybrown;
}
header{
background-color: black;
height: 20%;
color: #fff;
text-align: center;
}
#fly-in {
height: 50px;
font-size: 4em;
margin: 40vh auto;
height: 20vh;
text-transform: uppercase;
}
#fly-in span {
display: block;
font-size: .4em;
opacity: .8;
}
#fly-in div {
position: fixed;
background-position: 50%;
margin: 2vh 0;
opacity: 0;
left: 10vw;
width: 80vw;
animation: switch 32s linear infinite;
}
#fly-in div:nth-child(2) { animation-delay: 4s}
#fly-in div:nth-child(3) { animation-delay: 8s}
#fly-in div:nth-child(4) { animation-delay: 12s}
#fly-in div:nth-child(5) { animation-delay: 16s}
#fly-in div:nth-child(6) { animation-delay: 20s}
#fly-in div:nth-child(7) { animation-delay: 24s}
#fly-in div:nth-child(8) { animation-delay: 28s}
#keyframes switch {
0% { opacity: 0;filter: blur(20px); transform:scale(12)}
3% { opacity: 1;filter: blur(0); transform:scale(1)}
10% { opacity: 1;filter: blur(0); transform:scale(.9)}
13% { opacity: 0;filter: blur(10px); transform:scale(.1)}
80% { opacity: 0}
100% { opacity: 0}
}
<header>
<div id="fly-in">
<div><span>Very</span>Cinematic</div>
<div>Fade Away<span>into the distance</span></div>
<div>Still Loops <span> for eternity</span></div>
<div><span>Just CSS</span> and HTML</div>
<div><span>Very</span>Cinematic</div>
<div>Fade Away<span>into the distance</span></div>
<div>Still Loops <span> for eternity</span></div>
<div><span>Just CSS</span> and HTML</div>
</div>
</header>
<div>
<H1>Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Ab sit debitis error deleniti,
molestias consectetur nostrum cupiditate possimus
neque nemo adipisci aut a minima iste ipsam deserunt
incidunt iure aliquid?</H1>
<H1>Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Ab sit debitis error deleniti,
molestias consectetur nostrum cupiditate possimus
neque nemo adipisci aut a minima iste ipsam deserunt
incidunt iure aliquid?</H1>
<H1>Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Ab sit debitis error deleniti,
molestias consectetur nostrum cupiditate possimus
neque nemo adipisci aut a minima iste ipsam deserunt
incidunt iure aliquid?</H1>
<H1>Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Ab sit debitis error deleniti,
molestias consectetur nostrum cupiditate possimus
neque nemo adipisci aut a minima iste ipsam deserunt
incidunt iure aliquid?</H1>
<H1>Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Ab sit debitis error deleniti,
molestias consectetur nostrum cupiditate possimus
neque nemo adipisci aut a minima iste ipsam deserunt
incidunt iure aliquid?</H1>
<H1>Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Ab sit debitis error deleniti,
molestias consectetur nostrum cupiditate possimus
neque nemo adipisci aut a minima iste ipsam deserunt
incidunt iure aliquid?</H1>
</div>
animation works well but what i want is when i stroll down animation should follow the page and go up. but thats not happen. I have changed position to relative, sticky and fixed but no luck.
codepin: https://codepen.io/younusrahman/pen/QWvpKXE
Changing the values of position won't fix the issue. I tried giving position: relative, now the text is getting moved up on scroll, but each texts are coming after another. If you have only one text, this would work.
Set div position to absolute inside "fly-in" div instead of fixed
#fly-in div
{
position: absolute;
}
I want to animate an image in specific part of page when page is scrolled to that area. Animation should be like this: when page loads that image is invisible and as we scroll down that image fadesIn and moves from right to left 100px .
this is what i did to get scroll position
jQuery(document).ready(function($){
$('.myimages').hide();
var target = $(".img-div").offset().top;
var interval = setInterval(function() {
if ($(window).scrollTop() >=target)
{
$('.myimages').fadeIn();
}
}, 250);
});
now instead of image fading in what i need to animate it as per above mentioned criteria i tried something like this
$('.myimages').animate({right:'100'}, 200);
but this did not work please help me with it
Instead of firing a setInterval every few seconds, you can bind it to the window's scroll event.
$(window).scroll(function () {
if ($(window).scrollTop() >= target)
$('.myimages').fadeIn();
});
To animate the right and other similar CSS properties, you need to set the .image's position to be something else than static.
$('.myimages').animate({
right: 100
}, 200);
So, you need this in CSS:
.myimages {position: absolute;}
Working Snippet
$(function () {
$("img").hide();
$(window).scroll(function () {
if ($(window).scrollTop() > $("img").scrollTop())
$("img").show().addClass("bounceInRight");
});
});
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
#-webkit-keyframes bounceInRight {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(-30px);
}
80% {
-webkit-transform: translateX(10px);
}
100% {
-webkit-transform: translateX(0);
}
}
#keyframes bounceInRight {
0% {
opacity: 0;
transform: translateX(2000px);
}
60% {
opacity: 1;
transform: translateX(-30px);
}
80% {
transform: translateX(10px);
}
100% {
transform: translateX(0);
}
}
.bounceInRight {
-webkit-animation-name: bounceInRight;
animation-name: bounceInRight;
}
img {max-width: 100%;}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<h1>Animation</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, unde amet a repellat tempora ipsum! Maiores minima sapiente blanditiis, asperiores necessitatibus corporis incidunt! Ex, praesentium aliquam omnis dicta quo. Quisquam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero eius eligendi praesentium doloremque voluptatibus, vero sed aspernatur officia eum repellat unde dolore ut eaque esse, officiis natus harum vel eos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta atque beatae temporibus et officiis enim, rem facere! Voluptatibus adipisci, odit in necessitatibus explicabo eveniet culpa. Nisi praesentium quasi error ducimus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus autem facere ipsa ratione excepturi praesentium. Reiciendis aut praesentium earum laboriosam, architecto quasi error, corporis, nesciunt maxime distinctio quo nisi debitis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati eos, consequatur voluptatibus harum deserunt! Fugit voluptatem veniam atque, odio aut qui iste laudantium, nemo error vero natus eaque unde sunt!</p>
<p><img src="https://assets.keycdn.com/img/cdn-network.svg" alt="" class="animated" /></p>