アニメーション

アニメーション

フェードインアウトアニメーションは、ScrollTriggerを利用しています。
読み込ませておきましょう。

code

<script src="ScrollTrigger.js"></script>

フェードイン・フェードアウト

ScrollTriggerを利用
※ファーストビューに、この領域がある時はアニメーションしません。一旦、見切れないと動きません。
　　background-color: rgba(255,255,255,.5);
「02.Flat Button」は任意タグに「flBtn」
「03.Flat shadow Button」は任意タグに「fsBtn」
　　既存の背景カラー指定可

縮小・拡大フェードインアウト

01.縮小フェードインアウト

02.拡大フェードインアウト

code

<div data-scroll="toggle(.scaleDownIn, .scaleDownOut)">
    <img src="img/card.jpg" alt="card" />01.縮小フェードインアウト
</div>
<div data-scroll="toggle(.scaleUpIn, .scaleUpOut)">
    <img src="img/card.jpg" alt="card" />02.拡大フェードインアウト
</div>

上から・下からフェードインアウト

01.上からフェードインアウト

02.下からフェードインアウト

code

<div data-scroll="toggle(.fromTopIn, .fromTopOut)">
    <img src="img/card.jpg" alt="card" />01.上からフェードインアウト
</div>
<div data-scroll="toggle(.fromBottomIn, .fromBottomOut)">
    <img src="img/card.jpg" alt="card" />02.下からフェードインアウト
</div>

右から・左からフェードインアウト

01.右からフェードインアウト

02.左からフェードインアウト

code

<div data-scroll="toggle(.fromRightIn, .fromRightOut)">
    <img src="img/card.jpg" alt="card" />01.右からフェードインアウト
</div>
<div data-scroll="toggle(.fromLeftIn, .fromLeftOut)">
    <img src="img/card.jpg" alt="card" />02.左からフェードインアウト
</div>

その他のアニメーション

DLファイルにはアニメーションだけ収録しています。
codeに「Sample css」を記載しておりますので、ご自身で改変してください。

01.loading

code

01.loading
<p class="loading"></p>
-- Sample css --
.loading {
    width: 80px;height: 80px;
    border: 10px solid rgba(0, 0, 0, 0.2);
    border-top-color: black;
    box-sizing: border-box;
    border-radius: 100%;
    }

02.flash

code

02.flash
<p class="flash"></p>
-- Sample css --
.flash {
    width: 80px;height: 80px;
    box-sizing: border-box;
    border-radius: 100%;
    background: black;
    }

03.bowan

code

03.bowan
<p class="bowan"></p>
-- Sample css --
.bowan {
    width: 80px;height: 80px;
    box-sizing: border-box;
    border-radius: 100%;
    background: black;
    }

04.fuyu

code

04.fuyu
<p class="fuyu"></p>
-- Sample css --
.fuyu {
    width: 80px;height: 80px;
    box-sizing: border-box;
    border-radius: 100%;
    background: black;
    margin: 10px;
    }

05.idouR

code

05.idouR
<p class="idouR"></p>
-- Sample css --
.idouR {
    width: 80px;height: 80px;
    box-sizing: border-box;
    border-radius: 100%;
    background: black;
    margin: 10px;
    }

06.idouL

code

06.idouL
<p class="idouL"></p>
-- Sample css --
.idouL {
    width: 80px;height: 80px;
    box-sizing: border-box;
    border-radius: 100%;
    background: black;
    margin: 10px;
    }

Download

Demo