index.html
<!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>Javascript text animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div class="wrapper">
<div class="box" id="box-one">
<div class="b1">
<p class="pera">This is headline of <strong> first slide</strong> </p>
</div>
<div class="b2">
<p class="pera">Paragraph from <strong>first slide</strong></p>
</div>
</div>
<div class="box" id="box-two">
<div class="b1">
<p class="pera">This is headline of <strong> second slide</strong></p>
</div>
<div class="b2">
<p class="pera">Paragraph from <strong>second slide.</strong></p>
</div>
</div>
<div class="box" id="box-three">
<div class="b1">
<p class="pera">This is headline of <strong> third slide</strong></p>
</div>
<div class="b2">
<p class="pera">Paragraph from <strong>third slide.</strong>.</p>
</div>
</div>
<!-- <div class="arrow">
<i class="arrow" id="left"></i>
<i class="arrow" id="right"></i>
</div> -->
<script src="main.js"></script>
</div>
</body>
</html>
style.css
* {
padding: 0;
margin: 0;
}
body,
html {
padding: 0;
margin: 0;
}
header {
height: 100px;
background: rgb(37, 2, 58);
width: 100%;
}
nav ul li {
margin: 35px 0 auto 20px !important;
list-style: none;
display: inline-block;
}
a {
text-decoration: none;
color: white;
}
.wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 85vh;
width: 100%;
background: url(https://get.pxhere.com/photo/landscape-nature-sky-wilderness-grass-grassland-phenomenon-hill-morning-meadow-mount-scenery-rural-area-horizon-sunlight-highland-evening-pasture-field-ecoregion-cloud-computer-wallpaper-national-park-mountain-panorama-dawn-1432253.jpg) rgba(0, 0, 31, 0.548);
background-blend-mode:soft-light;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.box {
text-align: center;
/* background: blue; */
padding: 1rem;
font-size: 1.5rem;
color: white;
}
.b1,
.b2 {
/* background: purple; */
padding: 1rem;
margin-top: 0.7rem;
}
.b1,
.b2 {
overflow: hidden;
}
.txt-animate {
animation-name: lower_third;
animation-duration: 5s;
animation-delay: 1s;
animation-fill-mode: both;
animation-timing-function: ease;
}
i {
cursor: pointer;
border: solid rgb(226, 226, 226);
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
#right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
#left {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
@keyframes lower_third {
0% {
transform: translateY(100px);
}
15%{
transform: translateY(0);
}
80% {
transform: translateY(0);
}
100% {
transform: translateY(100px);
}
}
main.js
const pera = document.querySelectorAll('.pera');
const all_box = document.querySelectorAll('.box');
const left_arrow = document.getElementById('left');
const right_arrow = document.getElementById('right');
let current = 0;
function slideAnimation() {
all_box.forEach(box => box.style.display = 'none');
function slideTiming() {
setTimeout(() => {
all_box[current].style.display = 'block';
pera.forEach(p => p.classList.add('txt-animate'));
console.log('current from first slide before increase : ' + current);
current++;
console.log('current from first slide after increase : ' + current);
}, 0);
setTimeout(() => {
all_box[current - 1].style.display = 'none';
all_box[current].style.display = 'block';
pera.forEach(p => p.classList.add('txt-animate'));
console.log('current from second slide before increase : ' + current);
current++;
console.log('current from second slide after increase : ' + current);
}, 5500);
setTimeout(() => {
all_box[current - 1].style.display = 'none';
all_box[current].style.display = 'block';
pera.forEach(p => p.classList.add('txt-animate'));
console.log('current from third slide before increase : ' + current);
current++;
console.log('current from third slide after increase : ' + current);
}, 11000);
current = 0;
all_box.forEach(box => box.style.display = 'none');
}
setInterval(slideTiming, 16500);
slideTiming();
}
slideAnimation();
No comments: