Question

我有一个预加载器，其中有四个文本动画，我想在上一个文本动画上添加一个链接，即在上一个文本动画中的“查看更多”文本上，当我单击该链接时，它将重定向我到另一个页面。或者，当四个文本动画的加载程序结束时，它将重定向我到任何其他页面或任何其他索引页面。

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Opening Sequence</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>

        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <title>Text Opening Sequence with CSS Animations</title>
        <meta name="description" content="Text Opening Sequence with CSS Animations" />



        <style type="text/css">
            /* General Demo Style */
@import url(https://fonts.googleapis.com/css?family=Dosis:200,600);
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}



/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

body {
  font-family: 'Dosis', Calibri, Arial, sans-serif;
  color: #fff;
  background: #000;
}

a {
  color: #f0f0f0;
  text-decoration: none;
}

a:hover {
  color: #fff;
}

/* Header Style */
.codrops-top {
  text-transform: uppercase;
  position: relative;
  z-index: 1000;
  font-size: 0.68em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  line-height: 2.2;
}

.codrops-top a {
  padding: 0 1em;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.2);
  display: inline-block;
}

.codrops-top a:hover {
  color: rgba(255, 255, 255, 0.9);
}

.codrops-top span.right {
  float: right;
}

.codrops-top span.right a {
  float: left;
  display: block;
}

.os-phrases h2 {
  font-family: 'Dosis', 'Lato', sans-serif;
  font-size: 70px;
  font-weight: 200;
  width: 100%;
  overflow: hidden;
  text-transform: uppercase;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  letter-spacing: 14px;
  text-align: center;
  opacity: 0;
}

.os-phrases h2,
.os-phrases h2 > span {
  height: 100%;
  /* Centering with flexbox */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.os-phrases h2 > span {
  margin: 0 15px;
}

.os-phrases h2 > span > span {
  display: inline-block;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.os-phrases h2 > span > span > span {
  display: inline-block;
  color: rgba(0, 0, 0, 0);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-animation: OpeningSequence 5.2s linear forwards;
  -moz-animation: OpeningSequence 5.2s linear forwards;
  animation: OpeningSequence 5.2s linear forwards;
}

.os-phrases h2:nth-child(2) > span > span > span {
  -webkit-animation-delay: 5s;
  -moz-animation-delay: 5s;
  animation-delay: 5s;
}

.os-phrases h2:nth-child(3) > span > span > span {
  -webkit-animation-delay: 10s;
  -moz-animation-delay: 10s;
  animation-delay: 10s;
}


@-webkit-keyframes OpeningSequence {
  0% {
    text-shadow: 0 0 50px #fff;
    letter-spacing: 80px;
    opacity: 0;
    -webkit-transform: rotateY(-90deg);
  }
  50% {
    text-shadow: 0 0 1px #fff;
    letter-spacing: 14px;
    opacity: 0.8;
    -webkit-transform: rotateY(0deg);
  }
  85% {
    text-shadow: 0 0 1px #fff;
    opacity: 0.8;
    -webkit-transform: rotateY(0deg) translateZ(100px);
  }
  100% {
    text-shadow: 0 0 10px #fff;
    opacity: 0;
    -webkit-transform: translateZ(130px);
    pointer-events: none;
  }
}
@-moz-keyframes OpeningSequence {
  0% {
    text-shadow: 0 0 50px #fff;
    letter-spacing: 80px;
    opacity: 0.2;
    -moz-transform: rotateY(-90deg);
  }
  50% {
    text-shadow: 0 0 1px #fff;
    letter-spacing: 14px;
    opacity: 0.8;
    -moz-transform: rotateY(0deg);
  }
  85% {
    text-shadow: 0 0 1px #fff;
    opacity: 0.8;
    -moz-transform: rotateY(0deg) translateZ(100px);
  }
  100% {
    text-shadow: 0 0 10px #fff;
    opacity: 0;
    -moz-transform: translateZ(130px);
    pointer-events: none;
  }
}
@keyframes OpeningSequence {
  0% {
    text-shadow: 0 0 50px #fff;
    letter-spacing: 80px;
    opacity: 0.2;
    transform: rotateY(-90deg);
  }
  50% {
    text-shadow: 0 0 1px #fff;
    letter-spacing: 14px;
    opacity: 0.8;
    transform: rotateY(0deg);
  }
  85% {
    text-shadow: 0 0 1px #fff;
    opacity: 0.8;
    transform: rotateY(0deg) translateZ(100px);
  }
  100% {
    text-shadow: 0 0 10px #fff;
    opacity: 0;
    transform: translateZ(130px);
    pointer-events: none;
  }
}
.os-phrases h2:nth-child(4) > span > span > span {
  font-size: 30px;
  -webkit-animation: FadeIn 4s linear 14s forwards;
  -moz-animation: FadeIn 4s linear 14s forwards;
  animation: FadeIn 4s linear 14s forwards;
}

@-webkit-keyframes FadeIn {
  0% {
    opacity: 0;
    text-shadow: 0 0 50px #fff;
  }
  100% {
    opacity: 0.8;
    text-shadow: 0 0 1px #fff;
  }
}
@-moz-keyframes FadeIn {
  0% {
    opacity: 0;
    text-shadow: 0 0 50px #fff;
  }
  100% {
    opacity: 0.8;
    text-shadow: 0 0 1px #fff;
  }
}
@keyframes FadeIn {
  0% {
    opacity: 0;
    text-shadow: 0 0 50px #fff;
  }
  100% {
    opacity: 0.8;
    text-shadow: 0 0 1px #fff;
  }
}
/* Bold words */
.os-phrases h2:first-child .word3,
.os-phrases h2:nth-child(2) .word2,
.os-phrases h2:nth-child(4) .word2 {
  font-weight: 600;
}

        </style>
</head>
<body>
    <div class="os-phrases" id="os-phrases">
        <h2>Sometimes it's better</h2>
        <h2>to hide</h2>
        <h2>in order to </h2>   
        <h2>kill evils.<a href="asddff">View More</a> </h2>             
    </div>

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.6.1/jquery.lettering.min.js'></script>
<script>
    $("#os-phrases > h2")
    .css('opacity', 1).lettering( 'words' )
    .children( "span" ).lettering()
    .children( "span" ).lettering();
</script>

</body>
</html>

Answer 1

一种解决方案可能是在最后一个h2的动画结束单击事件时添加“ animationend”事件=>如果您需要有关“ animationend”事件https://www.w3schools.com/jsref/event_animationend.asp的更多信息，请参见此页面。

为此，我将ID添加到最后一个h2并在动画结束时放置一个on()事件（我使用了one()，因为最后一次动画被触发了18次（一个代表字母=> jquery.lettering 插件在每个字母上添加一个跨度），并且知道一个字母的动画何时结束就足够了，因为最后一个字母的动画都是相同的h2。

这是代码：

$("#link").one("animationend", function(e){
   $(this).css({"cursor":"pointer"}).on("click", function(){
      window.location.href = "http://stackoverflow.com";
   })
});

...这是您的美丽动画！ ;）

$("#link").one("animationend", function(e){
  $(this).css({"cursor":"pointer"}).on("click", function(){
    window.location.href = "http://stackoverflow.com";
  })
});

$("#os-phrases > h2")
.css('opacity', 1).lettering( 'words' )
.children( "span" ).lettering()
.children( "span" ).lettering();

/* General Demo Style */
@import url(https://fonts.googleapis.com/css?family=Dosis:200,600);
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}



/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

body {
  font-family: 'Dosis', Calibri, Arial, sans-serif;
  color: #fff;
  background: #000;
}

a {
  color: #f0f0f0;
  text-decoration: none;
}

a:hover {
  color: #fff;
}

/* Header Style */
.codrops-top {
  text-transform: uppercase;
  position: relative;
  z-index: 1000;
  font-size: 0.68em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  line-height: 2.2;
}

.codrops-top a {
  padding: 0 1em;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.2);
  display: inline-block;
}

.codrops-top a:hover {
  color: rgba(255, 255, 255, 0.9);
}

.codrops-top span.right {
  float: right;
}

.codrops-top span.right a {
  float: left;
  display: block;
}

.os-phrases h2 {
  font-family: 'Dosis', 'Lato', sans-serif;
  font-size: 70px;
  font-weight: 200;
  width: 100%;
  overflow: hidden;
  text-transform: uppercase;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  letter-spacing: 14px;
  text-align: center;
  opacity: 0;
}



.os-phrases h2,
.os-phrases h2 > span {
  height: 100%;
  /* Centering with flexbox */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.os-phrases h2 > span {
  margin: 0 15px;
}

.os-phrases h2 > span > span {
  display: inline-block;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.os-phrases h2 > span > span > span {
  display: inline-block;
  color: rgba(0, 0, 0, 0);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-animation: OpeningSequence 5.2s linear forwards;
  -moz-animation: OpeningSequence 5.2s linear forwards;
  animation: OpeningSequence 5.2s linear forwards;
}

.os-phrases h2:nth-child(2) > span > span > span {
  -webkit-animation-delay: 5s;
  -moz-animation-delay: 5s;
  animation-delay: 5s;
}

.os-phrases h2:nth-child(3) > span > span > span {
  -webkit-animation-delay: 10s;
  -moz-animation-delay: 10s;
  animation-delay: 10s;
}


@-webkit-keyframes OpeningSequence {
  0% {
    text-shadow: 0 0 50px #fff;
    letter-spacing: 80px;
    opacity: 0;
    -webkit-transform: rotateY(-90deg);
  }
  50% {
    text-shadow: 0 0 1px #fff;
    letter-spacing: 14px;
    opacity: 0.8;
    -webkit-transform: rotateY(0deg);
  }
  85% {
    text-shadow: 0 0 1px #fff;
    opacity: 0.8;
    -webkit-transform: rotateY(0deg) translateZ(100px);
  }
  100% {
    text-shadow: 0 0 10px #fff;
    opacity: 0;
    -webkit-transform: translateZ(130px);
    pointer-events: none;
  }
}
@-moz-keyframes OpeningSequence {
  0% {
    text-shadow: 0 0 50px #fff;
    letter-spacing: 80px;
    opacity: 0.2;
    -moz-transform: rotateY(-90deg);
  }
  50% {
    text-shadow: 0 0 1px #fff;
    letter-spacing: 14px;
    opacity: 0.8;
    -moz-transform: rotateY(0deg);
  }
  85% {
    text-shadow: 0 0 1px #fff;
    opacity: 0.8;
    -moz-transform: rotateY(0deg) translateZ(100px);
  }
  100% {
    text-shadow: 0 0 10px #fff;
    opacity: 0;
    -moz-transform: translateZ(130px);
    pointer-events: none;
  }
}
@keyframes OpeningSequence {
  0% {
    text-shadow: 0 0 50px #fff;
    letter-spacing: 80px;
    opacity: 0.2;
    transform: rotateY(-90deg);
  }
  50% {
    text-shadow: 0 0 1px #fff;
    letter-spacing: 14px;
    opacity: 0.8;
    transform: rotateY(0deg);
  }
  85% {
    text-shadow: 0 0 1px #fff;
    opacity: 0.8;
    transform: rotateY(0deg) translateZ(100px);
  }
  100% {
    text-shadow: 0 0 10px #fff;
    opacity: 0;
    transform: translateZ(130px);
    pointer-events: none;
  }
}
.os-phrases h2:nth-child(4) > span > span > span {
  font-size: 30px;
  -webkit-animation: FadeIn 4s linear 14s forwards;
  -moz-animation: FadeIn 4s linear 14s forwards;
  animation: FadeIn 4s linear 14s forwards;
}

@-webkit-keyframes FadeIn {
  0% {
    opacity: 0;
    text-shadow: 0 0 50px #fff;
  }
  100% {
    opacity: 0.8;
    text-shadow: 0 0 1px #fff;
  }
}
@-moz-keyframes FadeIn {
  0% {
    opacity: 0;
    text-shadow: 0 0 50px #fff;
  }
  100% {
    opacity: 0.8;
    text-shadow: 0 0 1px #fff;
  }
}
@keyframes FadeIn {
  0% {
    opacity: 0;
    text-shadow: 0 0 50px #fff;
  }
  100% {
    opacity: 0.8;
    text-shadow: 0 0 1px #fff;
  }
}
/* Bold words */
.os-phrases h2:first-child .word3,
.os-phrases h2:nth-child(2) .word2,
.os-phrases h2:nth-child(4) .word2 {
  font-weight: 600;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.6.1/jquery.lettering.min.js'></script>


<div class="os-phrases" id="os-phrases">
    <h2>Sometimes it's better</h2>
    <h2>to hide</h2>
    <h2>in order to </h2>   
    <h2 id="link">kill evils.View More </h2>             
</div>

在预加载器文本中添加链接

1 个答案: