wow.jsでスクロールに合わせてアニメーション(animate.css)をするメモ

前回animate.css(cssだけでカッチョイイアニメーションをさせるAnimate.cssメモ - kurotei databook)を紹介しましたが、今回はその派生というか補佐であるWOW.jsについて紹介します。Animate.cssではページを開いたときにすべてのアニメーションを行ってしまうのですが、このWOW.jsを使えばスクロールしてコンテンツが画面に入った時にアニメーションさせることができます。
すごいホームページがかわいいです。ぼくはすきだよ

使い方

これまた簡単です。
まず、wow.jsをインストールします。そして、プログラムに読み込ませます。

<script src="js/wow.js"></script>
<script>
   new WOW().init();
</script>

こんな感じです。次にアニメーションさせたいタグにクラスを組み込みます。

<section class="wow(必須) fadeInRightBig(アニメーション名)">
これすき
</section>

こんな感じです。sectionを使った意味は特にありません。sectionの使い方わかりません。
クラスの大文字小文字は区別されますから、注意して書きましょう。アニメーション名はAnimate.cssを参考にしてください。
あと、前回のAnimate.cssではanimatedをクラスに入れましたが、WOW.jsを使ってアニメーションをさせる場合はanimetedは要りません。
また、ページを開いたときにすでに画面に入っている(最初から表示される)コンテンツにはWOW.jsよりAnimate.cssの方を使った方がよいでしょう。wow.jsだとアニメーションしなかったりします。

結論

とてもよい

リンク

Animate.css http://daneden.github.io/animate.css/
WOW.js http://mynameismatthieu.com/WOW/

WOW.js、正式名称は大文字なのにクラスは小文字ってめんどくさいことするなぁ。

デモページ

デモじゃなくて本番ですね
http://blacktails2.github.io/kotake.html

30000アクセス突破しました。

ブログ作って1日で30000アクセス突破しました。

この度は、僕の浅い知識と経験で適当にwindowsを否定してしまい、申し訳ありませんでした。
深く反省し、これからはプログラミングとデザインについて細々とやっていこうと思います。

人生は儚い。

友達のマイクラ鯖のページを作るなどした

友達のマイクラのpvp鯖(kotake gun pvp)のチュートリアルページを作ってみました。5/16,17,18の三日間でだいたい20時間くらいかけて作りました。

その鯖のwiki→ http://www51.atwiki.jp/kotakepvp/pages/24.html

僕がつくったページ→ http://blacktails2.github.io/kotake.html

アニメーションと画像とウェブフォント使いまくっております。今回は統一感のあるページを目指しました。といってもgumby使ってるので統一感は在ると思いますが。

使ったのは gumby(cssフレームワーク),animate.css(アニメーション),wow.js(アニメーション)です。それぞれについてはまた後に記事を書こうと思います。

今回は画像を左に、文字を右にというレイアウトをグリッドシステムを使ってうまく表現できたのでよかったです。wow.jsも上手く行って良い感じです。

なんだかんだでやる気と時間がなくなって最後のところが完成していませんが、後々完成させようかと思っています。

ブログを始めるなどした

はてなブログを始めてみました。

前々からささみろぐとかhayakawaさんのブログをみて作ってみたいと思っていたのですが、どのサービスが良いのかなーと考えたあげくはてなブログにしてみました。

一回中学生の頃にブログをやってたときもあったのですが、そのときはめんどくさくてやめてしまったし、今考えれば黒歴史感しかないので闇に葬り去っています。

僕がブログを作った理由としては主に2つあります。

はじめに、rubyやweb関連、デザインの備忘録として使いたかったからです。cssフレームワークや良いチュートリアルを見つけてもそれを忘れてしまったらもったいないので、このブログに書くことで見直せるようにしようとおもったからです。

次にtwitterでまとめきれなかったことを書くためです。ウサギィなどの会社に訪問したときなど、twitterの140文字では表せないことをこちらで書きたいと思います。

日本語力が低いので読みにくいブログになるかも知れませんが、よろしくお願いします。