Come eseguire il Fade In/Out di più testi usando CSS/jQuery come su Droplr?

Ho visto questo tipo di animazione su un sito web solo quando i fotogrammi chiave CSS3 hanno iniziato a guadagnare slancio, ma non sono riuscito a trovarlo né posso replicarlo usando CSS o jQuery, ed ecco dove ho pensato che alcuni di voi potessero aiutare .Come eseguire il Fade In/Out di più testi usando CSS/jQuery come su Droplr?

Ho animato ciò che spero di ottenere e l'ho incorporato qui sotto. Credo che questo possa essere codificato usando i nuovi key-frame CSS3 o jQuery's animate(); caratteristica. Non lo so. Ho provato tutto quello che so, ma tutto invano.

Ecco l'animazione GIF di quello che volevo:

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.

ho appena notato, http://droplr.com/ utilizza una transizione molto simile sulla loro home page, ma con alcuni effetti di scorrimento. E i dati (parole) che appaiono sono tutti casuali, sempre. Mi piacerebbe sapere come è possibile!

fonte

2013-06-22 Amruth Pillai

DEMO

Una possibile soluzione con puro 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; 
}

fonte

2013-06-23 00:06:28 rkpasia

Perfetto! : D Grazie mille! –

Qualcosa di simile a questo:

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); 
    } 

});

Nota: questo funziona solo con commutazione 2 parole, potrebbe essere meglio avere un array di parole e di scrivere una funzione per eseguire il ciclo quelli e applicare l'/ animazione `fadeIn fadeOut .

Edit: Ecco una soluzione per più parole - https://stackoverflow.com/a/2772278/2470724 utilizza un array per memorizzare ogni parola e poi loop attraverso di loro.

Edit 2: Soluzione non-array: http://jsfiddle.net/kMBMp/ Questa versione loop attraverso un un-ordered list che ha display:none su di esso

fonte

2013-06-22 19:29:08

ero sul punto di chiedi un'opzione per più parole! : D Un ciclo di funzioni? Il mio errore nel pensare che questa sarebbe stata una passeggiata nel parco per codificare: P Grazie per aver trovato il tempo di scrivere questo, però, è certamente utile. Controlla la mia modifica sulla domanda, potrebbe gettare un po 'più di luce sull'argomento. –

@Amruth A. Pillai Ho appena trovato quello che vuoi per più parole - http://stackoverflow.com/a/2772278/2470724 Questo è quello che stavo pensando di scrivere per la soluzione. Quindi hai un 'array' di parole. Come questo 'var terms = [" term 1 "," term 2 "," term 3 "]' –

Alcuni vasta Google Ricerca e la sperimentazione mi ha portato al punto in cui posso rispondere alla mia domanda, e giusto in tempo!

Se qualcuno di voi vorrebbe sapere come questo può essere fatto, date un'occhiata a questo CodePen snippet ho scritto: http://codepen.io/AmruthPillai/pen/axvqB

fonte

2013-06-22 19:52:41

@ Nick-R Questo metodo includeva dover inserire le parole nello script jQuery stesso. Che ne dici di quando il contenuto è dinamico? Ad ogni modo, ho trovato un modo per farlo, usando HTML come origine dati e jQuery come animatore. Controlla il link nella risposta di cui sopra! :) –

Felice di aver trovato una soluzione :) Bene ho riscritto l'esempio che ho trovato (quello che usava un 'array' per memorizzare le parole) - Questa è la mia versione modificata - http://jsfiddle.net/kMBMp/ 1/Funziona scorrendo attraverso la lista 'non ordinata', che ha' display: none' su di essa. Quindi questo metodo funzionerebbe sicuramente se le parole fossero generate dinamicamente. –

L'approccio sforzo più basso è probabilmente quello di utilizzare il Morphext jQuery plug-in:

https://github.com/MrSaints/Morphext

E 'alimentato da animare.css, quindi è facile cambiare lo stile di animazione del testo.

Se siete alla ricerca di qualcosa di un po 'più potente (è possibile specificare dentro e fuori animazioni; animare non solo testo), c'è uno spin-off chiamato Morphist:

https://github.com/MrSaints/Morphist

fonte

2016-02-01 23:23:30

Come eseguire il Fade In/Out di più testi usando CSS/jQuery come su Droplr?

risposta

Problemi correlati