結合用戶的滾動+動畫css3/Javascript

到目前爲止的第一篇文章:)結合用戶的滾動+動畫css3/Javascript

我創建一個視差網站結合css3 + javascript。

我跟着this教程，我不得不說，它給了我很多關於這個問題的把握。

我只是想知道兩件事情：

如何翻譯在X軸上的運動？
最重要：如何將用戶的滾動與動畫結合起來？

我已經看到有很多插件，但我寧願自己開發一個解決方案，而不會讓代碼太沉重和複雜。你能指出我一些很好的資源，這將啓發我這項技術？

謝謝你們！

在14.14（+1 GTM TIME）修改是在17/09/12如果有人有興趣，應該是這樣的想法，代碼，使我們會做的伎倆：

的$（document）。就緒（函數（）{ $（ '部分[數據類型= 「例如」]'）滾動（函數（）{

// If the user scroll as much as we need, in this instance 750px 
if (scrollTop() > '750px') { 
    // switch its class from ".animation" to ".animated" 
    $(".animation").toggleClass("animated"); 
}

}）; }）;

CSS類將是：。動畫{0} {0} {0}}} height：300px： -webkit-transition：width 2s ease，height 2s ease; -moz-transition：寬度2s緩解，高度2s緩解; -o-transition：寬度2s緩解，高度2s緩解; -ms-transition：寬度2s易用性，高度2s易用性;過渡：寬度2s緩解，高度2s緩解; }

。動畫{width：400px; height：400px; }

正如我們所看到的，在「.animation」中我們會找到初始大小和動畫，而在「.animated」中，我們將打印我們想要實現的內容。

這是由@ jfriend00提供的提示創建的。不幸的是，我還沒有嘗試過的可能性，所以請隨時加以改進。我在這裏寫了它，因爲它似乎有人對這個主題感興趣，並且以前我將它發佈在評論中使其無法閱讀:)

另外，Jfriend00告訴.scrollTop（）是一個JQuery方法，而不是一個普通函數。你如何看待使用普通JS可以改進？

在此先感謝並對我的語法錯誤和noobness抱歉;我不是英語母語，我很新的帶有編程:)

來源

2012-09-17 John Funk

hmm +1，橫向滾動就是這樣一個例子：http://tympanus.net/codrops/2011/12/05/lateral-on-scroll-sliding-with-jquery/查看源代碼。寫得很好。 –

我不清楚你在尋求什麼幫助。你問你如何跟蹤滾動條的位置？一旦你有滾動條的位置，你想如何應用該動畫？有數百萬種可能的動畫，所以如何將動畫位置應用於動畫，完全取決於你想要做什麼。 – jfriend00

@Ashwinkumar謝謝！我看到那裏發生了什麼！我會在稍後嘗試一下！乾杯! :) –

從您的評論：

比方說，例如，我想用戶的滾動相結合的過渡效果。所以即一旦用戶滾動了750px，我想一個對象出現一個淡入淡出的過渡。如何將滾動因子與動畫鏈接起來？

這是接近的具體例子的一種方式：

你會註冊scroll事件的事件偵聽器。
在滾動事件處理程序中，您將檢查當前滾動位置並決定是否要執行操作（例如scrollTop大於750px）。
觸發CSS3動畫的最簡單方法是向對象添加類名稱。如果該對象爲該新類指定了CSS，並且該對象被配置爲通過將類名添加到該對象而更改的任何屬性上的CSS轉換，則將在添加該類時啓動CSS3動畫。

來源

2012-09-17 05:42:41 jfriend00

所以，如果我寫這樣的東西： $（document）.ready（function（）{ $（'section [data-如果（scrollTop（）>'750px'）{ $（「。animation」）。toggleClass（「animated」）; } }）; CSS 。動畫{width = 300px; height：300px： -webkit-transition：width 2s ease，height 2s ease; -moz-transition：寬度2s緩解，高度2s緩解; -o-transition：寬度2s緩解，高度2s緩解; -ms-transition：寬度2s易用性，高度2s易用性; 過渡：寬度2s緩解，高度2s緩解; } 。動畫：寬度：400px; height：400px; } 這應該做的魔術，對不對？ –

對不起，我是一個noob我知道：D我也不能嘗試代碼，直到今天晚上，不能等待大聲笑 –

@JohnFunk - 請不要在評論中放置多行代碼。這是完全不可讀的。如果您必須添加更多代碼，請將其添加到問題的末尾（您可以在其中適當地格式化）併發布指向它的評論。除了'.scrollTop（）'是一個jQuery方法，而不是普通的函數之外，你的代碼看起來像一般的想法。 – jfriend00

結合用戶的滾動+動畫css3/Javascript

回答

相關問題