素晴らしいインク スプレー アニメーション トランジション効果を備えたモーダル ウィンドウを開く特殊効果_html/css_WEB-ITnose

簡単なチュートリアル

これは、CSS3 と jQuery を使用して作成された、クールなインクを噴霧するオープン モーダル ウィンドウ効果です。この特殊効果は、PNG インク スプレー スプライト画像とsteps() 関数を使用して、ボタンをクリックしたときにインクが広がる効果を作成し、全体の効果は画面にインクを振りかけるようなもので、画面の色が変わります。

用意したスプライト画像とCSSのsteps()関数を利用して、様々な滑らかな遷移アニメーション効果を作成できます。一部のエフェクト画像は、After Effects ツールを使用して特定のビデオから直接抽出できます。必要なビデオ フレームを連続 PNG イメージに変換し、これらのイメージをスプライト イメージに結合できます。

デモを見る プラグインをダウンロードする

使用方法

HTML構造

このエフェクトのHTML構造は、3つの主要な部分に分かれています: main.cd-main-contentページの主要部分、div .cd-modal はモーダル ウィンドウ、div.cd-transition-layer はアニメーション トランジション レイヤーです。

<main class="cd-main-content">  <div class="center">    <h1>Ink Transition Effect</h1>    <a href="#0" class="cd-btn cd-modal-trigger">Start Effect</a>  </div></main> <!-- .cd-main-content -->  <div class="cd-modal">  <div class="modal-content">    <h1>My Modal Content</h1>         <p>      Lorem ipsum dolor sit amet, consectetur adipisicing elit.       Ad modi repellendus, optio eveniet eligendi molestiae?       Fugiat, temporibus!     </p>  </div> <!-- .modal-content -->    <a href="#0" class="modal-close">Close</a></div> <!-- .cd-modal -->  <div class="cd-transition-layer">   <div class="bg-layer"></div></div> <!-- .cd-transition-layer -->

CSS スタイル

モーダル window.cd-modal は、最初は可視性: 非表示によって非表示になっており、高さと幅の両方が 100% に設定され、固定位置が使用されます。

ユーザーがトリガー ボタン a.cd-modal-trigger をクリックすると、.visible プロパティを通じてモーダル ウィンドウが表示されるように設定されます。

.cd-modal {  position: fixed;  top: 0;  left: 0;  z-index: 3;  height: 100%;  width: 100%;  opacity: 0;  visibility: hidden;}.cd-modal.visible {  opacity: 1;  visibility: visible;}

div.cd-transition-layer 要素は、スプレー インク効果を持つアニメーション化されたトランジション レイヤーを作成するために使用されます。初期状態では、可視性: 非表示、高さと幅が 100% に設定され、固定位置が使用されます。

.cd-transition-layer {  position: fixed;  top: 0;  left: 0;  z-index: 2;  height: 100%;  width: 100%;  opacity: 0;  visibility: hidden;  overflow: hidden;}

その子要素 ​​div.bg-layer は、背景画像としてスプライト画像を使用し、background-size: 100%、高さ 100%、幅 2500% を設定します (このデモでは、ink.png には 25 フレームがあるため)。まず、ink.png の最初のフレームが div.cd-transition-layer 内の中央に配置されます。

.cd-transition-layer .bg-layer {  position: absolute;  left: 50%;  top: 50%;  transform: translateY(-50%) translateX(-2%);  height: 100%;  /* our sprite is composed of 25 frames */  width: 2500%;  background: url(../img/ink.png) no-repeat 0 0;  background-size: 100% 100%;}

上記のセンタリング方法では、通常、次のコードを使用して要素をセンタリングするために絶対位置を使用することに注意してください:

position: absolute;left: 50%;top: 50%;transform: translateY(-50%) translateX(-50%);

このデモでは、ink.png スプライト イメージの最初のフレームをセンタリングする必要があります。 div .bg-layer の幅は親要素の幅の 25 倍であるため、translateX(-(50/25)%) を使用して中央に配置します。

インク スプレー アニメーションを作成するには、div.bg-layer の値を変更する必要があります。 @keyframes フレーム アニメーションは次のように定義できます。

上記のフレーム アニメーションでは、アニメーションの最後に、ink.png スプライトの最後のフレームが div.cd-transition-layer の中央に配置されます。

上記の 100% でのtranslateX の値は次のように理解できます: デモには 25 フレームがあるため、最後のフレームを表示するには、.bg-layer レイヤーを -100% * (25 – 1) 移動する必要があります。 ) = -96%。次に、最後のフレームを中央に配置する必要があります。これには、-2% の追加調整が必要となるため、translateX() の最終値は -98% になります。

ユーザーがトリガー ボタン a.cd-modal-trigger をクリックすると、.cd-transition-layer が .visible クラスで追加されて表示され、インク スプレー アニメーションが .opening クラスを通じてトリガーされます。 。

@keyframes cd-sequence {  0% {    transform: translateY(-50%) translateX(-2%);  }  100% {    transform: translateY(-50%) translateX(-98%);  }}

JavaScript

デモでは、ユーザーがトリガー ボタンとモーダル ウィンドウを閉じるボタンをクリックしたときに、対応するクラスを追加および削除するために jQuery が使用されます。

また、png画像の比率を変形しないように調整するためにもjQueryを使用しています。スタイル ファイルでは、.bg レイヤーの各フレームの幅と高さがビューポートと同じサイズに設定されます。ただし、ユーザーのモニターのビューポートの縮尺が異なる場合があるため、一部のフレームが完全に表示されないことがあります。

setLayerDimensions() 関数は、これらの問題を修正するために使用されます。

出典: jQuery ホーム