CodePen內容滑塊

Question

我想創建類似的東西。

http://codepen.io/eka0210/pen/rjalx

有誰知道什麼樣的jQuery插件已經在它被使用。

它看起來很直截了當，我似乎無法弄清楚。現在我正在使用這個插件

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 

除了那個給定的js代碼。 我的問題是，我似乎無法使其動畫到其他頁面。

感謝您的回覆。

Answer 1

這個動畫是通過css translate來完成的，而小腳本控制動畫過程中的行爲，所有這些都沒有使用插件！

CSS：

html { 
    overflow-y: hidden; 
} 

html, body, #wrapper { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
} 

nav { 
    position: fixed; 
    z-index: 100; 
} 

.main-container { 
    position: relative; 
    width: 100%; 
    height: 100%; 
} 

#wrapper { 
    position: absolute; 
    top: 0; 
    -webkit-transition: -webkit-transform 1.5s cubic-bezier(.8,0,.2,1); 
} 

.slide0 {-webkit-transform: translateY(0%);} 
.slide1 {-webkit-transform: translateY(-100%);} 
.slide2 {-webkit-transform: translateY(-200%);} 
.slide3 {-webkit-transform: translateY(-300%);} 
.slide4 {-webkit-transform: translateY(-400%);} 

JS：

var slider = $('.slider'), 
    wrapper = $('#wrapper'), 
    animating = false, 
    current = 0, 
    lengthDiv = slider.length, 
    delay = 1500; 

slider.on('click', function(e){ 
    var anchor = $(this); 
    if(!animating){ 
     animating = true; 
     current = anchor.parent().index(); 
     wrapper.removeClass().addClass('slide'+current); 
     setTimeout(function(){ 
      animating = false; 
     }, delay); 
     e.preventDefault(); 
    } 
}); 

$(document).keydown(function(e){var key = e.keyCode;if(key == 38 || key == 40)e.preventDefault();}); 
$(document).keyup(function(e){ 
    if(!animating){ 
     var key = e.keyCode; 
     if(key == 38 && current > 0){ 
      $(slider[current - 1]).trigger('click'); 
     }else if(key == 40 && current < lengthDiv - 1){ 
      $(slider[current + 1]).trigger('click'); 
     } 
    } 
}); 
$(document).mousewheel(function(e, deltaY){ 
    if(!animating){ 
     if(deltaY > 0 && current > 0){ 
      $(slider[current - 1]).trigger('click'); 
     }else if(deltaY < 0 && current < lengthDiv - 1){ 
      $(slider[current + 1]).trigger('click'); 
     } 
    } 
    return false; 
});