'CSS3' 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のみでアニメーションする背景を作る方法

main_catch

CSSのみで雪が降るアニメーション背景を作る方法

今回はCSS3のみを使い、雪が降る背景の作成の仕方をご紹介します。参考にさせて頂いたのはコチラの海外サイトです。今回の記事はCSS3のアニメーション等をフルに活用するのでIE9以下は動作しませんのであしからず・・・。 完成サンプルはコチラ!!

まずは降らせる雪の透過ピングを作成、または下記のサンプルからダウンロードされて下さい。

サイズ:500×500
サイズ:400×400
サイズ:300×300

ダウンロードされる方は、それぞれの画像の上で「右クリック」から「画像の保存」でダウンロード出来ます。(※サイズが見た感じ全部同じに見えるのは、とりあえず表示様にそうしているだけです。)一枚の画像でも、雪を降らせることは可能ですが三枚の画像を使うことで奥行き等が表現できますのでオススメです。

<body>に背景画像を設定する

body {
background-color: #6b92b9;
background-image: url(‘snow1.png’), url(‘snow2.png’), url(‘snow3.png’);
}

CSS3では背景画像を複数設定する事が可能になりました。「一番上:snow1.png」→「二番目:snow2.png」→「一番下:snow3.png」と左から順番の重なりになります。

animationの設定

body {
background-color: #6b92b9;
background-image: url(‘snow1.png’), url(‘snow2.png’), url(‘snow3.png’);
animation: snow 20s linear infinite;
}

CSS3のanimationを使用するには「animationプロパティ」でアニメーションさせたい要素にアニメーションの定義を記述しその後で、「@keyframes」でアニメーションの詳細を設定します。

上記の記述の意味としては・・・

■アニメーションの名前は「snow」
■一回のアニメーションが終了するまでに掛かる時間は「20s(秒)」
■アニメーションのタイミングや進め方は「linear(一定)」
■アニメーションの繰り返しは「無限」

となります。

keyframesの設定

@keyframes snow {
0% {background-position: 0 0, 0 0, 0 0;}
100% {background-position: 500px 500px, 300px 300px, 400px 400px;}
}

上記解説です。@keyframesの後に半角スペースを空けてanimationプロパティで設定した名前(今回の場合snow)を指定します。トドのつまり、この@keyframesの設定はanimationで「snow」と命名されたanimationプロパティの設定となります。

次に「~%」ですが、

■0%がアニメーションの開始時の設定。
■100%がアニメーションの終了時の設定となります。

0%(開始)の時はbackground-positionは3枚の背景画像全て表示位置は「0 0」=左上
100%(終了)の時はそれぞれの画像サイズ分だけ右下に表示となります。

一連の動作をまとめると、「snow」と命名したアニメーションは20秒掛けて一定の速度で背景画像が左上から右下にエンドレスで移動する。という事になります。

ベンダープレフィックスを付けて各ブラウザ対応させる

animationと@keyframesの設定だけでは各ブラウザで雪がアニメーションしません。これだけの記述で動いた人は、IE10以降かfirefoxを使用されている方だと思います。webkit系のchromeやsafariの方は動いていないはずです。各主要ブラウザに対応させる為、それぞれのベンダープレフィックスを付けてあげましょう。

body {
background-color: #6b92b9;
background-image: url(‘../img/snow.png’), url(‘../img/snow2.png’), url(‘../img/snow3.png’);
-webkit-animation: snow 20s linear infinite;/*chrome&safari*/
-moz-animation: snow 20s linear infinite;/*firefox*/
-ms-animation: snow 20s linear infinite;/*ie*/
animation: snow 20s linear infinite;
}

@keyframes snow {
0% {background-position: 0 0, 0 0, 0 0;}
100% {background-position: 500px 500px, 300px 300px, 400px 400px;}
}
/*chrome&safari*/
@-webkit-keyframes snow {
0% {background-position: 0 0, 0 0, 0 0;}
100% {background-position: 500px 500px, 300px 300px, 400px 400px;}
}
/*firefox*/
@-moz-keyframes snow {
0% {background-position: 0 0, 0 0, 0 0;}
100% {background-position: 500px 500px, 300px 300px, 400px 400px;}
}
/*ie*/
@-ms-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 500px, 300px 300px, 400px 400px;}
}

正直な所、firefoxとIEはベンダープレフィックス無くても問題無いです。ただ、過去のverではベンダープレフィックスが無いと動かない場合もあるかと思いますので、「おまじない」の気持ちで記述しておいても良いと思います。CSS3はとても便利で助かりますが、モダンブラウザのみが対応しているという欠点がありますのでPCサイトとして気軽に使用出来ない点が問題ですね・・・。

スマートフォンサイトであれば問題なく使用できるので、気兼ねなくPCサイトにCSS3を使用するにはまだ数年掛かりそうですね。完成サンプルはコチラ!!

ニワカソフトではホームページを作成する際、お客様のご依頼にマッチした制作を行っております。例えばスマートフォンサイトを作成したいという案件であれば今回のような手法を使用し、よりリッチで見栄えの良いホームページをご提供させて頂いております。ホームページのリニューアルや新規立ち上げ等、ぜひニワカソフトにおまかせ下さい!!