像Gumroad.com上交替文字

我以前見過這個做過幾次。我不記得其他網站，但如果你知道其他網站，我想看看。（https://gumroad.com/）像Gumroad.com上交替文字

基本上，當他們這樣做：

分享你的 '歌'，直接到你的 '粉絲'。引號中的單詞不斷被取代。

我想知道是否有一個JS/Jquery庫來幫助。否則，我希望其他一些網站這樣做，這樣我就可以獲得創意！

謝謝。

2013-11-09 Jonovono

剛剛撰寫類似的東西，但沒有動畫 - http://jsfiddle.net/Dogbert/vF4rj/3/你可以使用[jQuery UI]（http://api.jqueryui.com/drop-effect/）添加動畫。 – Dogbert

很酷。雅，那很有幫助！如果您提交，我會接受。 – Jonovono

請注意您的示例網站使用CSS動畫，而不是jQuery UI。 – Robbert

我使用jQuery實現了類似的東西（沒有動畫）。

該代碼基本上是每隔2000毫秒從一個數組中循環數據，並將其添加到一個範圍。

現場演示 - http://jsfiddle.net/Dogbert/vF4rj/3/

JS：

var options = [ 
    ["music", "listeners"], 
    ["software", "users"], 
    ["films", "viewers"], 
    ["comics", "readers"] 
]; 

var interval = 2000; 

var holder1 = $(".holder-1"), holder2 = $(".holder-2"); 
var currentIndex = 0; 

function doIt() { 
    holder1.html(options[currentIndex][0]); 
    holder2.html(options[currentIndex][1]); 
    currentIndex = (currentIndex + 1) % options.length; 
    setTimeout(doIt, interval); 
} 

doIt();

HTML：

<h2> 
    Sell 
    <span class="holder-1"></span> 
    directly to your 
    <span class="holder-2"></span> 
</h2>

來源

2013-11-10 12:53:13 Dogbert

如果你有興趣在他們的做法，好像這是他們在做什麼：

Th你的代碼中有兩個標題文本。一個是你看到的動畫。另一個通過將其不透明度設置爲0來隱藏。這個隱藏的版本將被用於對所顯示的一個進行任何計算。
隱藏的版本通過向佔位符span標籤中插入新文本來更新其文本。顯示的版本在該位置中具有佔位符，它們是空白的，並且通過使用隱藏版本中的新寬度來動畫它們的寬度。
隱藏版本也用於確定新文本相對於其餘句子的位置，並基於該信息將包含該文本的HTML元素動畫化以完全落在應該放置的位置。

一個非常聰明的方法。

來源

2013-11-19 22:40:06 pringshia

什麼使Gumroad的這項工作是華而不實的動畫，所以我覺得答案是不完整的，沒有這個基本要素。

這就是說，d3 JavaScript庫（d3js.org）具有非常好的基本功能實現以及對轉換的支持。關鍵的代碼是讓您輕鬆指定CSS類型轉換要被應用（見最後一行）以下：

var svg = d3.select("body").append("svg") 
     .attr("width", width) 
     .attr("height", height) 
     .append("g") 
     .attr("transform", "translate(32," + (height/2) + ")");

完整的例子可以看這裏：http://bl.ocks.org/mbostock/3808234

來源

2014-07-07 19:44:54

像Gumroad.com上交替文字

回答

相關問題