讓一個div搬出滾動屏幕（上）下來

Question

我想創建這樣的網站的標題中的作用：Tigre Blanc 我的代碼是這樣的：

<div id="header">         
     <center><div class="menubutton" onclick="openNav()"><img src="assets/images/openmenu.png" style="width:6%"></div></center>      
    </div> 

我不知道這些功能可以讓它像這樣移出屏幕。我猜這種js代碼讓它開始，但無法弄清楚要使用的動畫。

JS：

$(window).scroll(function(){ 
$(".header").css("opacity", 1 - $(window).scrollTop()/250); 
}); 

/*win.scroll(function(){ 
scrollPosition = win.scrollTop(); 
scrollRatio = 1 - scrollPosition/300; 
$(".header").css("opacity", scrollRatio); 
*/ 

/*$(window).scroll(function(){ 
var scrollVar = $(window).scrollTop(); 
$('.header').css("opacity", 1 - scrollVar/300); 
})*/ 

Answer 1

像這樣的事情fiddle？

HTML

<div class="a"></div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

CSS

.a{ 
    width:20%; 
    height:20%; 
    background:#000; 

; 
} 

.b{ 
    animation-name: example; 
    animation-duration: 1s; 
    animation-direction: alternate; 
    animation-iteration-count: infinite;  
} 

@keyframes example { 
    0% {transform: translateY(0%);} 
    95% {transform: translateY(-110%);} 
    100% {transform: translateY(-120%);} 
} 

JS

$('.a').click(function(){ 
    $('.a').toggleClass('b'); 
}); 

你可以簡單地使用類似

transform: translateY(n); 

與非常簡單的上下升降像

transition: all 1.5s ease; 

的轉變，我選擇了一個關鍵幀，因爲我注意到，有微妙的反彈效果。