1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

スライドをjQuery & TweenMax & CSS3の合わせ技で自作する

Last updated at Posted at 2020-04-11

なぜ、スライダープラグインを使わなかったのか?

お客様が、「是非このサイトのスライドを実装して欲しい!」と強いご要望があったからです。
そのサイトのソースを見ると、バリバリのフルスクラッチ!!
自分の腕では到底真似できません:joy:

これは、既存のスライダープラグインで、
うまく実装できるか分からなかったので、
javaScriptライブラリで、自作スライドをカスタマイズすることにしました。

実装したかった内容

表示されているスライド以外にもclassを付与する

  • 「表示されているスライド」
    にclassをつけて、CSS3 Animationを発火させる。

というのは、よくあるのですが、

  • 「表示された直後のスライド」
    にもclassをつけて、CSS3 Animationを発火させる。

という方法は見たことがなかったので、これをどうするか悩みました。。。
これは、「表示されているスライド」のすぐ下に、
「表示された直後のスライド」を移動させるのに必要となります。

スマホの時、スライドをスワイプさせる

これは、スライダープラグインで当たり前の機能ですが、
自作でできるかちょっと不安でした。。

実装方法

クラス付与させる方法

実装したいスライドと似ている動きだったので、
こちらを参考させていただきましたm(_ _)m
TweenMaxを使って自作スライドを制作されています。
https://codepen.io/jonathan/pen/qqmBjQ

これを改造し、
表示された直後のスライドにもclassを付与することに成功しました!

クラスを付与した瞬間に
スライドと、その中の要素のCSS3 Animationを発火させています。
これだと、Animationがカスタマイズしやすいのがメリットです。

スマホの時、スライドをスワイプさせる

こちらを参考させていただきましたm(_ _)m
jQueryでとても簡単に実装できました!
https://qiita.com/Hijiri-K/items/5ad5eaec10c0e7921ada

実装したアニメーションがこれです(CodePen)

  • 表示されているスライドには**.is-now**を付与
  • 表示された直後のスライドには**.is-old**を付与

しています。

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?