Перевод промежутков за пределы экрана + переход каждого по отдельности на экране - PullRequest
Новая
       4

Перевод промежутков за пределы экрана + переход каждого по отдельности на экране

0 голосов
/ 09 июля 2020

У меня есть набор промежутков, образующих слово, где каждый промежуток представляет одну букву. Я хотел бы перевести их за пределы экрана, а затем добавить каждый промежуток с задержкой, чтобы они появлялись один за другим.

Теперь я знаю, что преобразование будет работать только с отображением блоков на промежутках, но как мне сохранить их в одной строке, чтобы они по-прежнему составляли слово?

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

Спасибо! :)

Ответы [ 2 ]

0 голосов
/ 09 июля 2020

Я использовал «css анимацию», чтобы решить эту проблему. Я также использовал элемент-оболочку «div», чтобы правильно расположить «слово». другие комментарии добавлены в код. 

.container {
    width: 75vw;
    margin: 20px auto;
    background-color: #d0d5d7;
    height: 100px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    overflow: hidden; /* this is necessary to hide words for the first view */
}

.container div {
    /* this div is used to align letters in a good position relative to ".container" */
    position: relative;
    background-color: #014dd0;
    width: 160px;
}

.container span {
    display: inline-block;
    width: 32px;
    text-align: center;
    font-size: 40px;
    position: absolute;
    top: 50px;
    -webkit-animation-name: transAni;
    animation-name: transAni;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
/*    animation-iteration-count: 2;*/
    -webkit-animation-duration: 1s;
    animation-duration: 1s; /* change this amount to animate faster or slower */
}

.container div span:nth-child(1){
    -webkit-animation-delay: 10ms;
    animation-delay: 10ms;
    left: 0%;
    color: #5daa20;
}

.container div span:nth-child(2){
    -webkit-animation-delay: 1010ms;
    animation-delay: 1010ms;   /* add delays according to "animation duration" */ 
    left: 20%;
    color: #c0c0d5;
}

.container div span:nth-child(3){
    -webkit-animation-delay: 2010ms;
    animation-delay: 2010ms;
    left: 40%;
    color: #125ca0;
}

.container div span:nth-child(4){
    -webkit-animation-delay: 3010ms;
    animation-delay: 3010ms;
    left: 60%;
    color: #7e50df;
}

.container div span:nth-child(5){
    -webkit-animation-delay: 4010ms;
    animation-delay: 4010ms;
    left: 80%;
    color: #781208;
}




@-webkit-keyframes transAni {
    0% {
        top: 50px;
    }
    
    100% {
        top: -20px;
    }
}




@keyframes transAni {
    0% {
        top: 50px;
    }
    
    100% {
        top: -20px;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>transform spans</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    

    <div class="container">
       <div>
        <span>w</span>
        <span>o</span>
        <span>r</span>
        <span>l</span>
        <span>d</span>
        </div>
    </div>
</body>
</html>

как вы могли видеть, вы можете добавлять «собственные стили» к каждому диапазону. как изменить цвет каждого.

0 голосов
/ 09 июля 2020

Вы можете использовать встроенный блок и иметь буквы в оболочке слова, переполнение которой скрыто, поэтому вам не нужно полностью переводить буквы за пределы экрана 

var toggleAnimation = function() {
  document.querySelector('.word').classList.toggle('start');
}
.word {
  font-size: 0; /* to remove the uneeded white spaces between the letters */
  overflow: hidden;
}
span {
  display: inline-block;
  font-size: 3rem;
  transform: translateX(-400px);
  transition: all;
}
span:nth-child(1) { transition-duration: .5s }
span:nth-child(2) { transition-duration: .7s }
span:nth-child(3) { transition-duration: .9s }
span:nth-child(4) { transition-duration: 1.1s }
span:nth-child(5) { transition-duration: 1.3s }

.word.start span {
  transform: translateX(0);
}
<div class="word">
  <span>H</span>
  <span>E</span>
  <span>L</span>
  <span>L</span>
  <span>O</span>
</div>

<button onClick="toggleAnimation()">Toggle animation</button>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...