Làm thế nào để Fade In/Out nhiều văn bản bằng cách sử dụng CSS/jQuery như trên Droplr?

Question

Tôi đã thấy kiểu hoạt ảnh này trên trang web ngay khi khung khóa CSS3 bắt đầu có được động lượng, nhưng không thể tìm thấy hoặc cũng không thể sao chép nó bằng CSS hoặc jQuery, và đây là nơi tôi nghĩ một số bạn có thể trợ giúp .

Tôi đã làm hoạt hình những gì tôi hy vọng đạt được và tôi đã nhúng nó bên dưới. Tôi tin rằng điều này có thể được mã hóa bằng cách sử dụng các khung hình CSS3 mới hoặc jQuery .animate(); đặc tính. Tôi không biết. Tôi đã thử tất cả mọi thứ tôi biết, nhưng tất cả vô ích.

Dưới đây là những hình ảnh động GIF về những gì tôi muốn:

Tôi chỉ nhận thấy, http://droplr.com/ sử dụng một sự chuyển tiếp rất giống nhau trên trang chủ của họ, nhưng với một vài hiệu ứng trượt. Và dữ liệu (từ) xuất hiện đều ngẫu nhiên, mọi lúc. Tôi muốn biết làm thế nào điều đó là có thể!

Answer 1

DEMO

Một giải pháp khả thi với css tinh khiết!

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

Something như thế này:

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

}); 

Note: điều này chỉ làm việc với chuyển đổi qua lại 2 từ, nó có thể là tốt hơn để có một mảng các từ, và viết một hàm để lặp qua những người và áp dụng các 'fadeIn/fadeOut hoạt hình .

Sửa: Đây là một giải pháp cho nhiều từ - https://stackoverflow.com/a/2772278/2470724 nó sử dụng một array để lưu trữ mỗi từ và sau đó vòng qua chúng.

Chỉnh sửa 2: giải pháp phi mảng: http://jsfiddle.net/kMBMp/ Phiên bản này vòng qua một un-ordered list trong đó có display:none vào nó

Answer 3

Một số mở rộng của Google tìm kiếm và thử nghiệm đã dẫn tôi tới điểm mà tôi có thể trả lời câu hỏi của riêng tôi, và chỉ trong thời gian quá!

Nếu bất kỳ bạn muốn biết làm thế nào mà có thể được thực hiện, kiểm tra CodePen này đoạn mã tôi đã viết: http://codepen.io/AmruthPillai/pen/axvqB

Answer 4

Cách tiếp cận nỗ lực thấp nhất có lẽ là sử dụng Morphext jQuery plug-in:

https://github.com/MrSaints/Morphext

Nó cung cấp bởi Animate.css, vì vậy thật dễ dàng để thay đổi kiểu hoạt ảnh của văn bản.

Nếu bạn đang tìm kiếm cái gì một chút mạnh mẽ hơn (có thể chỉ định trong và ngoài hình ảnh động; động không chỉ là văn bản), có một spin-off gọi Morphist:

https://github.com/MrSaints/Morphist