javascript - 在预加载器文本中添加链接
问题描述
我有一个预加载器,其中有四个文本动画,我想在最后一个文本动画上添加一个链接,即在最后一个文本动画中的“查看更多”文本上添加一个链接,当我点击该链接时,它会将我重定向到另一个页面。或者当四个文本动画的加载器结束时,它会将我重定向到任何其他页面或任何其他索引页面。
<!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>
解决方案
一个解决方案可能是在最后一个 h2 的动画完成单击事件时添加“animationend”事件 => 如果您需要有关“animationend”事件的更多信息https://www.w3schools.com/jsref/event_animationend,请参阅此页面。 ASP。
为此,我在最后一个 ID 添加一个 ID,h2
并在其动画完成时放置一个on()
事件(我使用one()
,因为最后一个动画被触发 18 次(一个用于 letter=> 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>
推荐阅读
- android - Firebase 应用分发 - 找不到 APK。确保首先通过运行 ./gradlew assemble[Variant] 构建
- java - service.SecurityServiceImpl 中的字段 authenticationManager 需要一个 'org.springframework.security.authentication.AuthenticationManager' 类型的 bean
- python - 具有高级重写和简化功能的 SymPy
- c++ - 保证统一支撑数组初始化的复制省略 - 自 C++17 以来这不应该是强制性的吗?
- python - 如何将不同的列表减少到完全相同的长度?
- reactjs - 我不能在 .js 文件中使用 html 标签(jsx 代码)
- snakemake - 大型工作流的 DAG 完成后 Snakemake 挂起
- hadoop - 物理节点和虚拟节点有什么区别?
- java - Java -Executable JAR- 创建 FileWriter 时出错:FileNotFoundException 访问被拒绝
- python - 有什么方法可以知道 Python 中的单独程序可用的命令行选项吗?