幻燈片卡樣式HTML CSS JS

Question

我正在尋找與html/css/js的幻燈片樣式的網站。

我見過像一些很好的例子：

http://www.thepetedesign.com/demos/onepage_scroll_demo.html

http://alvarotrigo.com/fullPage/

然而，什麼這些都不似乎做的是幻燈片頁面出來，而頁面下方是可見的，好像他們是一堆索引卡片。視差滾動這樣做，但它通常會擦拭現有的區域，而不是滾動/移動它離開屏幕。有任何想法嗎？

Answer 1

這是一個使用JQuery的小提琴，它可以完成你所尋找的事情，你可以用卡片滑動條的一個滾動效果來實現它，並使它具有動畫效果。

http://jsfiddle.net/d6rKn/

(function(window){ $.fn.stopAtTop= function() { 
var $this = this, 
    $window = $(window), 
    thisPos = $this.offset().top, 
    setPosition, 
    under, 
    over; 

under = function(){ 
    if ($window.scrollTop() < thisPos) { 
     $this.css({ 
      position: 'absolute', 
      top: "" 
     }); 
     setPosition = over; 
    } 
}; 

over = function(){ 
    if (!($window.scrollTop() < thisPos)){ 
     $this.css({ 
      position: 'fixed', 
      top: 0 
     }); 
     setPosition = under; 
    } 
}; 

setPosition = over; 

$window.resize(function() 
{ 
    bumperPos = pos.offset().top; 
    thisHeight = $this.outerHeight(); 
    setPosition(); 
}); 

$window.scroll(function(){setPosition();}); 
setPosition(); 
}; 
})(window); 

$('#one').stopAtTop(); 
$('#two').stopAtTop(); 
$('#three').stopAtTop(); 
$('#four').stopAtTop(); 

查看HTML和CSS的小提琴。

不是我的小提琴只是用快速的谷歌搜索抓住它。