Heim  >  Fragen und Antworten  >  Hauptteil

Skalieren Sie den Text mit Übergang an die Browsergröße

Ich habe einen Text, dessen Größe ich auf 100 % der Browsergröße ändern möchte, wenn ich mit der Maus über die Schaltfläche fahre. Wie kann ich dafür sorgen, dass dieser Text in den Browser/Container passt?

Ich kenne die Verwendung von font size ,您可以执行类似 font-size:100vw, aber die Animation der Schriftgröße ist sehr instabil, sodass ich diese Methode nicht verwenden kann.

http://jsfiddle.net/0n15mfyL/

Für diejenigen, die sich über Dithering wundern: Es fällt auf, wenn die Schriftart verkleinert wird: http://jsfiddle.net/rbk48upd/

P粉459578805P粉459578805424 Tage vor682

Antworte allen(1)Ich werde antworten

  • P粉729518806

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

    我正在考虑 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>

    Antwort
    0
  • StornierenAntwort