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来保持两个文本之间的期望间隔。看下面的代码。

带有文字-

@OnStopped

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;
}

p是一个块元素，其高度是根据其内容来计算的。希望能帮助到你。

Answer 2

如果您要相对定位，请使用css position属性（具有相对值），并使用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

您可以给.bind()指定一个高度：

<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;
}

将html元素相对于另一个放置，以阻止元素跳来跳去

3 个答案: