Как Fade In/Out несколько текстов, используя CSS/jQuery, как на Droplr?

Я видел этот тип анимации на веб-сайте, только когда ключевые кадры CSS3 начали набирать обороты, но не смогли найти его, и я не мог его реплицировать с помощью CSS или jQuery, и здесь, где я думал, что некоторые из вас могут помощь.

Я оживил то, что я надеюсь достичь, и я включил его ниже. Я считаю, что это можно закодировать с использованием новых ключевых кадров CSS3 или jQuery.animate(); особенность. Я не знаю. Я пробовал все, что знаю, но все напрасно.

Здесь анимация GIF того, что я хотел:

GIF animation where the text "I am" is static and the word "invincible" fades out, the word "awesome" fades in, the word "awesome" fades back out, and the word "invincible" fades back in, in an infinite loop.

Я только что заметил, http://droplr.com/ использует очень похожий переход на своей домашней странице, но с несколькими скользящими эффектами. И данные (слова), которые появляются, все случайны, все время. Я хотел бы знать, как это возможно!

Ответы

Ответ 1

DEMO

Возможное решение с чистым css!

@-webkit-keyframes fade-in{
from{
    opacity:1;
    top:0px;
}
to{
    opacity:0;
    top:-5px;
}
}
.text-animated-one{
display:inline;
position:relative;
top:0px;
-webkit-animation:fade-in 1s infinite;

}
.text-animated-two{
opacity:0;
display:inline;
position:relative;
margin-left:-56px;
-webkit-animation:fade-in 1s infinite;
-webkit-animation-delay:0.5s;
}

.aggettivi{
display:inline;
width:100px;
height:100px;
}

Ответ 2

Некоторые обширные поиски и эксперименты Google привели меня к тому, что я могу ответить на собственный вопрос и как раз вовремя!

Если кто-то из вас хотел бы знать, как это можно сделать, посмотрите этот фрагмент кода CodePen, который я написал: http://codepen.io/AmruthPillai/pen/axvqB

Ответ 3

Что-то вроде этого:

JSFiddle Demo

HTML

<p>I am <span>Something</span><span class="hidden">Test22222</span></p>

CSS

.hidden {display:none;}
span { position: absolute; left:45px; top:10px;}
p {width:200px; border:1px solid #000; padding:10px; position:relative;}

JQuery

$(document).ready(function() {

    // run the fade() function every 2 seconds
    setInterval(function(){
        fade();
    },2000);


    // toggle between fadeIn and fadeOut with 0.3s fade duration.
    function fade(){
        $("span").fadeToggle(300);
    }

});

Примечание: это работает только с переключением 2-х слов, может быть лучше иметь массив слов и написать функцию для прокрутки этих объектов и применить анимацию fadeIn/fadeOut.

Изменить. Вот решение для нескольких слов - fooobar.com/questions/408981/... оно использует array для хранения каждого слова, а затем циклов через них.

Изменить 2: решение без массива: http://jsfiddle.net/kMBMp/ Эта версия проходит через un-ordered list, которая имеет display:none на нем

Ответ 4

Самый низкий подход к усилиям, вероятно, заключается в использовании плагина Morphext jQuery:

https://github.com/MrSaints/Morphext

На нем работает animate.css, поэтому легко изменить стиль анимации текста.

Если вы ищете что-то более мощное (можете указать в анимации AND, анимировать не только текст), там выделение называется Morphist:

https://github.com/MrSaints/Morphist