如何创建真正的“显示页面”幻灯片效果答案

【问题标题】：How can I create a real "reveal page" slide effect如何创建真正的“显示页面”幻灯片效果
【发布时间】：2014-03-21 00:27:17
【问题描述】：

我一直在寻找实现这种效果的方法：http://www.discovershadow.com/

尤其是iPhone在底部显示部分，iPhone停留但里面的内容与背景同时变化。

这是否可以仅使用 css 来实现，还是要复杂得多？

【问题讨论】：

你试过什么了吗？？？

标签： slide

【解决方案1】：

这是我发现这样做的方式...似乎没有人对这个问题感兴趣，但我希望你喜欢这个答案：

<html>
<head>
<style> 
html, body { 
    min-height: 100%; 
    margin: 0; 
    padding: 0;
} 

#container { 
    height: 100%;
    width: 100%;
    overflow-y: scroll; 
    position: fixed;
}

.items { 
    width: 100%; 
    height: 102%;
    background-attachment: fixed;
    background-position: 50%;
    background-repeat: no-repeat;
    position: relative; 
} 

#box1 { 
    background-image: url(yourimage1.png);
    background-color: #03F; 
}

#box2 { 
    background-image: url(yourimage2.png);
    background-color: #609; 
} 

#box3 { 
    background-image: url(yourimage3.png);
    background-color: #3C0;
}

</style>

</head>
<body>

<div id="container"> 
<div class="items" id="box1"></div>
<div class="items" id="box2"></div>
<div class="items" id="box3"></div>
</div>

</body>
</html>

【讨论】：

【解决方案2】：

是的，可以做到这一点...我认为您没有添加任何代码，甚至没有尝试过。下面是简单的代码，可帮助您入门。

.a
{
    background-image : url('http://hdwallpaper2013.com/wp-content/uploads/2013/02/Beautiful-Nature-Images-HD-Wallpaper.jpg');
    height: 200px;
    width: 100%;
    position: fixed;
}
p
{
    color : #000;
    font-size: 72px;
    position: relative;
    z-index: 999;
}

fiddle

【讨论】：

【解决方案3】：

这个效果确实需要 CSS + Javascript，如果不使用这些技术就无法有效地做到这一点。你可以让 iPhone 居中在屏幕上，屏幕的其余部分围绕它移动，但它不会产生像网站上看到的那样好的效果。

我个人建议查看目标网站的来源并调查自己是如何实现的，从其他网站偷看来源永远不会有坏处。

查看他们处理滚动的站点 script.js 页面

// handle scrolling
    $window.scroll(function() {         
        handleScroll();
    });

这是做什么的。您将需要查看完整的代码以准确了解其完成方式。

// handle scroll
function handleScroll() {

    scrolledWin = getPageScroll();
    $body.addClass('scrolling');    

    // show logo
    if((scrolledWin * 1.5) > winH) {
        $body.addClass('content');
    }

    // show navigation 
    if(scrolledWin > 50) {
        $body.addClass('scrolled');
    }

    // app img animation
    if(topOff >= scrolledWin) {
        $appImg.removeClass('sticky');
    } else {
        $appImg.addClass('sticky');
    }
    if(topOff2 >= scrolledWin) {
      $appImg2.removeClass('sticky');
    } else {
      $appImg2.addClass('sticky');
    }

    // fix navigation issue on top scroll
    if ((scrolledWin > -(winH - (winH * (f1 *0.8)))) && $('#hook2').hasClass('inViewport')) {
        $nav.attr("class", "").addClass('a2');
    } else if ($('#hook2').hasClass('inViewport')) {
        $nav.attr("class", "").addClass('a1');
    }

    //fix navigation issue between how it works and next section
    if ($s9.hasClass('inViewport')) {
        if ($('#hook5').hasClass('inViewport')) {
            $nav.attr("class", "").addClass('a5');
        } else {
            $nav.attr("class", "").addClass('a4');
        }
    }

    //fix navigation issue between Experts and next section
    if ($sExperts.hasClass('inViewport')) {
        if ($('#hook6').hasClass('inViewport')) {
            $nav.attr("class", "").addClass('a6');
        } else {
            $nav.attr("class", "").addClass('a5');
        }
    }
}

参考：http://www.discovershadow.com/js/script.js?v=2.14

【讨论】：