This is how my webpage looks:
I want the text "Carlos Qiano" and "Lorem Ipsum" to have the same animation effect as the link: https://neelbhavsar.me/
Note:
- For the text "Carlos Qiano", it should fade out three times after you first land on the webpage. Then, the text zooms in and out repeatedly.
- For the text "Lorem Ipsum.", it should zoom in and out repeatedly.
Here is my HTML code that needs to be modified. I used animate.css in my code. Feel free to change it up and use any other libraries for animation.
<!DOCTYPE html>
<html>
<head>
<title>Background Top</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" >
<!-- Bootstrap 4 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Animation -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
</head>
<style type="text/css">
body{
margin-top: 53px;
}
.jumbotron {
background-image: url("background1.jpg");
text-align: center;
height:523px;
background-size: cover;
margin:0 !important;
display: flex;
justify-content: center;
flex-direction: column;
}
.mainText {
width: 100%;
font-family: Verdana,sans-serif;
font-size: 120px !important;
margin-top: 35px;
color: black;
margin: 0 0 5rem 0;
animation-duration: 2s;
animation-iteration-count:infinite;
animation-delay: 1s;
}
.subText {
font-size: 20px;
font-family: Georgia,serif;
font-style:italic;
line-height: 1.6;
color: black;
animation-duration:2s;
animation-iteration-count:infinite;
animation-delay:1s;
}
@media screen and (max-width: 768px) {
.mainText {
margin-bottom: 0;
}
.subText {
display: none;
}
}
</style>
<body>
<!-- //SECTION FOR PAGE TOP -->
<section id="page-top">
<div class="jumbotron">
<p data-aos="zoom-out" data-aos-delay="500" class="lead mainText pulse green aos-init aos-animate" id="name">Carlos Qiano</p>
<p data-aos="zoom-out" data-aos-delay="500" class="lead pulse lightGreen aos-init aos-animate d-md-block subText">Lorem Ipsum.<br>Lorem Ipsum.</p>
</div>
</section>
<br><br><br>
<script>
$(function() {
$("#name").fadeOut(750).fadeIn(750);
$("#name").fadeOut(750).fadeIn(750);
$("#name").fadeOut(750).fadeIn(750);
});
</script>
</body>
</html>
question from:
https://stackoverflow.com/questions/65649654/text-animation-for-webpage 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
