inviewサンプル

jsフォルダのjquery.inview_set.jsや、cssフォルダのinview.cssで内容の変更や追加ができます。

他のページでも当ページのアニメーション効果を使いたい場合、当ページのhtml側下部にある、
<!--パララックス（inview）-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script>
<script src="js/jquery.inview_set.js"></script>
を同じ場所にコピペして下さい。これらのタグがないとアニメーションは動きません。
また、長期間利用していると、inviewのバージョンが古くなって動かなくなる可能性もあります。その際は「CDN inview」などで検索しなおしてみて下さい。

upスタイル

使いたい要素にclass="up"を指定すれば以下のような動作になります。
既にclass指定がある場合は半角スペースで区切って追加します。例：<div class="list-container up">

Sample Title

ここに説明を入れます。サンプルテキスト。

Sample Title

ここに説明を入れます。サンプルテキスト。

Sample Title

ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。

downスタイル

使いたい要素にclass="down"を指定すれば以下のような動作になります。
既にclass指定がある場合は半角スペースで区切って追加します。例：<div class="list-container down">

Sample Title

ここに説明を入れます。サンプルテキスト。

Sample Title

ここに説明を入れます。サンプルテキスト。

Sample Title

ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。

leftスタイル

使いたい要素にclass="left"を指定すれば以下のような動作になります。
既にclass指定がある場合は半角スペースで区切って追加します。例：<div class="list-container left">

Sample Title

ここに説明を入れます。サンプルテキスト。

Sample Title

ここに説明を入れます。サンプルテキスト。

Sample Title

ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。

rightスタイル

使いたい要素にclass="right"を指定すれば以下のような動作になります。
既にclass指定がある場合は半角スペースで区切って追加します。例：<div class="list-container right">

Sample Title

ここに説明を入れます。サンプルテキスト。

Sample Title

ここに説明を入れます。サンプルテキスト。

Sample Title

ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。

transform1スタイル

使いたい要素にclass="transform1"を指定すれば以下のような動作になります。
既にclass指定がある場合は半角スペースで区切って追加します。例：<div class="list2 transform1">

Sample Title

ここに説明を入れます。サンプルテキスト。

Sample Title

ここに説明を入れます。サンプルテキスト。

Sample Title

ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。

transform2スタイル

使いたい要素にclass="transform2"を指定すれば以下のような動作になります。
既にclass指定がある場合は半角スペースで区切って追加します。

Sample Title

ここに説明を入れます。サンプルテキスト。

Sample Title

ここに説明を入れます。サンプルテキスト。

Sample Title

ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。

transform3スタイル

使いたい要素にclass="transform3"を指定すれば以下のような動作になります。
既にclass指定がある場合は半角スペースで区切って追加します。

Sample Title

ここに説明を入れます。サンプルテキスト。

Sample Title

ここに説明を入れます。サンプルテキスト。

Sample Title

ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。

blurスタイル

使いたい要素にclass="blur"を指定すれば以下のような動作になります。
既にclass指定がある場合は半角スペースで区切って追加します。

Sample Title

ここに説明を入れます。サンプルテキスト。

Sample Title

ここに説明を入れます。サンプルテキスト。

Sample Title

ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。