EC-CUBE4系以外にも汎用的に使えるデザインtipsです。
トップページや商品一覧などで、読み込み時とスクロール時に、画像などがふわっと現れる仕組みを実装する方法になります。
以下がサンプルです。右の画面でスクロールしてみてください。
See the Pen fadein by naomi_himoto (@himotonaomi) on CodePen.
実装手順
実装の手順は以下になります。
- CSSファイルに、フェードインのコード追加
- JSファイルに、フェードインのコード追加
- ブロックやページファイルの、フェードインさせたい要素に、クラスを追加
CSSファイルに、フェードインのコード追加
今回は初心者向けの解説なので、管理画面のCSS管理に記載します。
直接CSSファイルに記載したい場合は、開発ドキュメントのCSSの項目をご参照ください。
今回、その場でフワッと表示させる他、オプションで下・左・右・上から移動しながふわっと表示できるようにバリエーション用意しました。クラス指定する際に、また説明します。
/* -----------------------------------------
フェードインCSS ここから
-----------------------------------------*/
/* 初期設定で、透明度を0にして、Y軸を50px下に移動しておく */
.u-fadein{
opacity: 0;/*透明度0=0%*/
transition: 1s;/*表示と移動の速度1s=1秒 フェードインの速度を変えたい場合はこちらを編集してください*/
}
.u-fadein._bottom{
transform: translate(0,50px);/*translate(X軸,Y軸) Y軸50px=下に50px移動*/
}
.u-fadein._left{
transform: translate(-50px,0);/*translate(X軸,Y軸) X軸-50px=左に50px移動*/
}
.u-fadein._right{
transform: translate(50px,0);/*translate(X軸,Y軸) X軸50px=右に50px移動*/
}
.u-fadein._top{
transform: translate(0,-50px);/*translate(X軸,Y軸) Y軸-50px=上に50px移動*/
}
/*表示の際は透明度を1にして、X軸,Y軸を0にする !importantで絶対優先指定にしてます*/
.u-fadein.is-show{
opacity: 1 !important;/*透明度1=100%*/
transform: translate(0,0) !important;/*translate(X軸,Y軸)*/
}
上記のコードを、[管理画面]>[コンテンツ管理]>[CSS管理]にコピペで貼り付けてください。
JSファイルに、フェードインのコード追加
こちらも、管理画面のJS管理に記載します。
直接JSファイルを編集したい方は、開発ドキュメントのCSSの項目を参考に、cssディレクトリと同階層にjsディレクトリがあるので、その中のfunction.jsに記載してください。
jQuery()表記にしてますが、$()に変えても動きます。スクロールだけでなく、ウィンドウ読み込み時にも発動する形にしてます。
/* -----------------------------------------
フェードインJS ここから
-----------------------------------------*/
//読み込み時とスクロール時に以下の処理を実行
jQuery(window).on('load scroll', function(){
//.u-fadeinクラスが付いている要素に対し、以下の処理を実行
jQuery('.u-fadein').each(function() {
//.u-fadeinの位置を取得
var elOffset = jQuery(this).offset().top;
//現在のスクロール位置を取得
var scrollPos = jQuery(window).scrollTop();
//ウィンドウの高さを取得
var wh = jQuery(window).height();
//.u-fadeinがついている要素がウィンドウ内に入ると.is-showクラスを追加
if(scrollPos > elOffset - wh){
jQuery(this).addClass('is-show');
}
});
});
上記のコードを、[管理画面]>[コンテンツ管理]>[JS管理]にコピペで貼り付けてください。
ブロックやページファイルの、フェードインさせたい要素に、クラスを追加
あとは、フェードインを実装したい要素に、u-fadeinクラスと、オプションの_bottomクラスなどを追加します。
オプション追加の場合はクラスを複数指定にする形になるので、クラスの間に半角スペースを入れてください。
<div class="u-fadein">
ふわっと表示
</div>
<div class="u-fadein _bottom">
下からふわっと表示
</div>
<div class="u-fadein _left">
左からふわっと表示
</div>
<div class="u-fadein _right">
右からふわっと表示
</div>
<div class="u-fadein _top">
上からふわっと表示
</div>
ブロック要素に追加する場合
試しに、トップページのスライドの下にある[新入荷商品特集]ブロックにフェードイン効果を適用してみましょう。
文章は左からフェードイン、画像を右からフェードインさせたい場合
管理画面からの指定は、[コンテンツ管理]>[ブロック管理]>[新入荷商品特集]ブロックを編集で、
文章を囲っている要素のec-eyecatchRole__introクラスにu-fadeinと、左から指定の_leftクラスを追加します。
画像を囲っている要素のec-eyecatchRole__imageクラスにu-fadeinと、右から指定の_rightクラスを追加します。
もっと細かくタイトルや文章に分けてフェードイン指定もできるので、色々な場所にfadeinクラスを追加してみてください。
直接ファイルを編集したい場合は、
src/Eccube/Resource/template/default/Block/eyecatch.twig
上記のコアファイルを、以下のカスタマイズ用のディレクトリにコピーして編集してください。
app/template/default/Block/eyecatch.twig
※すでにコピーする前からファイルがある場合は、そのまま編集ください。
※デザインテンプレートご使用の場合は、defaultの部分を、適用しているテンプレート名に置き換えて考えてください。
商品一覧ページに追加する場合
あとフェードインいれたい部分としては、商品一覧ページでしょうか。
そちらにも商品を下からフェードインする様に適用してみましょう。
管理画面からの指定は、[コンテンツ管理]>[ページ管理]>[商品一覧ページ]を編集します。
商品を囲っている要素のec-shelfGrid__itemクラスにu-fadeinと、下から指定の_bottomクラスを追加します。
直接ファイルを編集したい場合は、
src/Eccube/Resource/template/default/Product/list.twig
上記のコアファイルを、以下のカスタマイズ用のディレクトリにコピーして編集してください。
app/template/default/Product/list.twig
※すでにコピーする前からファイルがある場合は、そのまま編集ください。
※デザインテンプレートご使用の場合は、defaultの部分を、適用しているテンプレート名に置き換えて考えてください。
以上になります。
EC-CUBE4にはjQuery３系が導入されているので、フェードイン系のプラグインでも同様の実装が可能です。