I am stuck with the code for days. I have a text animation which is not responsive .This HTML code is setting up a text animation on a webpage. It starts by importing the Montserrat font from Google Fonts and then setting up some basic styles for the body element.
Next, it defines a class called "text-animation_001" which will be used to style the text that will be animated. It sets the font family, font weight, padding, font size, and background color for the element. It also sets the width to 100% so that it takes up the full width of its parent container.
Inside of the "text-animation_001" class, there is another class called "sentence" which will be used to contain the individual letters of the text. This class is set up to display the letters as a row, aligned to the left, with the bottom of the letters aligned to the bottom of the container.
Each letter of the text is contained within a "span" element, and they are given some initial styles to make them invisible and offset from their final position. The "transition" property is used to specify that the letters should smoothly animate to their final styles when they are revealed.
There are also some media queries at the end of the styles block which adjust the scale of the text and its container for smaller screen sizes.
Finally, there is a script at the bottom of the HTML file which sets up the animation by splitting the text into individual letters, creating elements for each letter, and adding them to the page. It also sets up some variables for the primary letters (which will be revealed first) and the golden letters (which will have a different color). It then uses a loop to reveal the letters one by one, with a delay between each letter.
It is responsive for laptop, tablet but not for mobile devices. I will share the code below:`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- <link rel="stylesheet" href="style.css" /> -->
<style>
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap");
body {
margin: 0;
}
.text-animation_001 {
font-family: Montserrat, sans-serif;
font-weight: 600;
padding: 10px;
font-size:40px;
background-color: #000ffff;
width: 100%;
}
.text-animation_001 .sentence {
display: flex;
flex-direction: row;
justify-content: left;
align-items: flex-end;
}
.text-animation_001 .sentence span {
opacity: 0;
transition: all 0.1s ease-in;
transform: translateY(-20px);
color: #dadada;
max-width: 50px;
}
.text-animation_001 .sentence span:nth-child(15),
.text-animation_001 .sentence span:nth-child(22),
.text-animation_001 .sentence span:nth-child(29) {
color: #d8ae5a;
}
.text-animation_001 .sentence span:nth-child(14) {
font-size: 50px;
}
.text-animation_001 .sentence span:nth-child(7),
.text-animation_001 .sentence span:nth-child(10),
.text-animation_001 .sentence span:nth-child(14),
.text-animation_001 .sentence span:nth-child(18),
/* .text-animation_001 .sentence span:nth-child(21), */
.text-animation_001 .sentence span:nth-child(27) {
letter-spacing: 10px;
}
@media screen and (max-width: 768px) {
.sentence, .text-animation_001,.text-animation_001 .sentence{
transform: scale(.8);
transform-origin:left center;
}
}
@media screen and (max-width: 600px) {
.sentence,.text-animation_001 .sentence,.text-animation_001 {
transform: scale(0.6);
transform-origin:left center;
}
}
@media screen and (max-width: 480px) {
.sentence ,.text-animation_001 .sentence,.text-animation_001{
transform: scale(0.69);
overflow: hidden
transform-origin:left center;
}
</style>
</head>
<body>
<div >
<div >
<div ></div>
</div>
<script>
const animation_sentence = "Welcome to Dr.Paye AlMeeran Centre";
const animation_letters = animation_sentence.split("");
const animation_primaryLeters = [
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 15, 22, 29,
];
const animation_goldenLeters = [15, 22, 29];
const animation_textEl = document.querySelector(
".text-animation_001 .sentence"
);
animation_letters.forEach((letter) => {
animation_textEl.innerHTML = `<span>${letter}</span>`;
});
const animation_lettersEls = document.querySelectorAll(
".text-animation_001 .sentence span"
);
const animationIteration = () => {
animation_lettersEls.forEach((letter, index) => {
setTimeout(() => {
letter.style.transitionDuration = "0.1s";
letter.style.transform = `translateY(0px)`;
letter.style.opacity = 1;
}, index * 40);
setTimeout(() => {
letter.style.transitionDuration = "0.5s";
if (!animation_primaryLeters.includes(index 1)) {
letter.style.opacity = 0;
letter.style.transform = `scale(0.5) rotate(-15deg)`;
letter.style.maxWidth = 0;
}
if (animation_goldenLeters.includes(index 1)) {
letter.style.fontSize = `50px`;
}
}, 5000);
setTimeout(() => {
letter.style.transitionDuration = "0.1s";
letter.style.opacity = 0;
}, 10000);
setTimeout(() => {
letter.style.transitionDuration = "0.1s";
letter.style.transform =
"translateY(-20px) scale(1) rotate(0deg)";
letter.style.maxWidth = "50px";
if (index === 13) letter.style.fontSize = `50px`;
else letter.style.fontSize = `40px`;
}, 10500);
});
};
animationIteration();
setInterval(animationIteration, 11000);
</script>
</div>
</body>
</html>
I tried to give transform scale property but the font got again smaller only.It didnt become responsive.
CodePudding user response：
i added : flex-flow: wrap; in .text-animation_001 .sentence line number 29 now you can remove scale in CSS if you want.
Let me know if this works for you
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- <link rel="stylesheet" href="style.css" /> -->
<style>
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap");
body {
margin: 0;
}
.text-animation_001 {
font-family: Montserrat, sans-serif;
font-weight: 600;
padding: 10px;
font-size:40px;
background-color: #000ffff;
width: 100%;
}
.text-animation_001 .sentence {
display: flex;
flex-direction: row;
justify-content: left;
align-items: flex-end;
flex-flow: wrap;
}
.text-animation_001 .sentence span {
opacity: 0;
transition: all 0.1s ease-in;
transform: translateY(-20px);
color: #dadada;
max-width: 50px;
}
.text-animation_001 .sentence span:nth-child(15),
.text-animation_001 .sentence span:nth-child(22),
.text-animation_001 .sentence span:nth-child(29) {
color: #d8ae5a;
}
.text-animation_001 .sentence span:nth-child(14) {
font-size: 50px;
}
.text-animation_001 .sentence span:nth-child(7),
.text-animation_001 .sentence span:nth-child(10),
.text-animation_001 .sentence span:nth-child(14),
.text-animation_001 .sentence span:nth-child(18),
/* .text-animation_001 .sentence span:nth-child(21), */
.text-animation_001 .sentence span:nth-child(27) {
letter-spacing: 10px;
}
@media screen and (max-width: 768px) {
.sentence, .text-animation_001,.text-animation_001 .sentence{
transform: scale(.8);
transform-origin:left center;
}
}
@media screen and (max-width: 600px) {
.sentence,.text-animation_001 .sentence,.text-animation_001 {
transform: scale(0.6);
transform-origin:left center;
}
}
@media screen and (max-width: 480px) {
.sentence ,.text-animation_001 .sentence,.text-animation_001{
transform: scale(0.69);
overflow: hidden
transform-origin:left center;
}
</style>
</head>
<body>
<div >
<div >
<div ></div>
</div>
<script>
const animation_sentence = "Welcome to Dr.Paye AlMeeran Centre";
const animation_letters = animation_sentence.split("");
const animation_primaryLeters = [
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 15, 22, 29,
];
const animation_goldenLeters = [15, 22, 29];
const animation_textEl = document.querySelector(
".text-animation_001 .sentence"
);
animation_letters.forEach((letter) => {
animation_textEl.innerHTML = `<span>${letter}</span>`;
});
const animation_lettersEls = document.querySelectorAll(
".text-animation_001 .sentence span"
);
const animationIteration = () => {
animation_lettersEls.forEach((letter, index) => {
setTimeout(() => {
letter.style.transitionDuration = "0.1s";
letter.style.transform = `translateY(0px)`;
letter.style.opacity = 1;
}, index * 40);
setTimeout(() => {
letter.style.transitionDuration = "0.5s";
if (!animation_primaryLeters.includes(index 1)) {
letter.style.opacity = 0;
letter.style.transform = `scale(0.5) rotate(-15deg)`;
letter.style.maxWidth = 0;
}
if (animation_goldenLeters.includes(index 1)) {
letter.style.fontSize = `50px`;
}
}, 5000);
setTimeout(() => {
letter.style.transitionDuration = "0.1s";
letter.style.opacity = 0;
}, 10000);
setTimeout(() => {
letter.style.transitionDuration = "0.1s";
letter.style.transform =
"translateY(-20px) scale(1) rotate(0deg)";
letter.style.maxWidth = "50px";
if (index === 13) letter.style.fontSize = `50px`;
else letter.style.fontSize = `40px`;
}, 10500);
});
};
animationIteration();
setInterval(animationIteration, 11000);
</script>
</div>
</body>
</html>