將html元素相對於另一個放置，以阻止元素跳來跳去

Question

我正在一個網站上工作，在該網站上我寫了一些JavaScript來為下面看到的大的居中居中文本創建“打字機”類型效果。 腳本會對文本進行動畫處理，以便逐字母鍵入正向字母，然后在開始新單詞之前刪除文本。 我遇到的問題是，當刪除文本時，包含文本的段落元素為空，並且下面的按鈕“跳轉”到文本所在的位置。 我想知道一種解決此問題的好方法，無論是使用javascript還是使用簡單的CSS定位修復程序。 我想知道是否可能有一種相對於頂部“我們創建數字產品文本”的按鈕進行定位的方法？

這是我的html：

<div class="agency-hero">
    <section class="container">
      <div class="hero-text customFadeInUp">
        <h1 class="tagLine">
          We create digital products
        </h1>
        <p><span class="txt-type " data-wait="2000" data-words='[" "," Websites "," Web Applications "]'></span></p>
        <a href="agency-portfolio-4.html" class="stayPut">
          See our work
        </a>
      </div>
    </section>
  </div>

和用於使文本動畫化的javascript：

const TypeWriter = function(txtElement, words, wait = 3000){
    this.txtElement = txtElement;
    this.words = words;
    this.txt='';
    this.wordIndex=0;
    this.wait=parseInt(wait,10);
    this.type();
    this.isDeleting = false;
}

// Type Method
TypeWriter.prototype.type = function() {

    //current index of word
    const current = this.wordIndex % this.words.length;
    //get Full text
    const fullTxt = this.words[current];
    //check for if currently in the deleting state or not
    if(this.isDeleting){
        this.txt = fullTxt.substring(0,this.txt.length -1);
    }else{
        //add a character
        this.txt = fullTxt.substring(0,this.txt.length +1);
    }

    //insert txt into element
    this.txtElement.innerHTML = `<span class="txt">${this.txt}</span>`;

    // Initial Type Speed
    let typeSpeed = 300;

    if(this.isDeleting){
        typeSpeed /= 2;
    }

    // If word is complete then move on to next word
    if(!this.isDeleting && this.txt == fullTxt){
        //make pause at the end
        typeSpeed = this.wait;
        //set Delete to True
        this.isDeleting = true;
    } else if(this.isDeleting && this.txt == ''){
        this.isDeleting=false;
        //move to next word
        this.wordIndex ++;
        // Pause before start typing
        typeSpeed = 500;
    }
    setTimeout(() => this.type(),typeSpeed);
}
// Init on DOM Load

document.addEventListener('DOMContentLoaded',init);

//Init App

function init(){
    const txtElement = document.querySelector('.txt-type');
    const words = JSON.parse(txtElement.getAttribute('data-words'));
    const wait = txtElement.getAttribute('data-wait');

    new TypeWriter(txtElement, words, wait);
}

Answer 1

您可以使用CSS屬性min-height來保持兩個文本之間的期望間隔。 看一下下面的代碼。

含文字-

 body { background-color: lightblue; } h1 { color:black; text-align: center; } p { font-family: verdana; font-size: 40px; background-color:red; min-height:20px; } p+p { font-size: 20px; background-color:orange; } 

 <h1>We create Digital Products</h1> <p>Type Writer</p> <p>See my work</p> 

沒有文字

 body { background-color: lightblue; } h1 { color:black; text-align: center; } p { font-family: verdana; font-size: 40px; background-color:red; min-height:20px; } p+p { font-size: 20px; background-color:orange; } 

 <h1>We create Digital Products</h1> <p></p> <p>See my work</p> 

p是一個塊元素，其高度是根據其內容來計算的。 希望能幫助到你。

Answer 2

如果您要相對定位，請使用css position屬性和一個relative值，並使用top和left屬性對其進行更改。 但是，您也可以使用transform更改位置。

例如：

button {
  position:relative;
  top:50vh;
}
//Or
button {
  transform: translate(0, 50vh);
}

您可以根據需要進行更改。 我認為，如果我正確閱讀了它，您似乎希望將其保留在此處，因此我將使用絕對定位。

如：

button {
  position:absolute;
  left:50%;
  top:90vh;
  //This won't move no matter what
}

Answer 3

您可以給您的<p>定義高度：

.hero-text p {
    height: 20px;
}

 const TypeWriter = function(txtElement, words, wait = 3000){ this.txtElement = txtElement; this.words = words; this.txt=''; this.wordIndex=0; this.wait=parseInt(wait,10); this.type(); this.isDeleting = false; } // Type Method TypeWriter.prototype.type = function() { //current index of word const current = this.wordIndex % this.words.length; //get Full text const fullTxt = this.words[current]; //check for if currently in the deleting state or not if(this.isDeleting){ this.txt = fullTxt.substring(0,this.txt.length -1); }else{ //add a character this.txt = fullTxt.substring(0,this.txt.length +1); } //insert txt into element this.txtElement.innerHTML = `<span class="txt">${this.txt}</span>`; // Initial Type Speed let typeSpeed = 300; if(this.isDeleting){ typeSpeed /= 2; } // If word is complete then move on to next word if(!this.isDeleting && this.txt == fullTxt){ //make pause at the end typeSpeed = this.wait; //set Delete to True this.isDeleting = true; } else if(this.isDeleting && this.txt == ''){ this.isDeleting=false; //move to next word this.wordIndex ++; // Pause before start typing typeSpeed = 500; } setTimeout(() => this.type(),typeSpeed); } // Init on DOM Load document.addEventListener('DOMContentLoaded',init); //Init App function init(){ const txtElement = document.querySelector('.txt-type'); const words = JSON.parse(txtElement.getAttribute('data-words')); const wait = txtElement.getAttribute('data-wait'); new TypeWriter(txtElement, words, wait); } 

 .hero-text p { height: 20px; } 

 <div class="agency-hero"> <section class="container"> <div class="hero-text customFadeInUp"> <h1 class="tagLine"> We create digital products </h1> <p><span class="txt-type " data-wait="2000" data-words='[" "," Websites "," Web Applications "]'></span></p> <a href="agency-portfolio-4.html" class="stayPut"> See our work </a> </div> </section> </div>