如何實現動畫效果

在此website中，當您滾動頁面時，頁眉會呈現動畫效果。您能否請告知您可以使用哪些技術，工具和最佳實踐（廣泛地）來實現此類效果？如何實現動畫效果

來源

2016-03-15 Kamran

有太多可能的答案，或者對於這種格式太好的答案太長。請添加詳細信息以縮小答案集或隔離幾個段落中可以回答的問題。 [問] – CollinD

當滾動位置在頂部時，使用javascript向頭元素添加一個類（綁定到onscroll事件並檢查是否在頂部）。然後定義新postiions在CSS的元素時所應用到的類，並使用transition CSS屬性設置動畫

來源

2016-03-15 17:55:18 Mike

謝謝。我會去學習轉換 – Kamran

好爲動畫發生滾動時，你會用

$(document).scroll(function() { 
if($(document).scrollTop() === 0); 

} else { 

});

對於動畫，有很多方法可以做到這一點，問題太廣泛了，如上所述。

來源

2016-03-15 17:56:15 Shniper

謝謝。我只想得到一些我可以研究的方向。看起來很難創造像這樣的水平 – Kamran

這並不難，但動畫非常耗時 – Shniper

我個人這樣做的方法，就是在滾動時向身體添加一個類。然後，我相應地設置我想要更改的特定元素（在您的情況下爲標題）。我將它添加到身體，而不是在案件的特定元素我想操縱其他選擇等

這是JS我用：

jQuery(window).scroll(function() { 
    var scroll = jQuery(window).scrollTop(); 
    if (scroll >= 50) { //distance scrolled before effect takes place 
    jQuery("body").addClass("scrolled"); 
    } else { 
    jQuery("body").removeClass("scrolled"); 
    } 
});

然後我會添加一些CSS，例如：

header{height:100px;transition:all, .4s, ease; /*Make sure to use all cross-browser markup*/;} 
body.scrolled header{height:50px;}

來源

2016-03-15 19:23:11

如何實現動畫效果

回答

相關問題