Know About International Nurses Day 2021 By Page Scroll Right Effect

Ticker

10/recent/ticker-posts

Know About International Nurses Day 2021 By Page Scroll Right Effect

AK Creative 5/12/2021 07:53:00 PM

12th May International Nurses Day 2021 by Maa Blogger

HTML Source Code 


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Text Effect</title>
<link rel="stylesheet" href="styles.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
</head>
<body>
<div class="container">
<div class="left column">
<div class="header">
<p><h1><u><i><b><font color="red"><center>International Nurses Day</center></font></u></i></b><h1></p></br>
<p>
<h5><font color="navy">International Nurses Day is celebrated around the world every May 12, the anniversary of Florence Nightingale's birth. ICN commemorates this important day each year with the production and distribution of the International Nurses' Day (IND) resources and evidence.</font></h5></br>
</p>
<p><font color="darkorange">The theme for the 2021 resource is Nurses: A Voice to Lead - A vision for future healthcare.</font></p>
</div>
<div class="link"><a href="https://programming387,blogspot.com">My Blog (Maa Blogger)</a></div>
</div>
<div class="right column">
<div class="images">
</div>
<div class="header">
<h1 class="ml12"><font color="fuchsia">12 May 2021</font></h1>
</div>
</div>
</div>
<script>
var textWrapper = document.querySelector(".ml12");
textWrapper.innerHTML = textWrapper.textContent.replace(
/\S/g,
"<span class='letter'>$&</span>"
);

anime.timeline().add({
targets: ".ml12 .letter",
translateY: [100, 0],
translateZ: 0,
opacity: [0, 1],
easing: "easeOutExpo",
duration: 2000,
delay: (el, i) => 2000 + 60 * i,
});

TweenMax.from(".left", 3, {
left: "-50%",
ease: Expo.easeInOut,
delay: 3.4,
});
TweenMax.from(".header h1", 3, {
left: "-140%",
ease: Expo.easeInOut,
delay: 3.4,
});
TweenMax.staggerFrom(
".images > div",
1,
{
y: "60",
opacity: 0,
ease: Power2.easeOut,
delay: 6,
},
0.2
);

TweenMax.staggerFrom(
".header > p",
1,
{
y: "60",
opacity: 0,
ease: Power2.easeOut,
delay: 5.6,
},
0.2
);

TweenMax.from(".link", 1, {
opacity: 0,
ease: SteppedEase.config(1),
repeat: -1,
repeatDelay: 0.2,
delay: 7.8,
});
</script>
</body>
</html>


CSS Source Code


* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Voyage";
}

html,
body {
background: url("https://assets.thehansindia.com/h-upload/2021/05/11/1075759-international-nurses-day.webp") no-repeat right;
}

.container {
width: 100%;
height: 100vh;
}

.column {
width: 50%;
height: 100vh;
}

.left {
position: relative;
left: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
background: url("https://newsjox.com/wp-content/uploads/2021/05/Florence-Nightingale-Birth-Anniversary-Quotes-by-the-Most-Famous-Nurse-in-History-To-Celebrate-International-Nurses-Day-2021.jpg") no-repeat right;
background-size: cover;
padding: 20px;
}

.right {
display: flex;
padding: 120px 0;
flex-direction: column;
justify-content: space-between;
align-items: center;
}

.img {
width: 160px;
height: 200px;
margin: 5px;
}

.header {
color: #FF00FF;
text-transform: uppercase;
font-size: 30px;
}

.header h1 {
position: relative;
}

.ml12 .letter {
display: inline-block;
line-height: 1em;
font-size: 80px;
}

.link a {
color: blue;
text-transform: uppercase;
font-size: 40px;
font-family: "Neutral Face";
}

@media (min-width: 900px) {
.container {
display: flex;
}

.images {
display: flex;
justify-content: center;
align-items: center;
}
}

@media (max-width: 1000px) {
.column {
width: 100%;
}

.img {
width: 800px;
height: 800px;
}

.header {
font-size: 35px;
padding: 80px 0;
}
}


Screen Output


 

Tags:

Post a Comment

16 Comments