Question

我找到了一个我想从Codepen中使用的完美文本交换动画，唯一的问题是它会在悬停时交换文本，而我需要它是自动的（定时的），有人知道如何从悬停更改它吗定时？，然后添加2个以上可交换字？同样，如果有人对这些动画样式了解任何优秀的图书馆，也很高兴知道到处都是，但还没有找到很多好的例子。

jQuery(document).ready(function() {
  jQuery(".titleWrapper").addClass("ready");

  jQuery(".titleWrapper h1").each(function() {
    var fullString;
    var characters = jQuery(this).text().split("");

    $this = jQuery(this);
    $this.empty();
    $.each(characters, function(i, el) {
      if (el == " ") {
        el = "&nbsp;"
      };
      $this.append("<span>" + el + "</span");
    });

  });

});

@import url('https://fonts.googleapis.com/css?family=Montserrat');
body {
  background: #fafafa;
  font-size: 0;
  position: relative;
  height: 500px;
}

.titleWrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  height: 80px;
  overflow: hidden;
  width: 100%;
  text-align: center;
}

h1 {
  color: #292929;
  font-size: 80px;
  margin: 0;
  padding: 0;
  line-height: 80px;
  height: 80px;
  position: relative;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  word-space: 4em;
  letter-spacing: 0.05em;
}

h1 span {
  position: relative;
  display: inline-block;
  transform: translateY(100%);
  transition: all 0.25s cubic-bezier(0.65, 0, 0.21, 1.47) 0s;
}

.titleWrapper.ready h1 span {
  transform: translateY(0%);
}

h1.first span {
  background: #fafafa;
  position: relative;
  z-index: 5;
}

h1.second span {
  position: relative;
  z-index: 1;
}

$num: 1;
@while $num < 20 {
  h1.first span:nth-of-type(#{$num}) {
    transition-delay: 0.02s * $num;
  }
  h1.second span:nth-of-type(#{$num}) {
    transition-delay: 0.03s * $num + 0.05;
  }
  $num: $num+1;
}

.titleWrapper.ready:hover h1.first span {
  transform: translateY(-100%);
}

.titleWrapper.ready:hover h1.second span {
  transform: translateY(-100%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="titleWrapper">
  <h1 class="first">Hello</h1>
  <h1 class="second">World</h1>
</div>

更新

我添加了一些jquery来添加名为.hover的类，并在几秒钟后将其删除，效果很好，只有重复执行才会很棒，因此它会在2秒后不断添加和删除该类，对您有所帮助赞赏，

(function($){

    $.fn.extend({ 

        addTemporaryClass: function(className, duration) {
            var elements = this;
            setTimeout(function() {
                elements.removeClass(className);
            }, duration);

            return this.each(function() {
                $(this).addClass(className);
            });
        }
    });

})(jQuery);


$("#a").parent().addTemporaryClass("hover", 2000);

id="a"是单词“ Hello”的第一个<h1>标记

Answer 1

您可以试试吗？如果添加更多单词，只需调整动画时间和翻译值即可。

编辑

请参见animation元素中的.titleWrapper.ready h1 span属性，并为动画添加了@keyframes swap。还更改了文本并添加了更多单词。

jQuery(document).ready(function() {
  jQuery(".titleWrapper").addClass("ready");

  jQuery(".titleWrapper h1").each(function() {
    var fullString;
    var characters = jQuery(this).text().split("");

    $this = jQuery(this);
    $this.empty();
    $.each(characters, function(i, el) {
      if (el == " ") {
        el = "&nbsp;"
      };
      $this.append("<span>" + el + "</span");
    });

  });

});

@import url('https://fonts.googleapis.com/css?family=Montserrat');
body {
  background: #fafafa;
  font-size: 0;
  position: relative;
  height: 500px;
}

.titleWrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  height: 80px;
  overflow: hidden;
  width: 100%;
  text-align: center;
}

h1 {
  color: #292929;
  font-size: 80px;
  margin: 0;
  padding: 0;
  line-height: 80px;
  height: 80px;
  position: relative;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  word-space: 4em;
  letter-spacing: 0.05em;
}

h1 span {
  position: relative;
  display: inline-block;
  transform: translateY(100%);
  transition: all 0.25s cubic-bezier(0.65, 0, 0.21, 1.47) 0s;
}

.titleWrapper.ready h1  span{
  animation: swap 1.5s linear 0s infinite 
  
}

@keyframes swap {
  0%{
     transform: translateY(0%);
  }
  
  100%{
     transform: translateY(-400%);
  }
}

h1.first span {
  background: #fafafa;
  position: relative;
  z-index: 5;
}

h1.second span {
  position: relative;
  z-index: 1;
}

$num: 1;
@while $num < 20 {
  h1.first span:nth-of-type(#{$num}) {
    transition-delay: 0.02s * $num;
  }
  h1.second span:nth-of-type(#{$num}) {
    transition-delay: 0.03s * $num + 0.05;
  }
  $num: $num+1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="titleWrapper">
  <h1><span>My</span></h1>
  <h1><span>Name</span></h1>
  <h1><span>Is</span></h1>
  <h1><span>AMY</span></h1>
  <h1><span>My</span></h1>
</div>

Answer 2

通过模拟悬停然后在3s之后将其删除并在6s之后循环进行修复，仅适用于2个字，因此，如果有人可以对其进行扩展以使其工作更多，那将是不错的选择，但这将起作用，仅更改CSS :hover到.hover，并将id="a"添加到HTML中的h1标签之一，以使其循环到悬浮类，

(function($){

    $.fn.extend({ 

        addTemporaryClass: function(className, duration) {
            var elements = this;
            setTimeout(function() {
                elements.removeClass(className);
            }, duration);

            return this.each(function() {
                $(this).addClass(className);
            });
        }
    });

})(jQuery);



function heroLoop(){
       $("#a").parent().addTemporaryClass("hover", 3000);
       x = setTimeout("heroLoop()", 6000);
}   
heroLoop();

将文本交换动画从悬停更改为定时

2 个答案: