html5 および css3_html/css_WEB-ITnose に基づくレスポンシブな全画面スクロールのページ切り替え効果

全画面レスポンシブ HTML5 および CSS3 ページ切り替えエフェクトを共有します。このページ レイアウト効果は、100% の固定の高さと幅を必要とする Web サイトやアプリに非常に役立ちます。レンダリングは次のとおりです。

オンライン プレビュー ソース コードのダウンロード

HTML

wrapper div のクラスは st-container で、これにはナビゲーション ボタンとしてのラジオと、ページ切り替え用のパネルである st-scroll が含まれています。

<div class="st-container">                <input type="radio" name="radio-set" checked="checked" id="st-control-1"/>    <a href="#st-panel-1">Serendipity</a>        <input type="radio" name="radio-set" id="st-control-2"/>    <a href="#st-panel-2">Happiness</a>        <input type="radio" name="radio-set" id="st-control-3"/>    <a href="#st-panel-3">Tranquillity</a>        <input type="radio" name="radio-set" id="st-control-4"/>    <a href="#st-panel-4">Positivity</a>        <input type="radio" name="radio-set" id="st-control-5"/>    <a href="#st-panel-5">Passion</a>        <div class="st-scroll">        <section class="st-panel" id="st-panel-1">            <div class="st-deco" data-icon="H"></div>            <h2>Serendipity</h2>            <p>Banksy adipisicing eiusmod banh mi sed...</p>        </section>                <section class="st-panel st-color" id="st-panel-2">            <!-- ... -->        </section>                <!-- ... st-panel-3, st-panel-4, st-panel-5 -->    </div><!-- // st-scroll -->    </div><!-- // st-container -->

私たちがしなければならないことは、ナビゲーション ボタンをクリックしたときに対応するパネルが画面に表示されるように、パネルの高さの値を変更することです。兄弟セレクターを使用すると、ボタンをクリックしたときに正しいパネルを取得できます。ラジオ ボタンと st-scroll は、DOM 構造の同じレイヤーにあり、ハイパーリンクの上にある必要があります (ハイパーリンクの透明度は 0 に設定され、非表示になります)。パネルを正しく選択するには、各パネルとラジオ ボタンに ID を与える必要もあります。 CSS コードについては、ダウンロード ファイル内の css ファイルを参照してください。

経由: http://www.w2bc.com/Article/26057