Question

我正在寻找一个带有html / css / js的幻灯片式网站。

我见过一些不错的例子：

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

然而，这些似乎没有做的是将页面滑出，而下面的页面是可见的，就好像它们是一堆索引卡片一样。视差滚动可以做到这一点，但它通常会擦除现有区域，而不是滚动/移动它离开屏幕。有什么想法吗？

Answer 1

这是一个使用JQuery的小提琴，可以像你想要的那样做，你可以用卡片滑块的一个滚动效果来实现它，并且可能有动画效果。

(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的小提琴。

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

滑动卡样式HTML CSS JS

1 个答案: