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サイトも賑やかになりますね！




コメント

コメントを投稿

このブログの人気の投稿

PowerShellでブラウザ（IE）を起動して指定したURLを開く方法

イメージ
今回が初のPowerShell（パワーシェル）ネタになります。 これまで Windows 上での操作と言えば、 バッチ や VBS をよく使っていましたが、 Microsoft さんはこれまでの コマンドプロンプト を捨て、 PowerShell 一筋で強化して行くとの噂が耳入りましたので、少しずつ覚えていくことにしました。 細かい話はググってください。（ powershell – Google 検索 ） 今回の目的は、 ブラウザ （ Internet Explorer ）を起動して指定した URL のサイトを表示するところまで。 PowerShellで特定のURLをIEで開く 蓋を開けてみると、とても 簡単 でビックリ！ 設定したりライブラリを読み込んだりと、もっと難しいものだと思っていました。 単純に開くならこれだけです！ # IEオブジェクト $ie = New-Object -ComObject InternetExplorer.Application; # URL指定してIEを開く $URL = "http://www.google.co.jp" $ie.Navigate($URL) $ie.Visible = $true あ～ら簡単！ ウィンドウ も設定できるようなので、必要なら以下を参考にしてみてください。 各種バーの表示・非表示 デフォルトは表示なので、敢えて書きません。 # ツールバー非表示 $ie.Toolbar = $false # メニューバー非表示 $ie.MenuBar = $false # アドレスバー非表示 $ie.AddressBar = $false # ステータスバー非表示 $ie.StatusBar = $false これらをウィンドウを開く前に設定しておきます。 読み込み完了まで待つ 余談ですが、指定したサイトにアクセスした後、ページ全体が表示されるまでしばらくかかると思いますが、読み込む前に操作しようとするとエラーになってしまいますので、表示が 完了 するまで待つ動作をメモっておきます。 # ロード完了まで待機 While($ie.busy){Start-Sleep -Milliseconds 100} Microsoft が推しているだけあ...
続きを読む

SQLPlusでのOracleリモート接続とSQLファイルを実行する方法

イメージ
Linux から SQLPlus で Oracle データベース に対し、 SQL 文を入力して実行する方法は特に問題ないと思いますが、今回は SQLPlus で 外部 から リモート 接続 し、かつ、 SQL 文が書かれた SQL ファイル を実行する方法をご紹介します。 SQLPlusでOracleにリモート接続 基本的に2種類の方法があります。 前者はそのまま データベース への接続情報を記述しますが、後者は tsnames.ora という 設定 ファイル を使って接続する方法です。 1. 設定ファイルを使用しない方法 設定 ファイル を使用せずに直接 リモート 接続 する方法は以下の通りです。 sqlplus [USER_NAME]/[PASSWORD]@[IP or HOST]:[PORT]/[SERVICE_NAME] ちなみに、サーバー指定するのはIPアドレスでもホスト名でも構いません。 2. tnsnames.oraを利用した接続方法 次の方法は、まず tnsnames.ora という 設定 ファイル に以下のように接続情報を記載します。 ファイルの場所がわからなければググってください。もしくは作成してください。 [NET_SERVICE_NAME] = ( DESCRIPTION= ( ADDRESS=(PROTOCOL = [ex:TCP])(HOST = [IP or HOST])(PORT = [PORT])) ( CONNECT_DATA= (SERVICE_NAME=[SERVICE_NAME])) ) そして、以下のように記述すると前者より簡単に接続することができます。 sqlplus [USER_NAME]/[PASSWORD]@[NET_SERVICE_NAME] こちらを参考にさせていただきました。 ## 前提Oracleクライアントがインストールされていること### 基本```C:\ > sqlplus /@:/[Servic... SQLPlusでOracleにリモート接続するメモ - Qiita - Qiita SQLファイルを実行する方法 データベース に接続した後、単純に SQL ファイル を実行するには、以下のよ...
続きを読む

【SQL】OracleのV$SQLを使って直前に実行したSQL文を参照する

イメージ
例えば、 プログラム から自動で データベース にアクセスした際、どのような SQL が発行されたか確認したい場合がありますよね。 ログ を見ればいいじゃんって話になりますけど、今回は Oracle で実行された SQL の情報が参照できる V$SQL ビューを利用する方法をご紹介します。 V$SQLで実行したSQL文を参照 単純に最近実行した SQL を参照したい場合は、たったコレだけです！ SELECT SQL_FULLTEXT, FIRST_LOAD_TIME FROM V$SQL ORDER BY FIRST_LOAD_TIME DESC; 以下の参考にしたサイトと比較しながらご説明します。 [ORACLE] 最近実行されたSQLを確認する | ORACLE逆引きノート - oracle.programmer-reference.com 参考サイトでは、「 SQL_TEXT 」を出力していますが、これだと全 SQL 文の内、先頭から 1,000文字 しか出力されないようなので、「 SQL_FULLTEXT 」としました。 次に、「 FIRST_LOAD_TIME DESC 」で作成時刻の新しい順、つまり、最近実行した SQL から順に並ぶように ソート しています。 その他にどんな項目があるかはこちらをご覧ください。 V$SQL - docs.oracle.com もっと様々な情報が参照できるようですね。 同じSQL文はキャッシュされる！？ V$SQL は、素早く動作するように キャッシュ されているようなので、全く同じ SQL を実行しても レコード が増えるわけではありません。 直前に実行した SQL でも、過去に全く同じ SQL を実行している場合は、 FIRST_LOAD_TIME で ソート しても、一番上に表示されないこともあります。 上記の例では、単純に最初の実行日時の新しいものから順に取得しました。 しかし、全く同じではなく似たような SQL を複数回実行した場合は絞り込むのが大変です。 そこで、実行した内容がわかっているのなら、 WHERE句 を使ってさらに絞り込みましょう。 SELECT SQL_FULLTEXT, FIRST_L...
続きを読む