世界で最もシンプルで最小のスライダー
私は当時のレイアウト設計者として、プラグインがどのように機能するかを完全に理解し、好奇心を持ってフロントエンドを繰り返し突っ込み、コードの縮小を実現し、CSSまたは同じレイアウトでの作業を最適化しようとしました。
スライダーは、z-indexを使った数回の実験の後に生まれました。驚いたことに、プログラムはわずか10行でした。画像を背景画像に変換せず、レイアウトブロックもスクロールできるようにしました。
シーンコンテナのHTMLは次のとおりです。
<figure>
<img src="./graphics/R-1.png" alt="RevolveR Labs" />
<img src="./graphics/R-2.png" alt="RevolveR Labs" />
<img src="./graphics/R-3.png" alt="RevolveR Labs" />
<img src="./graphics/R-4.png" alt="RevolveR Labs" />
</figure>
X：0とY：0（上：0pxと左：0px）の1つのデッキに画像タグをロードするCSSを追加しましょう：
figure {
background: repeating-linear-gradient(45deg, transparent, transparent .1vw, #ffffff45 .1vw, #b7754594 .25vw), linear-gradient(to bottom, #eeeeee5c, #bfbfbf1a);
box-shadow: inset 0 0 1vw #000;
outline: .2vw solid #b1917fbd;
border: .1vw dashed #999;
display: inline-block;
text-align: center;
position: relative;
overflow: hidden;
margin: 0 auto;
width: 36.46vw;
height: 22vw;
}
figure img {
position: absolute;
width: 36.46vw;
height: 22vw;
opacity: 1;
left: 0;
top: 0;
}
8K以上のモニターが登場したため、レイアウトでPXなどの静的な値を使用しなくなりましたが、スケーラブルなビューポートユニットですべてを実行します。これにより、メディアクエリへの階段を回避し、画面解像度のインターフェイスを設計できます。
それでは、時間間隔で効果なしにデッキを単純にめくるJavaScriptハンドラーを作成しましょう。
var e = document.querySelectorAll('figure img');
let i = 0;
if(e) {
void setInterval(() => {
e[i].style.zIndex = 0;
i++;
i = i === e.length ? 0 : i;
e[i].style.zIndex = 1;
}, 3000);
}
setIntevalを使用して、初期化時に3秒間バキュームし、疑似ループにリセット可能なイテレーターを実装します。タイマーの次のティックごとに、目的の画像のzインデックスを順番に変更します。前の画像のz-indexは永続的に0にリセットされ、z-indexを1に設定すると、現在のループ要素が前面に表示されます。
これで完了です。世界で最もシンプルで最小のスライダーは、カラシニコフのアサルトライフルのように、準備ができており、信頼性が高く、初歩的です。これで、デッキ全体がカチカチ音をたてて、疑似ループの現在の要素が前面に出てきます。純粋なJavaScriptでは、すべてサードパーティなしで機能します。
効果を追加する
ローター（私が呼んだように）は単純すぎて、トランジション効果を追加したかったのです。これを行うには、クールなイージング効果でCSSをアニメーション化する方法を知っているライブラリをすでに使用する必要があります（RevolveRには43個あります）。
リストは次のとおりです。
let launch = RR.browser;
RR.allowSlide = true;
var e = RR.sel('figure img')
let i = 0;
void setInterval(
() => {
if( e && RR.allowSlide ) {
RR.animate([ e[ i ] ], ['opacity:0:800:lienar'], () => {
e[ i ].style.zIndex = 0;
i++;
i = i === e.length ? 0 : i;
RR.animate([ e[ i ] ], ['opacity:.8:800:swingTo'], () => {
e[ i ].style.zIndex = 1;
});
});
}
},
3000);
ここでは、コールバックシーケンスを実装してアニメーションの状態を完了します。これは、合計時間がsetIntervalタイマータイプの間に収まり、フェードとちらつきのあるクールな遷移を取得します。
すべて問題ありませんが、ポインタがステージ上にあるときにフラグを反転することで遅延を追加します。
RR.event('figure img', 'mouseenter', () => {
RR.allowSlide = null;
RR.event('figure img', 'mouseleave', () => {
RR.allowSlide = true;
});
});
RevolveRLabsによるローターの動作
ここ で動作中のローターを参照してください。
ご覧のとおり、ここにもそれほど多くのコードはなく、より複雑で興味深い効果を実装できます。しかし、それはあなた次第です。