I found a captivating animation on this website: http://codepen.io/jschr/pen/GaJCi
Currently, I am integrating it into my project.
#content {
position: relative;
margin-left: auto;
margin-right: auto;
width: 1000px;
height: 700px;
}
#animation {
position: absolute;
z-index: 20;
width: 1000px;
height:50px;
top: 600px;
left: 350px;
}
#animation2 {
position: absolute;
z-index: 20;
width: 1000px;
height:50px;
top: -25px;
left: 340px;
}
Regarding the animation.css:
h1 {
position: absolute;
font: 12vmin/12vmin 'Special Elite', cursive;
left: 0;
top: 30%;
margin-top: -4vmin;
width: 100%;
text-align: center;
padding: 2vmin 0;
text-shadow: 0.15vmin 0.15vmin rgba(0, 0, 0, 0.5);
}In the main html:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div id="content">
<div id="animation"></div>
<script>
$("#animation").html('<object data="./animation/animation.htm">');
</script>
<div id="animation2"></div>
<script>
$("#animation2").html('<object data="./animation/animation2.htm">');
</script>
</div>
And the animations that I load into the main html:
<head>
<link href="https://fonts.googleapis.com/css?family=Special+Elite" rel="stylesheet">
<link rel="stylesheet" href="animate.css" charset="utf-8" />
<link rel="stylesheet" href="animation.css" charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="jquery.lettering.js"></script>
<script src="jquery.fittext.js"></script>
<script src="jquery.textillate.js"></script>
</head>
<body>
<h1 class="tlt">Hello to my website and welcome</h1>
<script>
$('.tlt').textillate({
in: { effect: 'splat' },
out: { effect:'hinge', sync: true },
loop: true
});
</script>
</body>
The second animation showcases a similar style.The main concern is customizing the width to display the entire phrase with the font size set around 30px. The challenge lies in adjusting the font size for the two animations differently – for the first one, it's at 8vmin while for the second one, it goes up to 12vmin to keep the phrases continuous. When attempts were made to increase the font size further, it caused the string to break or get cut off depending on where the width was adjusted. Analysis revealed that the injected spans were only 300 wide whereas a width of about 700 was desired. Various online resources and CSS modifications were explored without success. Even playing with span injections and enlarging them did not yield positive results. Despite these setbacks, the quest continues to find a viable solution. Suggestions and guidance are welcomed. Thank you!