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

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

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

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

Я только что заметил, 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