animate.css＋wow.jsで手軽にかっこいいスクロールエフェクトを！


animate-wow

近年のレスポンシブやフレキシブルデザインの流行と共に、すっかりお馴染みとなったanimate.cssとwow.jsの組み合わせ。
スクロールする度にコンテンツがアニメーション付きで表示される手法です。
しかもそのアニメーションはFlashや動画を使わず、CSSのみで実現できるのでとても簡単かつエコです。


Animate.css

まずは、Animate.cssの公式サイトでどういったアニメーションがある確認しておきましょう。


Animate.css - daneden.github.io
プルダウンから効果を選んで「Aminate it」ボタンを押すだけで確認できます。

WOW.js

上記のAnimate.cssにWOW.jsを組み合わせると、WOW.jsの公式サイトのような”動き”を付けることができます。

WOW.js is a JavaScript plugin that reveals animations when you scroll. Very Animate.css Friend.
Reveal Animations When Scrolling — WOW.js - www.delac.io
下にスクロールしていくと、その効果が確認できます。

動作サンプル

CodePenに全部入りのサンプルがありましたので、ここでは敢えて使い方を紹介しません。

これであなたのWEBサイトも賑やかになりますね！




コメント

コメントを投稿

このブログの人気の投稿

Linuxでファイルの改行コードLF⇔CRLFを変換する方法

イメージ
前回、 Linux で文字コードがUTF-8のファイルに対して、BOM付き⇔BOMなしを 変換 する方法をご紹介しました。 最近ではあまり意識しなくなりましたが、UTFｰ8にはBOM（byte order mark）という厄介な存在があります。今回は、LinuxでこのBOMを付けたり外したりする方法をご紹介します。BOMとは？BOMを簡単に説明すると、そのファイルがUnicodeで符号化されているかどうかを、先... UTF-8のBOM付きとBOMなしを変換する方法（Linux） - Minory 今回は、 改行コード の LF ⇔ CRLF を 変換 する方法をご紹介します！ 3つの改行コード 面倒なことに、 OS によって 改行コード が異なります。 LF: UNIXやUnix系のシステム。Linux、AIX、Xenix、macOS、BeOS、Amiga、RISC OSなど。 CR+LF: CP/M、MP/M、MS-DOS、OS/2、Microsoft Windows。 CR: コモドールによるシステム、Apple IIファミリ、Mac OS（バージョン9まで）、OS-9。 改行コード – Wikipedia 普段からよく使う 改行コード は、 Linux の LF と Window の CRLF です。 利用する システム によっては、これらの 改行コード の違いが邪魔して、動かなかったりします。 そこで、 LF から CRLF 、または CRLF から LF に変換してみましょう。 改行コードを確認する fileコマンドを使う BOM編でもご紹介した file コマンド を利用して確認できます。 file sample.txt このように入力すると、 CRLF の場合は以下のように表示されます。 sample.txt : UTF-8 Unicode (with BOM) text, with CRLF line terminators. 「 with CRLF line terminators 」と表示されれば CRLF 、無ければ LF ということになります。 odコマンドを使う 以下のように実行すると、 od -c sample.txt 改行している箇所が「 \n （ LF ...
続きを読む

RHEL 7でスタティック（静的）ルートを追加する4つの方法

イメージ
今回は、 Linux の ルーティング テーブル に対して、 スタティック （ 静的） ルート を 追加 する方法をいくつかご紹介します。 と言うのも、場合によっては コマンド がなかったり、設定した結果が思うように返ってこないこともあるので、どのような状況にも対応できるように、知っていても損はないと思います。 スタティック（静的）ルートとは？ スタティックルート とは、管理者が宛先 ネットワーク への最適な ルート を手動で設定した ルート のことで、 ネットワーク の状態に変化があった場合でも、他に有効な宛先 ルート があっても、自動的にその ルート に切り替わることはありません。 ルーティングについてはじめから解説。 スタティックルーティングとは - www.infraexpert.com 設定内容の確認方法 ip コマンド を利用して、 ルーティング の設定内容を確認します。 ip r（route） すると、このように表示されます。 default via 192.168.100.254 dev ens160 proto static metric 100 192.168.100.0/24 dev ens160 proto kernel scope link src 192.168.100.10 metric 100 192.168.100.0/24 via 192.168.100.254 dev ens160 proto static metric 101 上の2行はデフォルトで設定されているものですね。 3行目の ルーティング 設定例を見ると、以下のように設定されています。 IPアドレス：192.168.100.0 サブネット：255.255.255.0 ゲートウェイ：192.168.100.254 インターフェース：ens160 メトリック：101 次に、以下の ネットワーク デバイス の情報を見てみましょう。 ip a このように表示されるはずです。 1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000 link/loopbac...
続きを読む

UTF-8のBOM付きとBOMなしを変換する方法（Linux）

イメージ
最近ではあまり意識しなくなりましたが、 UTFｰ8 には BOM （ byte order mark ）という厄介な存在があります。 今回は、 Linux でこの BOM を付けたり外したりする方法をご紹介します。 BOMとは？ BOM を簡単に説明すると、そのファイルが Unicode で符号化されているかどうかを、先頭の見えない 3バイト で表現するものです。 バイトオーダーマーク (英: byte order mark) あるいはバイト順マーク（バイトじゅんマーク）は通称BOM（ボム）といわれる、Unicodeの符号化形式で符号化したテキストの先頭につける数バイトのデータのことである。このデータを元にUnicodeで符号化されていることおよび符号化の種類の判別に使用する。 バイトオーダーマーク – Wikipedia 要は、この 先頭の見えない3バイト が邪魔して、多くのシステムで問題になっています。 LinuxでBOMを変換する まず、以下のコマンドで対象の ファイル が BOM付き か、 BOMなし なのか確認できます。 file sample.txt 実行した結果はこのように表示されます。 sample.txt : UTF-8 Unicode (with BOM) text. この「 (with BOM) 」があったら BOM付き ということですね。 逆になかったら BOMなし という事になります。 それでは 変換 していきましょう。 ここでは、 vi のオプション -c を利用して、 ファイル を開かずに BOM を 変換 していきます。 BOMなし → BOM付き BOM付き にするには、 vi で「 bomb 」をセットして保存しているだけです。 vi -c ‘set bomb’ -c ‘wq!’ sample.txt これで BOM付き になりました！ BOM付き → BOM なし 反対に BOMなし にするには「 nobomb 」をセットします。 vi -c ‘set nobomb’ -c ‘wq!’ sample.txt これで BOMなし になりました！ あとは先程の file コマンド で確認してみてください。
続きを読む