stackoom
  简体   繁体   中英

Make the text animation responsive

 原文  2022-12-20 13:45:34  6   1    javascript/ html/ css/ responsive-design/ responsive

Question

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 class="main">
    
      <div class="text-animation_001">
        <div class="sentence"></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.

1 answers

solution1
 0 ACCPTED  2022-12-20 14:33:54

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 class="main">
        
          <div class="text-animation_001">
            <div class="sentence"></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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to make a JavaScript animation responsive? How to make a css keyframe step animation responsive? How can I make this animation responsive? Is there a proper way to make responsive text? Make text in Bootsrap navbar responsive How to make text responsive in html? How to make responsive text in a div? How to make a responsive canvas animation using the D3 library Make div responsive and control text alignment How to make text responsive to div size?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM