javascript - jQuery - 结合 Glitch Effect 和 Write Effect 是有问题的

标签 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>

最佳答案

技巧是在 function typeIn() 中使用 $('.textglitch').mouseenter().mouseleave()。

目标是模拟一个假的悬停事件并使用当前键入的文本调用动画 Glitch Effect。

实例:

/*----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>

关于javascript - jQuery - 结合 Glitch Effect 和 Write Effect 是有问题的，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57056977/

上一篇：javascript - CodeMirror更改模式没有样式

下一篇：javascript - HTML Canvas 元素不显示图像

相关文章：

html - 如何在不使用 float 的情况下正确对齐此导航栏？

html - CSS 中媒体查询的奇怪行为。从其他语句继承属性值

javascript - 如何使用 Flask 将 JavaScript 连接到 Python 脚本？

javascript - 尝试使用 onclick 事件提交表单，并在 formData 中附加值

javascript - 根据另一个选择选项更改显示哪个选择，并保持相同的选项值

jquery - fancybox 中的 Jscrollpane 不起作用

javascript - 在不触发 select_node 事件的情况下选择 jsTree 节点

javascript - 如何在iOS浏览器中录制音频？

javascript - 如何显示非模态/非模态 HTML/JavaScript 对话

jquery - 导航 - :hover and a:selected 上的图像

©2024 IT工具网  联系我们