これは、非常にクールな効果を持つさまざまなスタイルのページレイアウトスライドショーの特別な効果です。この特殊効果では、スライドショーはフロントナビゲーションボタンとバックナビゲーションボタンに切り替えられ、各スライドの写真には異なるレイアウト効果があります。
このスライド効果はAnime.jsを使用してスライドのアニメーション効果を作成し、多くのCSS3プロパティを使用します。エフェクトを見るには、最新のブラウザの最新バージョンが必要です。 IEブラウザの場合、IE11以降のブラウザで以前の効果を見ることができます。 IEブラウザはSVGクリップパス属性をサポートしていないため、最後の効果はわかりません。
使い方
HTML構造
このスライドの基本的なHTML構造は次のとおりです。各スライドには、独自のレイアウトクラスと、独自のアニメーション効果を作成するためのデータレイアウトプロパティがあります。
<div> <div data-layout = "layout1"> <div> <div> <div style = "background-image：url（img/1.jpg）;"> </div> </div> <div> div style = "background-image：url（img/2.jpg）; url（img/3.jpg）; "> </div> </div> </div> <div> <h3> now </h3> <p> ... <a href ="＃ ">もっと読む</a> </p> </div> <！ - /スライド - > <div> < /スライドショー - >
CSSスタイル
レイアウトの1つのCSSスタイルは次のとおりです。
/ *レイアウト1：3グリッド画像 */。スライド - layout-1 .slide__img {position：absolute;幅：calc（50％-1EM）; } .slide - layout-1 .slide__img：first-child {左：0.5em;高さ：100％; } .slide - layout-1 .slide__img：nth-child（n + 2）{left：calc（50％ + 0.5em）;高さ：calc（50％-0.5em）; } .slide - layout-1 .slide__img：nth-child（3）{top：calc（50％ + 0.5em）;}結果を以下の図に示します。
JavaScript
各スライドレイアウトのアニメーション効果は、JSファイルで定義されています。構造は次のとおりです。スライドを入力して出発するために、さまざまなアニメーション効果を設定できます。次のコードは、最初のレイアウトのサンプルコードです。
mlslideshow.prototype.options = {//開始位置。 startIdx：0、//レイアウト構成。 // [レイアウト名]：{out：{navigating out out out out}、in：{navigating in properties}} layoutconfig：{layout1：{out：{next： '-100％'、{next： '-100％'、prev： '100％'}、rotatez：{next：index）{return（eL、index） }、prev：function（el、index）{return anime.random（0、15）; }}、Opacity：0、Duration：1200、Easing： 'Easeoutquint'、Iteasdelay：80}、in：{transetProps：{next： '100％'、prev： '-100％'}、rotatez：{next：function（el、index）{return anyme.random（0、15）; }、prev：function（el、index）{return anime.random（-15、0）; }}、不透明：0、}、translatex： '0％'、rotatez：0、opacity：1、duration：700、easing： 'easeoutquint'、itemsdelay：80}}、layout2：{ / * /}、layout3：{ / * ... * /}、 / * / * / * / * /}};上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。