'javascript' Tag

Animate.cssとwow.jsで簡単にリッチなサイトを作る方法

main_catch

先週に引き続き「Animate.css」を使った要素が動きまくりなwebの作成方法です。前回は「Animate.css」と「Ani.JS」を組み合わせることでアニメーションのトリガーを設定し「オンマウス時」や「クリック時」にアニメーションを発動させる方法をお伝えいたしましたが、今回は「Animate.css」と「wow.js」を組み合わせることによりアニメーションのトリガーを「スクロールが要素に達したら実行する」方法をご紹介していきます。

ちょっと言葉だけだと分かり難いので、まずはサンプルサイトをご覧になられて下さい。(※初回読み込み時はブラウザに要素が表示されるスピードより先にアニメーションしてしまうと思うので、一度更新されてみてください)順次ご説明いたしますが、サンプルサイトでは「単純にスクロールが要素に達した時」以外のトリガーも設定しているため少しオーソドックスな設定とは違いますのであしからず・・・。

「Animate.css」と「wow.js」をダウンロード~使用準備

それぞれ配布元から取得されて下さい。■Animate.cssはこちら■wow.jsはこちらから ダウンロードが完了したらヘッド内にそれぞれ読み込んで下さい。※ちなみにJQueryは使用しません。

<link rel=”stylesheet” type=”text/css” href=”css/animate.css”>
<script src=”js/wow.js”></script>

2ファイルの読み込みが完了したらwow.jsの為の記述を追加 ※外部jsでもヘッド内に記述でもどちらでもOKです。

<script>
new WOW().init();
</script>

アニメーションを設定したい要素にclass名を追加

スクロールがその要素に達した時にアニメーションを実行したい場合はクラス名に「wow」と「追加したいアニメーション名」を記述します。

<div class=”wow fadeInDown”>

これで編集完了です。このままの設定でも十分素敵なサイトが作成できるのですが、「wow.js」の力をフルに活用するとさらにステキなサイトが作成可能です。

「wow.js」のオプションを使いアニメーショントリガーの実行タイミングをずらす

サンプルサイトを見て頂くとすぐ分かると思うのですが、ファーストビューのロゴ・グローバルナビ・メインキャッチ上のテキストが時間差で表示→アニメーションしていると思います。

時間差表示をさせたい場合はwow.jsに用意されているオプションを利用します。

data-wow-duration アニメーション時間
data-wow-delay ロードからアニメーションのスタートのタイミング
data-wow-offset 画面に表示されてからどこまでの距離をスクロールしたらスタートするか
data-wow-iteration アニメーションの繰り返し回数

これを実際にマークアップすると

<!– 5秒後に2秒かけてゆっくり画面左からスライドイン –>
<div class=”wow slideInLeft” data-wow-duration=”2s” data-wow-delay=”5s”></div>
<!– スクロール10を過ぎたら右からのスライドインを10回繰り返す –>
<div class=”wow slideInRight” data-wow-offset=”10″ data-wow-iteration=”10″></div>

上記のようになります。前回の記事でも書きましたがこの組み合わせでパララックスなサイトを作ると面白いものが作れそうですね!!

ニワカソフトでは新しい技術への飽くなき探究心を切らしたことがありません!!お客さまにとって最善のアウトプットが出来るように日々精進しております。ホームページの新規立ち上げやリニューアル等ございましたら、ぜひご相談下さい!!

手軽で簡単!!CSS3とJSで様々なアニメーション効果を付ける方法

main_catch

今回は手軽にCSSアニメーションを作成することが出来るCSSライブラリ「Animate.css」をご紹介いたします。

「Animate.css」をダウンロード

配布元からコードをダウンロードされて下さい。ダウンロードしたZIPを解凍すると沢山ファイルがあると思いますが、使用するのは「animate.css」「animate.min.css」のどちらかになります。今回の記事では「animate.css」を使用します。

「Animate.css」使用準備

ヘッド内に「animate.css」を読み込んでいただくと使用準備は完了です。

<link rel=”stylesheet” type=”text/css” href=”ファイルパス/animate.css”>

「Animate.css」の使用方法

アニメーションを追加したい要素に追加したいアニメーションのclass名と「animated」というクラス名を追加するのみでOKです。

<p class=”animated flash”>flash</p>

各ボタン(といっても押せないですが…)の上にマウスを合わせて頂くとアニメーションします。ボタンに記述している英単語がそのアニメーションの名前となります。

Attention seekers (注意を促す時に使えるアニメーション)

  • flash
  • bounce
  • shake
  • tada

Fading entrances (フェードしながら、表示するアニメーション)

  • fadeIn
  • fadeInDown
  • fadeInLeft
  • fadeInRight
  • fadeInDownBig
  • fadeInLeftBig
  • fadeInRightBig

Fading exits (フェードしながら、消えるアニメーション)

※一度オンマウスしてしまうと表示されなくなります(笑)

  • fadeOut
  • fadeOutUp
  • fadeOutDown
  • fadeOutLeft
  • fadeOutRight
  • fadeOutUpBig
  • fadeOutDownBig
  • fadeOutLeftBig
  • fadeOutRightBig

Bouncing entrances (バウンドしながら、表示するアニメーション)

※一度オンマウスしてしまうと表示されなくなります(笑)

  • bounceOut
  • bounceOutDown
  • bounceOutUp
  • bounceOutLeft
  • bounceOutRight

Rotating entrances (回転しながら、表示するアニメーション)

  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight

Rotating exits (回転しながら、消えるアニメーション)

※一度オンマウスしてしまうと表示されなくなります(笑)

  • rotateOut
  • rotateOutDownLeft
  • rotateOutDownRight
  • rotateOutUpLeft
  • rotateOutUpRight

無限にアニメーションさせたい場合

実はこの「Animate.css」は単体ではページが表示された時に一度だけアニメーションして終わりという仕様になっています。無限にアニメーションさせたい場合は。下記のように記述します。

無限ループさせたい場合

<p class=”animated flash infinite”>flash</p>

class名に「infinite」を付随させることで無限にループします

  • flash

サンプルの様にオンマウスでアニメーションさせたい場合

オンマウスでアニメーションをするには要素にトリガーを設定できるようにするJSAni.JSと併用します。(←こちらのリンクからダウンロードされて下さい)※JQueryは使用していないので読み込みの必要はありません

「Ani.JS」を</body>の直前に配置

<script src=”js/anijs.js”></script>
</body>
</html>

オンマウスでアニメーションしたい要素のコードをclass名ではなくdata-anijsに変更

<p data-anijs=”if: mouseover, do: flash animated”>flash</p>

少し複雑な雰囲気になってしまいますが、ここで重要になるのは「do:」の後の「flash animated」です。ここを自分のしたいアニメーション名にする事でオンマウスでアニメーションさせる事が可能になります。

  • flash

「if:」の後のmouseoverをclickに変更するとクリックがトリガーとなります。

<p data-anijs=”if: click, do: flash animated”>flash</p>
  • flash

スクロールが要素に達したらというトリガーでアニメーションを実行させるようにすると、パララックス効果を使ったサイトの華やかさも増しそうですね!!
ニワカソフトでは常に新しいことに挑戦し、より良いものを皆様にご提供できるよう努力しております。ぜひホームページの新規作成・リニューアルはニワカソフトにご相談ください!!

クロスブラウザ対策をCSSハックを使用せず行う方法

maincatch

クロスブラウザ対策をCSSハックを使用せず行う方法

web制作を進める中で頭を抱えてしまう事の一つに「クロスブラウザ対策」があります。特に古いIEへの対策は製作者泣かせと言っても過言では無いくらいです。CSSハックを使用して古いIEへの対策などが一般的ではありますが、ハックを使用してのクロスブラウザ対策は結構な確率で上手くいかない事が多いです。今回はJavaScriptを使用してのクロスブラウザ対策が行える「css_browser_selector.js」をご紹介します。

css_browser_selector.jsの使用準備

まずは配布元からソースをダウンロードして下さい。続いてマークアップです。<head>内にcss_browser_selector.jsを読み込んでください。(※特にJQuery等のライブラリは使用されていないのでcss_browser_selector.jsの読み込みのみで問題ありません。)

<script src=”css_browser_selector.js” type=”text/javascript”></script>

準備は以上です。後はCSSに記述をするだけでOKです。例えばIEにだけ処理を施したい場合は下記記述になります。

/*IE以外は文字色を黒に*/
p {
color:#000;
}

/*IEは文字色を赤に*/
.ie p {
color:#f00;
}

さらに、IEに関してはバージョン毎に指定をする事も可能です。下記が対応ブラウザ一覧です。

/*Internet Explorer (All versions 11除く)*/
.ie selecter{
}

/*IE8*/
.ie8 selecter {
}

/*IE7*/
.ie7 selecter {
}

/*IE6*/
.ie6 selecter {
}

/*Firefox*/
.gecko selecter{
}

/*Opera*/
.opera selecter {
}

/*Safari*/
.safari selecter{
}

/*chrome*/
.chrome selecter {
}

OSやデバイスで割り振る事も可能

このスクリプトの優れている点は、OSやデバイスで割り振る事も可能な点です。例えばもう開発が中止されている、ウィンドウズ版のサファリのみに適用させたい場合

/*他のOS・ブラウザ*/
p {
text-align:left;
}

/*ウィンドウズ版のサファリ*/
.win.safari p{
text-align:center;
}

上記のように記述するとWindows版サファリでは<p>はセンター寄せ、それ以外は左寄せとなります。では次にデバイスでのハック例です。

/*その他のデバイス*/
p {
font-size:24px;
}

/*iphone*/
.iphone p {
font-size:18px;
}

/*android*/
.android p {
font-size:36px;
}

上記のように記述するとiphoneでは<p>のフォントサイズは18px、アンドロイドは36px、それ以外は24pxとなります。では対応OS・デバイスの一覧です

/*****
対応OS
******/

/*Microsoft Windows*/
.win selecter {
}
/*OSがwindowsでブラウザがクロームの時*/
.win.chrome selecter {
}

/*Linux*/
.linux selecter{
}

/*Mac OS*/
.mac selecter{
}

/***********
対応デバイス
************/

/*iPod Touch*/
.ipod selecter{
}

/*iPhone*/
.iphone selecter{
}

/*android*/
.android selecter{
}

こちらにサンプルを用意いたしましたので、ぜひ色々なブラウザで確認されてみて下さい!(PCでのブラウザ振分のみのサンプルとなります)
※IE11はレンダリングエンジンがIE10以前と変わりEdgeになった為ハック出来ないです。今後、時間がある時に改良してみようかなと思います。