延迟滚动显示

我正在尝试实现像这个网站这样的效果：http://pollenlondon.com/antiques-boutiques/
我得到了一个普拉克斯效果来工作，但我无法弄清楚如何延迟内容的显示。我正在寻找一种解决方案，它不依赖于插件，如 skrollr。

小提琴：http://jsfiddle.net/1kj1j63o/4/

.HTML

<section class="module content">
    <div class="wrapper">
        <h2>Some text</h2>
        <p>some text</p>
        <p>some text</p>
        <p>some text</p>
        <p>some text</p>
    </div>
</section>
<section class="module parallax parallax-1">
    <div class="wrapper">   
    </div><!-- /.wrapper -->
</section>
<section class="module content">
    <div class="wrapper">
        <h2>This part is supposed to show up with an effect</h2>
        <p>some text</p>
        <p>some text</p>
        <p>some text</p>
        <p>some text</p>
    </div>
</section>

.CSS

section.module.content {
    padding: 100px 0 50px 0;
    min-height: 600px;
    font-family: Arial;
}
section.module.content.parallax {
    height: 400px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
section.module.content.parallax-1 {
    margin-top: 300px;
    height: 700px;
    background-image: url('https://ununsplash.imgix.net/uploads/141319062591093cefc09/ad50c1f0?q=75&fm=jpg&s=a356dd61ff3da2269124bcd12a303b7e');
}
.wrapper-effect {
    display: none;
}

jquery

$(function(){
    $('.wrapper-effect').scrollTop(300px).css("display":"block");
});

我真的是新手，很乐意提供任何帮助！！

看看这个网站： http://www.justinaguilar.com/animations/scrolling.html

以下是该站点中有关如何在滚动时对对象进行动画处理的说明：

将 jQuery 添加到网页的 <head> 元素：

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

在 </body> 标记之前添加以下内容，以便在用户滚动到元素时触发动画：

<script>
    $(window).scroll(function() {
        $('.wrapper').each(function(){
        var pos = $(this).offset().top;
        var topOfWindow = $(window).scrollTop();
            if (pos < topOfWindow+400) {
                $(this).addClass("slideUp");
            }
        });
    });
</script>

将.wrapper替换为要进行动画处理的元素的 ID 或类。将 slideUp 替换为动画类。

400表示元素和屏幕顶部之间的空间。当元素距离屏幕顶部 400 像素时，动画将激活。增加此数字以使动画更快地激活。

这是slideUp类（也来自该网站）：

.slideUp{
animation-name: slideUp;
-webkit-animation-name: slideUp;    
animation-duration: 1s; 
-webkit-animation-duration: 1s;
animation-timing-function: ease;    
-webkit-animation-timing-function: ease;
visibility: visible !important;
}
@keyframes slideUp {
0% {
    transform: translateY(100%);
}
50%{
    transform: translateY(-8%);
}
65%{
    transform: translateY(4%);
}
80%{
    transform: translateY(-4%);
}
95%{
    transform: translateY(2%);
}           
100% {
    transform: translateY(0%);
}   
}
@-webkit-keyframes slideUp {
0% {
    -webkit-transform: translateY(100%);
}
50%{
    -webkit-transform: translateY(-8%);
}
65%{
    -webkit-transform: translateY(4%);
}
80%{
    -webkit-transform: translateY(-4%);
}
95%{
    -webkit-transform: translateY(2%);
}           
100% {
    -webkit-transform: translateY(0%);
}   
}

小提琴：http://jsfiddle.net/g5gjwm3v/（为简单起见，此示例使用计时器而不是滚动）

相关内容

最新更新

热门标签：