1

私はこの効果を行う方法を探していました: http://www.discovershadow.com/

特に iPhone は、iPhone がとどまる下部の部分を明らかにしますが、内部のコンテンツは背景と同時に変化します。

これはcssだけで達成できますか、それとももっと複雑ですか?

4

3 に答える 3

0

この効果には CSS + Javascript が必要です。これらの技術を使用せずに効果的に行う方法はありません。iPhone を画面の中央に配置し、画面の残りの部分をその周りに移動させることもできますが、Web サイトで見られるような効果は得られません。

個人的には、ターゲット Web サイトのソースを調べて、それがどのように達成されたかを自分で調査することをお勧めします。

そのサイトの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 に答える