ホームページ  >  記事  >  ウェブフロントエンド  >  html5 および css3_html/css_WEB-ITnose に基づくレスポンシブな全画面スクロールのページ切り替え効果

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

WBOY
WBOYオリジナル
2016-06-24 11:48:411797ブラウズ

全画面レスポンシブ 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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。