動くカードをデザインに使いたいときに役立つプラグイン等

前回申し上げた通り、サイトで一番大事なのは中身です。しかし、サイトに来てくださる方に、どうにか楽しく閲覧していただきたい。
ということで、今度はカーソルを乗せた時や、クリックした時に動くカードをデザインに入れ込めるプラグインについて、またまた備忘のために、参考にしたサイトや使用感などを物していきます。

Delivery Card Animation

スクリーンショット 2016-09-05 17.17.05

デモ

カードをクリックすると、折りたたまれていたカードが広がったり、また三つ折りになったり、動きがかっこいいカード。基本的には、デリバリーカードなので、そういう目的で使うなら、GoogleMapなどもついていて非常に使いやすいのですが、デザインとしてカードを使いたいのであれば、不要な部分を削って、自分好みのデザインにしていくのがなかなか大変な代物です。あと、IEとedgeでアニメーションが崩れて使えないのも辛いところです。

Card Slide – CSS reveal

スクリーンショット 2016-09-05 17.23.52

デモ

カードにカーソルを合わせると、カードが上方にずれて、下に書いてある文字が見えるようになります。なかなか動きが大きいので結構目立つし、何よりCSSだけで動いているので、非常にいじくりやすくて使いやすいです。

以上、こうやって記録しておかないと、また使うときにすぐ使えませんからね。ちなみに、IEでレイアウトが崩れるのは、まだ回避しやすいんですが、edgeで崩れるのは本当にきついものがありますね。PHPで簡単に回避できる方法があれば、教えてください。