Добавить ссылку в текст прелоадера

У меня есть предварительный загрузчик, в котором есть четыре текстовых анимации, я хочу добавить ссылку на последнюю текстовую анимацию, то есть на текст «Просмотреть больше» в последней текстовой анимации, и когда я нажимаю на эту ссылку, он перенаправляет меня на другую страницу. ИЛИ, когда загрузчик четырех текстовых анимаций закончится, он перенаправит меня на любые другие страницы или любую другую страницу индекса.

<!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>

javascript html css

19.09.2018 20:29

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 1

Решением может быть добавление события «animationend», когда анимация последнего h2 завершает событие щелчка => См. Эту страницу, если вам нужна дополнительная информация о событии «animationend» https://www.w3schools.com/jsref/event_animationend.asp.

Для этого я добавляю идентификатор к последнему 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>

19.09.2018 23:21

Другие вопросы по теме

Выравнивание текста по центру внутри панели навигации

Анимация роста при загрузке

Как сделать, чтобы определенные разделы были полностью выровнены друг с другом с помощью CSS?

JQuery - показать / скрыть элементы в списке с раскрытием содержимого

Отображение наложения SCSS: ничего не отображается

Рисование css - нестандартная форма носа

Верхняя часть маржи: Chrome и Safari

Flexbox: space-between не создает пространства между элементами

Сезонный сменщик изображений (MVC и JavaScript)

Укладка с использованием системы сетки Boostrap

Добавить ссылку в текст прелоадера

Ответы 1

Другие вопросы по теме

Похожие вопросы