Jak zlewać/wysyłać wiele tekstów za pomocą CSS/jQuery jak w Droplr?

Widziałem ten typ animacji na stronie internetowej, kiedy klatki kluczowe CSS3 zaczęły nabierać rozpędu, ale nie mogły go znaleźć ani odtworzyć za pomocą CSS lub jQuery, a tutaj uważam, że niektórzy z was mogą pomóc .Jak zlewać/wysyłać wiele tekstów za pomocą CSS/jQuery jak w Droplr?

Animowałem to, co mam nadzieję osiągnąć, i umieściłem je poniżej. Wierzę, że można to zakodować za pomocą nowych klatek kluczowych CSS3 lub .animate(); cecha. Nie wiem Próbowałem wszystkiego, co wiem, ale wszystko na próżno.

Oto animacja GIF, co chciałem:

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.

Właśnie zauważyłem, http://droplr.com/ używa bardzo podobny przejście na ich stronie głównej, ale z kilkoma efektami przesuwnych. I dane (słowa), które pojawiają się są losowe, przez cały czas. Chciałbym wiedzieć, jak to jest możliwe!

Źródło

2013-06-22 Amruth Pillai

DEMO

Możliwym rozwiązaniem czystym 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; 
}

Źródło

2013-06-23 00:06:28 rkpasia

Idealny! : D Dziękuję bardzo! –

coś takiego:

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

});

Uwaga: to działa tylko z przełączając 2 słowa, to może być lepiej mieć tablicę słów i napisać funkcję pętli ci i zastosować `fadeIn/animację Fadeout .

Edit: Oto rozwiązanie dla wielu słów - https://stackoverflow.com/a/2772278/2470724 to wykorzystuje array zapisać każde słowo, a następnie pętli przez nich.

Edycja 2: rozwiązanie dla array: http://jsfiddle.net/kMBMp/ Ta wersja pętli poprzez un-ordered list który ma display:none na nim

Źródło

2013-06-22 19:29:08

Właśnie miałem do poproś o opcję na więcej słów! : D Pętla funkcyjna? Myliłem się, myśląc, że to będzie spacer po parku, żeby napisać kod: P Dzięki za poświęcenie czasu na napisanie tego, jest to z pewnością pomocne. Sprawdź moją edycję na pytanie, może rzucić trochę więcej światła na ten temat. –

@Arruth A. Pillai Właśnie znalazłem, co chcesz dla wielu słów - http://stackoverflow.com/a/2772278/2470724 Oto, co myślałem o pisaniu dla rozwiązania. Więc masz 'tablicę' słów. Tak jak to 'var terms = [" term 1 "," term 2 "," term 3 "]' –

Niektóre obszerny Google Wyszukiwanie i eksperymenty doprowadziły mnie do punktu, w którym mogę odpowiedzieć na moje własne pytanie, i w samą porę też!

Jeśli ktoś z was chciałby wiedzieć, w jaki sposób można to zrobić, sprawdź ten CodePen snippet pisałem: http://codepen.io/AmruthPillai/pen/axvqB

Źródło

2013-06-22 19:52:41

@ Nick-R Ta metoda obejmowała konieczność wpisania słów w skrypcie jQuery. A co powiesz, gdy zawartość będzie dynamiczna? W każdym razie znalazłem sposób na to, używając HTML jako źródła danych i jQuery jako animatora. Sprawdź link w powyższej odpowiedzi! :) –

Cieszę się, że znalazłeś rozwiązanie :) Cóż, ponownie napisałem przykład, który znalazłem (ten, który używał 'tablica' do przechowywania słów) - To jest moja zmodyfikowana wersja - http://jsfiddle.net/kMBMp/ 1/Działa poprzez zapętlenie listy 'nieuporządkowanej', która ma' display: none'. Tak więc ta metoda zdecydowanie by działała, gdyby słowa były "generowane dynamicznie". –

Podejście najniższy wysiłek jest prawdopodobnie użyć Morphext jQuery plug-in:

https://github.com/MrSaints/Morphext

Jest zasilany przez ożywionej.css, więc łatwo jest zmienić styl animacji tekstu.

Jeśli szukasz czegoś nieco mocniejszy (można określić i obecnie animacji; animować nie tylko tekst), jest to spin-off nazywa Morphist:

https://github.com/MrSaints/Morphist

Źródło

2016-02-01 23:23:30

Jak zlewać/wysyłać wiele tekstów za pomocą CSS/jQuery jak w Droplr?

Odpowiedz

Powiązane problemy