無限の創造力！ Web ページのサイドバー遷移アニメーションのセット [ソース コードのダウンロード付き]_html/css_WEB-ITnose

今日は別のトランジションエフェクトのセットを共有したいと思います。今回は、マルチレベル ロールアウト メニューで既に使用しているような、サイドバーのトランジション アニメーションを実装する方法を見ていきます。このアイデアは、隠されたサイドバーの一部を微妙な遷移アニメーションで表示し、残りのコンテンツも同様に表示することです。多くの場合、サイドバーは他のコンテンツを押しのけてスライドして入ります。このプロセスには多くの微妙で独特な効果を追加できます。今日の記事はいくつかのインスピレーションを与えるでしょう。

注意事項: 最良の結果を得るには、IE10 以降、Chrome、Firefox、Safari などの最新のブラウザで閲覧してください。

オンライン デモを今すぐダウンロード

すべての効果を 1 ページで表示できるようにしたいため、例の結果は非常に具体的です。ただし、一般に、サイドバーをプッシュ コンテナの上に表示するか下に表示するかに応じて、プッシュ コンテナの内側または外側にサイドバー要素が必要です。したがって、 2 つの HTML 構造があり、最初の実装のコードは次のとおりです:

<div id="st-container" class="st-container">    <!-- content push wrapper -->    <div class="st-pusher">        <nav class="st-menu st-effect-1" id="menu-1">            <!-- sidebar content -->        </nav>        <div class="st-content"><!-- this is the wrapper for the content -->            <div class="st-content-inner"><!-- extra div for emulating position:fixed of the menu -->                <!-- the content -->            </div><!-- /st-content-inner -->        </div><!-- /st-content -->    </div><!-- /st-pusher --></div><!-- /st-container -->

または次の構造:

<div id="st-container" class="st-container">    <nav class="st-menu st-effect-1" id="menu-1">        <!-- sidebar content -->    </nav>    <!-- content push wrapper -->    <div class="st-pusher">        <div class="st-content"><!-- this is the wrapper for the content -->            <div class="st-content-inner"><!-- extra div for emulating position:fixed of the menu -->                <!-- the content -->            </div><!-- /st-content-inner -->        </div><!-- /st-content -->    </div><!-- /st-pusher --></div><!-- /st-container -->

エフェクト 7 の CSS コードは次のとおりです。パースペクティブの値をメイン コンテナに追加し、3D 効果を使用して Push コンテナとメニューを回転します。

.st-effect-7.st-container {    perspective: 1500px;    perspective-origin: 0% 50%;} .st-effect-7 .st-pusher {    transform-style: preserve-3d;} .st-effect-7.st-menu-open .st-pusher {    transform: translate3d(300px, 0, 0);} .st-effect-7.st-menu {    transform: translate3d(-100%, 0, 0) rotateY(-90deg);    transform-origin: 100% 50%;    transform-style: preserve-3d;} .st-effect-7.st-menu-open .st-effect-7.st-menu {    visibility: visible;    transform: translate3d(-100%, 0, 0) rotateY(0deg);}

デモには複数のサイドバーがあるため、ここでは Visibility プロパティを使用していることに注意してください。サイドバーだけがある場合は、可視性プロパティを非表示から表示に設定する必要はありません。

さらに、一部のブラウザは疑似要素 (マスクの実装に使用します) の遷移をサポートしていないため、これらのブラウザ (一部のモバイル ブラウザなど) では素早いちらつきが見られる場合があります。また、IE10 は、入れ子になった 3D 変換要素を破棄する、transform-style:preserve-3d 効果をサポートしていません。したがって、これらの効果を正しく確認できない例がいくつかあります。

このコレクションが、素晴らしい効果を生み出すためのインスピレーションを与えてくれることを願っています。気に入っていただけると幸いです!

今すぐダウンロード

オンラインデモ

🎜