1
4

3 回答 3

0

是的可以做到这一点......你没有添加任何代码，甚至没有尝试过我想。这是让您入门的简单代码。

.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;
}

小提琴

于 2014-03-20T16:14:48.970 回答
0

这种效果确实需要 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

于 2014-03-20T16:27:17.900 回答
0

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

<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>
于 2013-09-20T03:24:19.987 回答