ड्रॉपलर पर सीएसएस/jQuery का उपयोग करके एकाधिक ग्रंथों को कैसे/बाहर फीका करना है?

Question

मैंने इस प्रकार की एनीमेशन को वेबसाइट पर देखा है जब CSS3 की-फ्रेम ने गति प्राप्त करना शुरू किया था, लेकिन इसे नहीं मिला और न ही मैं इसे सीएसएस या jQuery का उपयोग करके दोहराना चाहता था, और यहां मैंने सोचा कि आप में से कुछ मदद कर सकते हैं ।

मैंने एनिमेट किया है जो मैं प्राप्त करने की आशा करता हूं और मैंने इसे नीचे एम्बेड किया है। मेरा मानना ​​है कि इसे नए CSS3 कुंजी-फ्रेम या jQuery के .animate() का उपयोग करके कोड किया जा सकता है; सुविधा। मुझे नहीं पता। मैंने जो कुछ भी मुझे पता है, मैंने कोशिश की है, लेकिन सभी व्यर्थ हैं।

यहाँ मैं क्या चाहता था की GIF एनीमेशन है:

मैं सिर्फ देखा, http://droplr.com/ अपने मुख पृष्ठ पर एक बहुत ही इसी तरह के संक्रमण का उपयोग करता है, लेकिन कुछ ही रपट प्रभाव के साथ। और आने वाले डेटा (शब्द) सभी यादृच्छिक हैं, हर समय। मैं जानना चाहता हूं कि यह कैसे संभव है!

Answer 1

DEMO

शुद्ध सीएसएस के साथ एक संभव समाधान!

https://github.com/MrSaints/Morphext

यह चेतन द्वारा संचालित है:

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

Answer 2

कुछ इस तरह:

JSFiddle Demo

एचटीएमएल

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

सीएसएस

.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 एनीमेशन लागू करने के लिए ।

संपादित: यहाँ कई शब्दों के लिए एक समाधान है - https://stackoverflow.com/a/2772278/2470724 यह एक array का उपयोग करता है प्रत्येक शब्द स्टोर करने के लिए और फिर उन्हें के माध्यम से लूप।

संपादित 2: गैर सरणी समाधान: http://jsfiddle.net/kMBMp/ इस संस्करण में एक un-ordered list जो यह

Answer 3

कुछ व्यापक गूगल सर्च कर रहे हैं और प्रयोग बिंदु है जहां मैं अपने ही सवाल का जवाब कर सकते हैं करने के लिए मुझे प्रेरित किया है पर display:none है के माध्यम से लूप होता है, और बस समय में भी!

आप में से किसी को पता है कि कैसे किया जा सकता चाहते हैं, तो इस CodePen की जाँच झलकी मैं ने लिखा है: http://codepen.io/AmruthPillai/pen/axvqB

Answer 4

न्यूनतम प्रयास दृष्टिकोण शायद Morphext jQuery का उपयोग करने के प्लग में है।सीएसएस, इसलिए पाठ की एनीमेशन शैली को बदलना आसान है।

फिर आप कुछ और अधिक शक्तिशाली लिए देख रहे हैं (और बाहर एनिमेशन में निर्दिष्ट कर सकते हैं, बस पाठ नहीं चेतन), वहाँ एक स्पिन-ऑफ Morphist कहा जाता है:

https://github.com/MrSaints/Morphist