朝晩がだいぶ涼しくなりましたね！
かと思えば日中が暑い…!!
そういえば、今更ながら興味本位でインスタグラムはじめました。
最近の若者はすごいなぁ~と感心すると同時に、1日1投稿を目標にしていたけれど3日で心が折れてしまいました。笑
SNSの動向も気になるし、WEBサイトにインスタグラムって結構必須にもなってるので、続けていこうとは思います。
今日は、css1つで最近の流行りのアニメーションを実装できるvhsがすごく便利だったのでcodepenで私自身も実装してみました。
vhsは要素にアニメーションエフェクトを与え、表示/非表示させる為のスタイルシート。
すごくお手軽でblurや点滅、zoom等classを付与させればアニメーションの表示/非表示が簡単にできます。Delay等も対応しているみたいです。
実装はすごく簡単！
下記のcssをhead内に組み込むだけ。
なんですが、このCDN私の環境下ではなぜか動かないclassがあるので、Githubからダウンロードしたほうがスムーズに実装できます。
//CDN <link rel="stylesheet" href="http://d2v52k3cl9vedd.cloudfront.net/vhs/0.1.0/vhs.min.css"> //Github <link rel="stylesheet" href="css/vhs.css">
手間じゃなければどちらも試してみて、良いほうを使用してください。
【URL】vhs Githubダウンロード
公式サイトにとべばクラスごとでことなるアニメーションを見ることができます。
See the Pen vhs by sayuri (@giraffeweb) on CodePen.0
ソースを上記のみでOK！
なんですがちょっと私のcodepen上では動きません…なぜだ！
このソースをWPなりHTMLのソースに張り付ければローカルの環境でも動きます！
参考程度に見てみてください♪