Question

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

特别是iPhone显示iPhone底部的部分，但内部的内容与背景同时发生变化。

这可以仅用css实现还是更复杂？

Answer 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>

Answer 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

Answer 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

我怎样才能创建一个真实的＆＃34;揭示页面＆＃34;幻灯片效果

3 个答案: