EC-CUBE4系で画像などにスクロールするとフェードインする仕組みをつける


EC-CUBE4系以外にも汎用的に使えるデザインtipsです。
トップページや商品一覧などで、読み込み時とスクロール時に、画像などがふわっと現れる仕組みを実装する方法になります。

以下がサンプルです。右の画面でスクロールしてみてください。
<p class="codepen" data-height="400" data-theme-id="light" data-default-tab="css,result" data-user="himotonaomi" data-slug-hash="LYbzKmr" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="fadein">
  <span>See the Pen <a href="https://codepen.io/himotonaomi/pen/LYbzKmr">
  fadein</a> by naomi_himoto (<a href="https://codepen.io/himotonaomi">@himotonaomi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 実装手順
実装の手順は以下になります。

- **CSSファイルに、フェードインのコード追加**
- **JSファイルに、フェードインのコード追加**
- **ブロックやページファイルの、フェードインさせたい要素に、クラスを追加**

## CSSファイルに、フェードインのコード追加
今回は初心者向けの解説なので、管理画面のCSS管理に記載します。
直接CSSファイルに記載したい場合は、[開発ドキュメントのCSSの項目](https://doc4.ec-cube.net/design_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管理]にコピペで貼り付けてください。
![Css.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668571/caee4084-27f5-eb1e-bbe0-4b57796cd992.png)


## JSファイルに、フェードインのコード追加
こちらも、管理画面のJS管理に記載します。
直接JSファイルを編集したい方は、[開発ドキュメントのCSSの項目](https://doc4.ec-cube.net/design_css)を参考に、cssディレクトリと同階層にjsディレクトリがあるので、その中のfunction.jsに記載してください。

jQuery()表記にしてますが、$()に変えても動きます。スクロールだけでなく、ウィンドウ読み込み時にも発動する形にしてます。

```JS
/* -----------------------------------------
フェードイン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管理]にコピペで貼り付けてください。
![JS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668571/660816b8-40c5-d22e-0ccf-08a612853c40.png)


## ブロックやページファイルの、フェードインさせたい要素に、クラスを追加
あとは、フェードインを実装したい要素に、u-fadeinクラスと、オプションの_bottomクラスなどを追加します。
オプション追加の場合はクラスを複数指定にする形になるので、クラスの間に半角スペースを入れてください。

```html
<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>
```
### ブロック要素に追加する場合
試しに、トップページのスライドの下にある[新入荷商品特集]ブロックにフェードイン効果を適用してみましょう。
文章は左からフェードイン、画像を右からフェードインさせたい場合
![Img01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668571/6aec5b86-8b7b-15f9-f37b-109fb6e67739.png)

管理画面からの指定は、[コンテンツ管理]>[ブロック管理]>[新入荷商品特集]ブロックを編集で、
文章を囲っている要素の`ec-eyecatchRole__intro`クラスに`u-fadein`と、左から指定の`_left`クラスを追加します。
画像を囲っている要素の`ec-eyecatchRole__image`クラスに`u-fadein`と、右から指定の`_right`クラスを追加します。
![Block.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668571/cea0e4d7-2953-d465-0c3e-6cc724396fc7.png)

もっと細かくタイトルや文章に分けてフェードイン指定もできるので、色々な場所にfadeinクラスを追加してみてください。

直接ファイルを編集したい場合は、
`src/Eccube/Resource/template/default/Block/eyecatch.twig`
上記のコアファイルを、以下のカスタマイズ用のディレクトリにコピーして編集してください。
`app/template/default/Block/eyecatch.twig`
※すでにコピーする前からファイルがある場合は、そのまま編集ください。
※デザインテンプレートご使用の場合は、`default`の部分を、適用しているテンプレート名に置き換えて考えてください。

### 商品一覧ページに追加する場合
あとフェードインいれたい部分としては、商品一覧ページでしょうか。
そちらにも商品を下からフェードインする様に適用してみましょう。
![Img02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668571/eadf2d54-862f-2b09-ced7-926daf3f5273.png)

管理画面からの指定は、[コンテンツ管理]>[ページ管理]>[商品一覧ページ]を編集します。
商品を囲っている要素の`ec-shelfGrid__item`クラスに`u-fadein`と、下から指定の`_bottom`クラスを追加します。
![Page.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668571/0e3e33f3-1472-967e-cffe-b85aba966268.png)

直接ファイルを編集したい場合は、
`src/Eccube/Resource/template/default/Product/list.twig`
上記のコアファイルを、以下のカスタマイズ用のディレクトリにコピーして編集してください。
`app/template/default/Product/list.twig`
※すでにコピーする前からファイルがある場合は、そのまま編集ください。
※デザインテンプレートご使用の場合は、`default`の部分を、適用しているテンプレート名に置き換えて考えてください。

以上になります。
EC-CUBE4にはjQuery３系が導入されているので、フェードイン系のプラグインでも同様の実装が可能です。