Maison  >  Questions et réponses  >  le corps du texte

Ajuster le texte à la taille du navigateur avec la transition

J'ai du texte que je souhaite redimensionner à 100 % du navigateur lorsque je survole le bouton. Comment puis-je adapter ce texte au navigateur/conteneur ?

Je sais utiliser font size ,您可以执行类似 font-size:100vw mais l'animation de la taille de la police est très instable donc je ne peux pas utiliser cette méthode.

http://jsfiddle.net/0n15mfyL/

Pour ceux qui s'interrogent sur le tramage, cela se remarque lorsque la police est réduite : http://jsfiddle.net/rbk48upd/

P粉459578805P粉459578805423 Il y a quelques jours680

répondre à tous(1)je répondrai

  • P粉729518806

    P粉7295188062023-09-09 09:58:14

    J'envisage requestAnimationFrame()

    const 
      hoverMe        = document.querySelector('#hover-me')
    , animTextSizing = document.querySelector('#anim-text-sizing')
    , txtSizeStart   = parseInt(window.getComputedStyle(animTextSizing).getPropertyValue('font-size'))
      ;
    let sizeLimit = 0,  currentTxtSize = txtSizeStart
      ;
    hoverMe.onmouseover =_=>
      {
      sizeLimit = document.body.clientWidth;
      animGrow();
      }
    hoverMe.onmouseout =_=>
      {
      sizeLimit = txtSizeStart;
      currentTxtSize++
      animReduce();
      }
    function animGrow()
      {
      animTextSizing.style['font-size'] = `${++currentTxtSize}px`;
    
      if ( animTextSizing.clientWidth < sizeLimit)
        requestAnimationFrame(animGrow);
      }
    function animReduce()
      {
      animTextSizing.style['font-size'] = `${--currentTxtSize}px`;
    
      if ( currentTxtSize > sizeLimit)
        requestAnimationFrame(animReduce);
      }
    * {
      margin  : 0;
      padding : 0;
    }
    #anim-text-sizing {
      font-size   : 30px;
      width       : fit-content;
      white-space : nowrap;
      background  : #aabfe5;
      }
    #hover-me {
      position   : fixed;
      background : red;
      color      : white;
      top        : 50%;
      left       : 50%;
      padding    : .5rem;
      cursor  : zoom-in;
      }
      <div id="hover-me">Hover me</div>
      <div id="anim-text-sizing"> Welcome to this Page </div>

    répondre
    0
  • Annulerrépondre