0

私はいくつかのウェブサイトで、それぞれがブラウザウィンドウを埋める本質的に垂直な「ページ」を提供する効果を見てきました。例：

http://www.bleed.no/

http://www.weworkonsunday.com/

1つ目は、かなりクリーンで洗練されたものです。

私はこの効果を達成する方法を困惑させてきました。高さが問題にならないのであれば、ページアンカーなどを使用するのは簡単ですが、ウィンドウの垂直方向（および幅）を埋めることが私を失望させます。

私が見逃している簡単な方法はありますか？それとも、すべて複雑なJavaの不正行為ですか？

助けてくれてありがとう

4

2 に答える 2

0

この結果には、JavaScriptの専門知識が必要です（例で実装されている方法で）。

このプロセスを簡素化しようとする jquery ライブラリがあります。

http://stephband.info/jparallax/

とはいえ、実装するための本当に簡単な方法はありません。効果がレイアウトに大きく依存し、Web サイトの「新しい」方法である理由の 1 つとして、誰かがこの問題に取り組むまでに時間がかかることがあります。

ライブラリの助けを借りずに説明した方法で視差を実装する方法の別の例を次に示します。

方法: http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/ デモ: http://nettuts.s3.amazonaws.com/2138_SimpleParallax/Demo/index. html

「視差スクロール」を検索すると、他にも多くのリソースが見つかります。

于 2013-01-31T22:54:43.493 に答える
0

概念的には、ウィンドウの高さに応答する (また、ブラウザーのサイズが変更されたときにも応答する) 同じクラスを持つスタックされた div を持つ垂直ページを作成します。jQuery を使用した未テストのコード:

<div id="page1" class="page">content</div>
<div id="page2" class="page">content</div>
<div id="page3" class="page">content</div>

<script>

    // set up onResize event handler
    window.onresize = onResizeScreen;

    // run onResize event handler once on load
    $.(function() { onResizeScreen(); });

    // onResize event handler
    function onResizeScreen(event) {
        $(".page").attr("height", screen.height);
    }

    // function to scroll to specific page
    function gotoPage(pageNumber){
        window.scroll(screen.height*pageNumber-1);
    }

</script>

<style>
    .page {
        width: 100%;
    }
</style>

この種の問題を解決するのは初めてのようですね。上記の意味がわからない場合は、jQuery と JavaScript イベントの処理を調べてください。

于 2013-01-31T22:56:25.717 に答える