Share on FacebookTweet about this on TwitterShare on Google+

この記事は、concrete5 Japan Advent Calendar 2015に参加しています。

この記事は菱川さんの書かれた記事
「Javascript 不要!concrete5 でパララックス効果を実装する方法」

に着想を得てさらに少し演出を追加しようと思ったのです。
ですのでJavascript 不要にはなりませんが...
最終的には必要なライブラリーを読み込むとconcrete5のカスタムクラスを使い、演出が自由にできるというものです。

軽くおさらいしますと、こんな感じのモックアップをそのあたりの画像と言葉をかきあつめて作りました。

Design Cafe --home (20151206)

それぞれレイアウトグリッドにコンテンツを入れていっただけです。

スクリーンショット 2015-12-07 9.33

このコーヒー豆の背景のところが、背景のパララックスで指定しているところです。
コンテンツのスクロールに合わせて背景が付いてきます。

Design Cafe --home (20151206)

レイアウトデザインを編集でパララックスを指定し背景画像をコーヒー豆の画像にします。

スクリーンショット 2015-12-07 9.34

さてここから演出を追加していきます。
パララックスでよくみられるスクロールしていきコンテンツの位置に来るとそれぞれフェードインしたり右からスライドして現れたりする。そんな効果を追加してみます。

そのためにオリジナルのテーマに2つのライブラリーを読み込むようにします。

まずは

Animate.css
https://github.com/daneden/animate.css

GitHubからダウンロードして、animate.min.cssを読み込むようにします。アニメーションの動きをclassで指定できるアニメーションです。

もうひとつが

wow.js
https://github.com/matthieua/WOW

GitHubからダウンロードして、wow.min.jsを読み込むようにします。スクロールしていくと、その位置で表示するようにするライブラリーです。

オリジナルのテーマのjs,cssのそれぞれのフォルダに配置します。

スクリーンショット 2015-12-07 9.36

もうひとつwow.jsの初期化のスクプリトが必要なので
init.js
を作ってjsフォルダに入れています。名前はなんでもかまいません。

中身は1行

new WOW().init();

次はヘッダーに読み込みます。
elements/header.php

にそれぞれ読み込みを追加します。

<!-- Animate CSS -->
 <link href="<?php echo $this->getThemePath()?>/css/animate.min.css" rel="stylesheet">
<!-- wow -->
 <script src="<?php echo $this->getThemePath()?>/js/wow.min.js"></script>
 <script src="<?php echo $this->getThemePath()?>/js/init.js"></script>

あとはカスタムクラスに追加していくだけです。

3列のカラムの左にエリアのデザインを編集を選択

スクリーンショット 2015-12-07 9.51
カスタムクラスの

 wow
fadeInLeft

を追加します。
スクリーンショット 2015-12-07 9.51

同じように中央のカラムには

wow
fadeInUp

右のカラムには

wow
fadeInRight

と入力します。

プレビューするとスクロールで現れる際にそれぞれのカラムがスライドしながらフェードインしてくるのがわかります。

01 02

animate.cssのclassはこれだけありますので、それぞれのクラスをつけてみて演出を変更して遊んでみてください。

カスタムクラスでクラス名を変えるだけで、いろんな演出を試すことができます。直感的ですね。

もちろんブロックのクラスでもいいので、ページのそれぞれのエリアやブロックにアニメーションを追加できます。

bounce
flash
pulse
rubberBand
shake
headShake
swing
tada
wobble
jello
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
hinge
rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
slideInDown
slideInLeft
slideInRight
slideInUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp

 

ただやってみると編集モードでもぐるぐるアニメーションが動いてうっとおしいので

Page::getCurrentPage()->isEditMode()をチェックして

編集モードでない時だけ読込するようにします。

<?php if (!Page::getCurrentPage()->isEditMode()) { ?>
 <!-- Animate CSS -->
 <link href="<?php echo $this->getThemePath()?>/css/animate.min.css" rel="stylesheet">
<!-- wow -->
 <script src="<?php echo $this->getThemePath()?>/js/wow.min.js"></script>
 <script src="<?php echo $this->getThemePath()?>/js/init.js"></script>
 <?php } ?>

これで編集モードの時はぐるぐる動かなくなります。
追加しているのもクラス名だけなので読み込まなければ無視するだけですね。

もっと細かくアニメーションのタイミングを遅らせたり、アニメーションをスピードをゆっくりしたりするのは、タグに任意の属性を追加しなくてはいけません。

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div>

カスタムテンプレートなどで追加してもいいですね。

できれば来年に
デフォルトのアドオンを改造して値を入れるブロックを作りたいです。