This is the visual representation of my webpage: https://i.stack.imgur.com/tYq34.png
I am seeking to implement a uniform animation effect for the text "Carlos Qiano" and "Lorem Ipsum", similar to the link below: https://i.stack.imgur.com/XVnBS.jpg
Note:
- The text "Carlos Qiano" should fade out thrice upon initial landing on the webpage. Subsequently, the text should zoom in and out continuously.
- The text "Lorem Ipsum." should also undergo a repeated zoom in and out effect.
Below is my current HTML code that requires modification. The animate.css library has been utilized in the code. Please feel free to make adjustments and integrate other animation libraries as needed.
<!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>