ホームページ  >  記事  >  ウェブフロントエンド  >  テキストカルーセルと画像カルーセルも純粋な CSS を使用して実現できることがわかりました。

テキストカルーセルと画像カルーセルも純粋な CSS を使用して実現できることがわかりました。

青灯夜游
青灯夜游転載
2022-06-10 13:00:594224ブラウズ

テキストカルーセルと画像カルーセルを作成するにはどうすればよいですか?皆さんが最初に考えるのはjsを使うかどうかですが、実はテキストカルーセルや画像カルーセルも純粋なCSSでも実現できますので実装方法を見ていきましょう。

テキストカルーセルと画像カルーセルも純粋な CSS を使用して実現できることがわかりました。

#今日は、実際のビジネスで使えるアニメーションテクニックを紹介したいと思います。 [推奨学習:

css ビデオ チュートリアル ]

フレームごとのアニメーションとトゥイーン アニメーションを巧みに使用して、無限ループのカルーセル効果を実現します:

上の図を見て、これは非常に単純な移​​動アニメーションではないのかと尋ねずにはいられない学生もいます。

簡単な分析をしてみましょう。表面的には、要素の

transform:transform:transform() だけが変位しているように見えますが、しかし注意してくださいここには 2 つの問題があります:

  • これは無限カルーセル効果です。私たちのアニメーションは、任意の数の要素の無限カルーセル切り替えをサポートする必要があります。

  • これはカルーセル Play なので、最後まで実行する場合は、アニメーションを最初の要素までカットする必要があります

この時点で、一時停止して考えることができます。要素が 20 個ある場合、同様のことを行う必要があります。CSS を使用して実装された無限カルーセル ブロードキャスト、どのように実行しますか?

フレームごとのアニメーション制御全体の切り替え

まず最初に、

ステップ イージング機能とも呼ばれるフレームごとのアニメーション効果を使用する必要があります を使用します。最初に私の記事を読むことを強くお勧めします。 記事 - CSS アニメーションの詳細な説明。この記事を理解する上で重要な役割を果たします。 それでは、記事の冒頭の例を使用しましょう。このような HTML 構造があるとします:

{
    /* Keyword values */
    animation-timing-function: step-start;
    animation-timing-function: step-end;
    /* Function values */
    animation-timing-function: steps(6, start)
    animation-timing-function: steps(4, end);
}

まず、このような単純なレイアウトを実装します:

ここでは、カルーセル効果と任意の数を実現するために、

animation-timing-function:steps():

<div class="g-container">
  <ul>
    <li>Lorem ipsum 1111111</li>
    <li>Lorem ipsum 2222222</li>
    <li>Lorem ipsum 3333333</li>
    <li>Lorem ipsum 4444444</li>
    <li>Lorem ipsum 5555555</li>
    <li>Lorem ipsum 6666666</li>
  </ul>
</div>
# # を使用できます。 #上記のいくつかの CSS 変数を見てパニックにならないでください。実際には理解するのは簡単です:

calc(var(--speed) * var(--s) )

: 1 つのアニメーションの消費時間* カルーセルの数、つまりアニメーションの合計時間

  • steps(var(--s)) コマ送りアニメーションのフレーム数です。ここでは steps(6)

    としています。これがわかりやすいです。
  • calc(var(--s) * var (--h) * -1px)) 単一の li コンテナの高さ * カルーセルの数 (実際には ul 全体の高さであり、終了を設定するために使用されます)フレームごとのアニメーションの値

  • 上記の効果は実際には次のようになります:

If

overflow: hidden

をコンテナに追加すると、次のような効果が得られます。

このようにして、全体の構造を取得します。少なくとも、全体の効果は周期的です。

ただし、これはフレーム単位のアニメーションなので、切り替えが見えるだけで、各フレーム間のトランジション アニメーション効果はありません。そこで、次にトゥイーン アニメーションを導入する必要があります。 トゥイーン アニメーションを使用して 2 つのデータ セット間の切り替えを実現する

トゥイーン アニメーションを使用して、動的な切り替え効果を実現する必要があります。

このステップは実際には非常に簡単で、

transform

を使用して一連のデータを状態 A から状態 B に移動する必要があります。

デモ用に 1 つだけ取り出した場合、おおよそのコードは次のとおりです:

:root {
  // 轮播的个数
  --s: 6;
  // 单个 li 容器的高度
  --h: 36;
  // 单次动画的时长
  --speed: 1.5s;
}
.g-container {
  width: 300px;
  height: calc(var(--h) * 1px);
}
ul {
  display: flex;
  flex-direction: column;
  animation: move calc(var(--speed) * var(--s)) steps(var(--s)) infinite;
}
ul li {
  width: 100%;
}
@keyframes move {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, calc(var(--s) * var(--h) * -1px));
  }
}
<div class="g-container">
  <ul style="--s: 6">
    <li>Lorem ipsum 1111111</li>
    <li>Lorem ipsum 2222222</li>
    <li>Lorem ipsum 3333333</li>
    <li>Lorem ipsum 4444444</li>
    <li>Lorem ipsum 5555555</li>
    <li>Lorem ipsum 6666666</li>
  </ul>
</div>
非常に単純なアニメーション:

上記の効果をもとに、冒頭で述べた

コマ送りアニメーション

トゥイーンアニメーション テキストカルーセルと画像カルーセルも純粋な CSS を使用して実現できることがわかりました。 を組み合わせると、ul の全体の動きが重なり合います。 li の単一の動きを一緒に:

:root {
  --h: 36;
  --speed: 1.2s;
}
ul li {
  height: 36px;
  animation: liMove calc(var(--speed)) infinite;
}
@keyframes liMove {
  0% {
    transform: translate(0, 0);
  }
  80%,
  100%  {
    transform: translate(0, -36px);
  }
}
はこのような効果を得ることができます:

##すごい、魔法のような化学反応が起こりました。

フレームごとのアニメーション

トゥイーン アニメーションの組み合わせに基づいて、カルーセル効果をほぼ達成しました。

当然,有一点瑕疵,可以看到,最后一组数据,是从第六组数据 transform 移动向了一组空数据:

末尾填充头部第一组数据

实际开发过轮播的同学肯定知道,这里,其实也很好处理,我们只需要在末尾,补一组头部的第一个数据即可:

改造下我们的 HTML:

<div class="g-container">
  <ul>
    <li>Lorem ipsum 1111111</li>
    <li>Lorem ipsum 2222222</li>
    <li>Lorem ipsum 3333333</li>
    <li>Lorem ipsum 4444444</li>
    <li>Lorem ipsum 5555555</li>
    <li>Lorem ipsum 6666666</li>
    <!--末尾补一个首条数据-->
    <li>Lorem ipsum 1111111</li>
  </ul>
</div>

这样,我们再看看效果:

Beautiful!如果你还有所疑惑,我们给容器加上 overflow: hidden,实际效果如下,通过额外添加的最后一组数据,我们的整个动画刚好完美的衔接上,一个完美的轮播效果:

完整的代码,你可以戳这里:CodePen Demo -- Vertical Infinity Loop

https://codepen.io/Chokcoco/pen/RwQVByx

横向无限轮播

当然,实现了竖直方向的轮播,横向的效果也是一样的。

并且,我们可以通过在 HTML 结构中,通过 style 内填写 CSS 变量值,传入实际的 li 个数,以达到根据不同 li 个数适配不同动画:

<div>
  <ul>
    <li>Lorem ipsum 1111111</li>
    <li>Lorem ipsum 2222222</li>
    <li>Lorem ipsum 3333333</li>
    <li>Lorem ipsum 4444444</li>
    <li>Lorem ipsum 5555555</li>
    <li>Lorem ipsum 6666666</li>
    <!--末尾补一个首尾数据-->
    <li>Lorem ipsum 1111111</li>
  </ul>
</div>

整个动画的 CSS 代码基本是一致的,我们只需要改变两个动画的 transform 值,从竖直位移,改成水平位移即可:

:root {
  --w: 300;
  --speed: 1.5s;
}
.g-container {
  width: calc(--w * 1px);
  overflow: hidden;
}
ul {
  display: flex;
  flex-wrap: nowrap;
   animation: move calc(var(--speed) * var(--s)) steps(var(--s)) infinite;
}
ul li {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  animation: liMove calc(var(--speed)) infinite;
}
@keyframes move {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(calc(var(--s) * var(--w) * -1px), 0);
  }
}
@keyframes liMove {
  0% {
    transform: translate(0, 0);
  }
  80%,
  100%  {
    transform: translate(calc(var(--w) * -1px), 0);
  }
}

这样,我们就轻松的转化为了横向的效果:

完整的代码,你可以戳这里:CodePen Demo -- Horizontal Infinity Loop

https://codepen.io/Chokcoco/pen/JjpNBXY

轮播图?不在话下

OK,上面的只是文字版的轮播,那如果是图片呢?

没问题,方法都是一样的。基于上述的代码,我们可以轻松地将它修改一下后得到图片版的轮播效果。

代码都是一样的,就不再列出来,直接看看效果:

完整的代码,你可以戳这里:CodePen Demo -- Horizontal Image Infinity Loop

https://codepen.io/Chokcoco/pen/GRQvqgq

掌握了这个技巧之后,你可以将它运用在非常多只需要简化版的轮播效果之上。

再简单总结一下,非常有意思的技巧:

  • 利用 逐帧动画,实现整体的轮播的循环效果

  • 利用 补间动画,实现具体的 状态A状态B* 的动画效果

  • 逐帧动画 配合 补间动画 构成整体轮播的效果

  • 通过向 HTML 结构末尾补充一组头部数据,实现整体动画的衔接

  • 通过 HTML 元素的 style 标签,利用 CSS 变量,填入实际的参与循环的 DOM 个数,可以实现 JavaScript 与 CSS 的打通

(学习视频分享:web前端

以上がテキストカルーセルと画像カルーセルも純粋な CSS を使用して実現できることがわかりました。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はsegmentfault.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。