Check out the code snippet below:
//Modifying text content
(function() {
var texts = $(".altered");
var textIndex = -1;
function displayNextText() {
++textIndex;
var t = texts.eq(textIndex)
.fadeIn(2000)
if (textIndex < texts.length - 1)
t.delay(2000)
.fadeOut(2000, displayNextText);
}
displayNextText();
})();.altered {
display: none;
padding: 0;
}
.altered svg {
width: auto;
height: 2em;
}
#signature {
stroke-dasharray: 1920;
stroke-dashoffset: 1920;
animation: sign 6.4s ease;
animation-fill-mode: forwards;
}
@keyframes sign {
to {
stroke-dashoffset: 0;
}
}
#hero h1 {
margin: 0;
display: flex;
font-size: 64px;
font-weight: 700;
height: 1em;
color: transparent;
background: black repeat;
background-clip: text;
-webkit-background-clip: text;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id = "hero">
<!-- This HTML should only show on smaller screens -->
<h1 style="margin-bottom: 16px">Text that needs to be displayed and centered on small devices</h1>
<!-- This HTML should only shown on larger screens -->
<h1 style="margin-bottom: 16px">Example
<div class="altered">
<h1> Text
</h1>
</div>
<div class="altered"> <svg xmlns="http://www.w3.org/2000/svg" width="999" height="622" viewBox="0 0 999 622" fill="none">
⟨path id="signature" d="M9 300.5C53.9664 263.275..." stroke="#0563bb" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
...
</svg></div>
</h1>
</section>Upon running this code, you will see two distinct elements:
Text that needs to be displayed and centered on small devicesSample Textwhich must be visible on larger devices.
The goal is to ensure that the Sample Text with signature displays flawlessly on larger screens, while
Text that needs to be displayed and centered on small devicesExpected Result
For screen sizes ranging from min-width: 320px to max-width: 1024px (ideal for phones and tablets), the expected appearance is as follows:
However, on screens with a min-width of 1025px, only the Sample Text showcasing the signature animation should be visible.
Note: The animated signature should not appear on smaller screens; instead, only the static text as depicted in the provided image should be visible. Any recommendations on how to accomplish this task would be greatly appreciated. Thank you!