使用jquery滑動圖標

Question

這將是我的第一個問題，因爲我通常可以在這裏找到答案....但這個問題是不同的，因爲我不認爲我...使用正確的術語來描述某事。

這裏是我將用作示例的網站。 http://html5up.net/big-picture

當您向下滾動到第二個背景圖像時，上下文框從頁面右側滑出，顯示「我在做什麼」。我盡我所能使這項工作在我的網站上完成，我無法讓它工作......毫無意義。

我想要做什麼：當我向下滾動，或者（甚至更好）當我將鼠標懸停在我的網站的特定區域（最好）時，我想要兩個圖標滑入該行。我知道這是可能的，我只是不知道該怎麼做...我對jQuery或JavaScript一般不瞭解。再次感謝，如果有人能幫我弄清楚如何讓這些傢伙滑入視圖！

Answer 1

你可以用.animate

$(function() { 
    $("#show").on("mouseover", function() { 
     $("#info").animate({ 
      right: "+=400" 
     }, 1000, function() { 
      // Animation complete. 
     }); 
    }); 
    $("#show").on("mouseout", function() { 
     $("#info").animate({ 
      right: "-350px" 
     }, 1000, function() { 
      // Animation complete. 
     }); 
    }); 
}); 

DEMO做到這一點：http://jsfiddle.net/vHPM7/

Answer 2

一般而言，本網站使用Parallax effect。 More info

對圖像的影響可能會在這裏發現：Load images when the user scrolls down the page -