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

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

转载作者：行者123 更新时间：2023-11-28 14:07:02

我正在制作故障文字效果，效果非常好。
现在我正在尝试创建一个书写效果，效果也非常好!
但是两者一起都有一个小错误。

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

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

/*----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 - useEffect setInterval 和 setState 中的 Bug

文章推荐： javascript - 表格宽度/div 不正确

文章推荐： javascript - Vue router 不会重新初始化子组件

sql-server - 为什么 UPDATE .WRITE() 仅在我使用 [column].WRITE() 时才有效，而不是 [table].[column].WRITE()？
我正在执行 UPDATE .WRITE() 语句，并发现它显然只有在您像这样定义它时才有效: string sql = "UPDATE [dbo].[Table] SET [Column].WRITE
c - 使用一系列 write() 而不是单个 write()
我在 Unix 系统上用 C 编程。我知道: write(fd,"ABCD",4); 比这样做更好: write(fd, "A", 1); write(fd, "B", 1); write(fd, "
GoLang, "hash.Write", "write()"函数是从哪里来的？
func hash(s string) uint32 { h := fnv.New32a() h.Write([]byte(s)) return h.Sum32() } 对于这
javascript - Response.write 与 Document.write
在经典的 asp 页面中，有人告诉我您可以使用 vbscript 或 jscript。而 jscript 就是 javascript。所以我不确定 Response.Write、Response.W
javascript - stdin.write 抛出错误 : write EPIPE
当 openssl 子进程尝试 write() 到本地目录时，我收到此错误。在调用 write() 之前连接已关闭。它没有与 ssl 连接，因为我什至无法从 nodejs 文档启动示例代码。我错过了
java - writing 和 writing with flush 有什么区别？
最近我在试验netty。我遇到了以下问题: ctx.channel().write(new TextWebSocketFrame("hello")) 没有在客户端返回 hello，但是 ctx.cha
python - write 和 tempfile.write 的区别
请解释以下内容: def feed(data): import os print "DATA LEN: %s" % len(data) f = open("copy", "w") f.
.net - debug.write 和 Trace.write 有什么区别？
有什么区别debug.write 和 Trace.write ?每个应该什么时候使用？最佳答案在典型的发布构建配置中，Debug class 被禁用并且什么都不做。 Trace但是，仍然可以在发行
c# - Stream.Write 多次或连接字符串和 Stream.Write 一次更好吗？
我只是想知道，就性能而言，哪个更好(我在 FileStream 中使用 StreamWriter): 多次调用 Stream.Write(): StreamWriter sw = new Stream
c# - HttpResponse.Write 与 StringWriter.Write 有何不同？
我发现自己写给 stringwriter，然后在函数末尾执行 resp.Write(sw.ToString())。这是不必要的吗？如果我多次使用 HttpResponse.Write，即使我的页面是
javascript - win.document.write ('content' );无法读取未定义的属性 'write'
我正在尝试通过 JavaScript 文件从 electron 打开一个新窗口，它可以工作，并打开了新窗口，但我无法将 HTML/文本写入新文件。我收到那个错误: Cannot read proper
c++ - Qt QIODevice::write/QTcpSocket::write 和写入的字节
我们对 QIODevice::write 的一般行为和具体的 QTcpSocket 实现感到非常困惑。有一个 similar question已经，但答案并不令人满意。主要的混淆源于分别提到的 byt
fortran - Fortran 中 write(*,*) 和 write(6,*) 的区别
我知道这听起来像是一个愚蠢的问题: write(*,*) 和 write(6,*) ?我在我研究所的 super 计算机上运行一个复杂的代码，它通过一个不同于 6 的单元号输出一个数据文件，显然编译的
rust - 对我的可写类型使用 fmt::Write 或 io::Write trait？
我有一个结构体，它可以通过一系列复杂的方法调用转换为文本，其中包含大量 write!调用。此文本可以写入文件或调试日志。我正在决定是否使用 fmt::Write 或 io::Write .我不能真正使
c - 当我尝试使用 write (man 2 write) 函数时，为什么这段代码会卡住？
已关闭。这个问题是 not reproducible or was caused by typos 。目前不接受答案。这个问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-top
`read()` 后面可以直接跟 `write()` 吗？ `write()` 后面可以直接跟 `read()` 吗？
In the C standard library, an output can't be followed by an input and vice versa. 对于Linux API，可以在re
javascript - 如何 document.write 然后在延迟 document.write 之后再次
我希望能够为一件事做 document.write。然后延迟半秒，然后再记录。写一些。你知道这是否可能吗？而且，如果是这样，怎么办？到目前为止，我已经尝试过了，但没有奏效: document.writ
javascript - 为什么从 onclick 属性调用的函数 write() 解析为 document.write()？
为什么通过 onclick 属性调用的 write() 函数解析为 document.write() 并替换文档？有什么办法可以阻止这种情况发生吗？ Write Function Alternat
Python 3 : write method vs. os.write 返回的字节数
我想创建一个包含多个“页面”的文本文件，并将每个页面的字节偏移量记录在一个单独的文件中。为此，我将字符串打印到主输出文件并使用 bytes_written += file.write(str) 计算字
c# - 一次构建一个大字符串并将其传递给 response.write 或为每个片段调用 response.write 是否更有效
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 8 年前。 Improve this qu

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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

实例: