jQuery-结合毛刺效果和写效果是越野车

时间：2019-07-16 12:11:29

标签： javascript jquery html css

我正在制作故障文本效果，效果很好。
现在，我试图创建一种写效果，效果也很好！
但是两者都存在一个小错误。

当我将鼠标悬停在文本上时，毛刺效果会起作用，但是当书写效果在文本上添加一个字母时，这个字母就不会受到毛刺效果的影响。

如果有人能帮助我，我会很高兴！

/*----Javascript----*/
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

function randomIntFromInterval(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

async function typeIn() {
  var string = document.getElementById("title").innerHTML;
  document.getElementById("title").innerHTML = "_";
  console.log(string);
  for (j = 0; j < randomIntFromInterval(3, 7); j++) {
    await sleep(100);
    document.getElementById("title").innerHTML = document.getElementById("title").innerHTML.slice(0, -1);
    document.getElementById("title").innerHTML += "&nbsp"
    await sleep(100);
    document.getElementById("title").innerHTML = document.getElementById("title").innerHTML.slice(0, -6);
    document.getElementById("title").innerHTML += "_"
  }
  for (i = 0; i < string.length; i++) {
    for (j = 0; j < randomIntFromInterval(0, 3); j++) {
      await sleep(100);
      document.getElementById("title").innerHTML = document.getElementById("title").innerHTML.slice(0, -1);
      document.getElementById("title").innerHTML += "&nbsp"
      await sleep(100);
      document.getElementById("title").innerHTML = document.getElementById("title").innerHTML.slice(0, -6);
      document.getElementById("title").innerHTML += "_"
    }
    await sleep(randomIntFromInterval(0, 100));
    document.getElementById("title").innerHTML = document.getElementById("title").innerHTML.slice(0, -1);

    document.getElementById("title").innerHTML += string[i] + "_";
  }
  while (true) {
    document.getElementById("title").innerHTML = document.getElementById("title").innerHTML.slice(0, -1);
    document.getElementById("title").innerHTML += "&nbsp"
    await sleep(100);
    document.getElementById("title").innerHTML = document.getElementById("title").innerHTML.slice(0, -6);
    document.getElementById("title").innerHTML += "_"
    await sleep(100);
  }
}




typeIn();

/*----jQuery----*/

$(document).ready(function() {
  $('.textglitch').hover(
    function() {
      var eLtext = $(this).text(),
        eLchild = $(this).find('.textglitch-link');
      console.log(eLchild);
      eLchild.attr('data-content', eLtext);
      eLchild.toggleClass('blur');
      $(this).toggleClass('active');
    });
});

$(document).ready(function() {
  $(".button_navigation").mouseover(function() {
    $(this).children().css("background-color", "rgba(255, 255, 255, 0.99)");
    $(this).children().children().css("color", "black");
  }).mouseleave(function() {
    $(this).children().css("background-color", "transparent");
    $(this).children().children().css("color", "white");
  });
});
/*----TAGS----*/

* {
  margin: 0px;
  padding: 0px;
  font-family: 'Roboto', monospace;
}

body {
  background-color: black;
  outline: none;
  list-style: none;
  text-decoration: none;
}


/*----CLASS----*/

.normal_text {
  font-size: auto;
  margin: auto;
  text-decoration: none;
}


/*----ANIMATE----*/

.textglitch {
  position: relative;
  text-align: center;
  margin: 0 auto;
  cursor: pointer;
  z-index: 1;
  font-weight: 700;
}

.textglitch .textglitch-link {
  position: relative;
  display: inline-block;
}

.textglitch-link span {
  position: relative;
  z-index: 2;
  color: #fff;
}

.blur {
  filter: blur(1px);
  -webkit-filter: blur(1px);
}

.textglitch .textglitch-link:after,
.textglitch .textglitch-link:before {
  position: absolute;
  top: 0px;
  left: 0px;
  content: attr(data-content);
  visibility: hidden;
}

.textglitch.active .textglitch-link:after,
.textglitch.active .textglitch-link:before {
  visibility: visible;
}

.textglitch .textglitch-link:before {
  color: rgba(255, 0, 188, 0.8);
  -webkit-animation: textglitch .3s cubic-bezier(.25, .46, .45, .94) both infinite;
  animation: textglitch .3s cubic-bezier(.25, .46, .45, .94) both infinite;
}

.textglitch .textglitch-link:after {
  color: rgba(0, 255, 255, 0.8);
  -webkit-animation: textglitch .3s cubic-bezier(.25, .46, .45, .94) reverse both infinite;
  animation: textglitch .3s cubic-bezier(.25, .46, .45, .94) reverse both infinite;
}

@keyframes textglitch {
  0% {
    -webkit-transform: translate(0);
    transform: translate(0)
  }
  20% {
    -webkit-transform: translate(-3px, 3px);
    transform: translate(-3px, 3px)
  }
  40% {
    -webkit-transform: translate(-3px, -3px);
    transform: translate(-3px, -3px)
  }
  60% {
    -webkit-transform: translate(3px, 3px);
    transform: translate(3px, 3px)
  }
  80% {
    -webkit-transform: translate(3px, -3px);
    transform: translate(3px, -3px)
  }
  to {
    -webkit-transform: translate(0);
    transform: translate(0)
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
  <div class="textglitch" style="margin-top: 150px;">
    <h1 style="font-size: 40px;" class="textglitch-link"><span class="black_bg" id="title">kevwpl.ga</span></h1>
  </div>
</div>

1 个答案:

答案 0 :(得分：1)

诀窍是在$('.textglitch').mouseenter().mouseleave()内使用 function typeIn() 。

目标是模拟假的悬停事件，并使用当前键入的文本调用动画“毛刺效果”。

实时示例：

/*----Javascript----*/
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

function randomIntFromInterval(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

async function typeIn() {
  var string = document.getElementById("title").innerHTML;
  document.getElementById("title").innerHTML = "_";
  for (j = 0; j < randomIntFromInterval(3, 7); j++) {
    await sleep(100);
    document.getElementById("title").innerHTML = document.getElementById("title").innerHTML.slice(0, -1);
    document.getElementById("title").innerHTML += "&nbsp"
    await sleep(100);
    document.getElementById("title").innerHTML = document.getElementById("title").innerHTML.slice(0, -6);
    document.getElementById("title").innerHTML += "_"
  }
  for (i = 0; i < string.length; i++) {
    for (j = 0; j < randomIntFromInterval(0, 3); j++) {
      await sleep(100);
      document.getElementById("title").innerHTML = document.getElementById("title").innerHTML.slice(0, -1);
      document.getElementById("title").innerHTML += "&nbsp"
      await sleep(100);
      document.getElementById("title").innerHTML = document.getElementById("title").innerHTML.slice(0, -6);
      document.getElementById("title").innerHTML += "_"
    }
    await sleep(randomIntFromInterval(0, 100));
    document.getElementById("title").innerHTML = document.getElementById("title").innerHTML.slice(0, -1);
    document.getElementById("title").innerHTML += string[i] + "_";
    $('.textglitch').mouseenter().mouseleave();
  }
  while (true) {
    document.getElementById("title").innerHTML = document.getElementById("title").innerHTML.slice(0, -1);
    document.getElementById("title").innerHTML += "&nbsp"
    await sleep(100);
    document.getElementById("title").innerHTML = document.getElementById("title").innerHTML.slice(0, -6);
    document.getElementById("title").innerHTML += "_"
    await sleep(100);
    $('.textglitch').mouseenter().mouseleave();
  }
}

/*----jQuery----*/

$(document).ready(function() {
  typeIn();
  $('.textglitch').hover(
    function() {
      var eLtext = $(this).text();
      eLchild = $(this).find('.textglitch-link');
      eLchild.attr('data-content', eLtext);
      eLchild.toggleClass('blur');
      $(this).toggleClass('active');
    });
});

$(document).ready(function() {
  $(".button_navigation").mouseover(function() {
    $(this).children().css("background-color", "rgba(255, 255, 255, 0.99)");
    $(this).children().children().css("color", "black");
  }).mouseleave(function() {
    $(this).children().css("background-color", "transparent");
    $(this).children().children().css("color", "white");
  });
});
/*----TAGS----*/

* {
  margin: 0px;
  padding: 0px;
  font-family: 'Roboto', monospace;
}

body {
  background-color: black;
  outline: none;
  list-style: none;
  text-decoration: none;
}


/*----CLASS----*/

.normal_text {
  font-size: auto;
  margin: auto;
  text-decoration: none;
}


/*----ANIMATE----*/

.textglitch {
  position: relative;
  text-align: center;
  margin: 0 auto;
  cursor: pointer;
  z-index: 1;
  font-weight: 700;
}

.textglitch .textglitch-link {
  position: relative;
  display: inline-block;
}

.textglitch-link span {
  position: relative;
  z-index: 2;
  color: #fff;
}

.blur {
  filter: blur(1px);
  -webkit-filter: blur(1px);
}

.textglitch .textglitch-link:after,
.textglitch .textglitch-link:before {
  position: absolute;
  top: 0px;
  left: 0px;
  content: attr(data-content);
  visibility: hidden;
}

.textglitch.active .textglitch-link:after,
.textglitch.active .textglitch-link:before {
  visibility: visible;
}

.textglitch .textglitch-link:before {
  color: rgba(255, 0, 188, 0.8);
  -webkit-animation: textglitch .3s cubic-bezier(.25, .46, .45, .94) both infinite;
  animation: textglitch .3s cubic-bezier(.25, .46, .45, .94) both infinite;
}

.textglitch .textglitch-link:after {
  color: rgba(0, 255, 255, 0.8);
  -webkit-animation: textglitch .3s cubic-bezier(.25, .46, .45, .94) reverse both infinite;
  animation: textglitch .3s cubic-bezier(.25, .46, .45, .94) reverse both infinite;
}

@keyframes textglitch {
  0% {
    -webkit-transform: translate(0);
    transform: translate(0)
  }
  20% {
    -webkit-transform: translate(-3px, 3px);
    transform: translate(-3px, 3px)
  }
  40% {
    -webkit-transform: translate(-3px, -3px);
    transform: translate(-3px, -3px)
  }
  60% {
    -webkit-transform: translate(3px, 3px);
    transform: translate(3px, 3px)
  }
  80% {
    -webkit-transform: translate(3px, -3px);
    transform: translate(3px, -3px)
  }
  to {
    -webkit-transform: translate(0);
    transform: translate(0)
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
  <div class="textglitch" style="margin-top: 150px;">
    <h1 style="font-size: 40px;" class="textglitch-link"><span class="black_bg" id="title">kevwpl.ga</span></h1>
  </div>
</div>

相关问题
最新问题