Mmemo

PC作業に関するメモ

【プラグイン】特定要素をフェードイン、スライドインさせる

概要

画面が要素の位置までスクロールされた時に、スライドインやフェードイン等のトランジションを与えるプラグイン。

コード & 使い方

GitHub

DEMO

slide-in

from_right

from_left

<span class="easy_transition from_right">from_right</span>
<span class="easy_transition from_left">from_left</span>

fade & zoom

zoom
fade
<div class="easy_transition zoom">zoom</div>
<div class="easy_transition fade">fade</div>

spin

spin
spinX
spinY
<div class="easy_transition spin">spin</div>
<div class="easy_transition spinX">spinX</div>
<div class="easy_transition spinY">spinY</div>

composite

zoom
fade
fade
spin
spin
zoom
from_right
zoom
from_left
fade
from_right
spinY
from_left
spinX
from_right
zoom
fade
spin
<div class="easy_transition zoom fade">zoom<br>fade</div>
<div class="easy_transition fade spin">fade<br>spin</div>
<div class="easy_transition spin zoom">spin<br>zoom</div>

<div class="easy_transition from_right zoom">from_right<br>zoom</div>
<div class="easy_transition from_left fade">from_left<br>fade</div>

<div class="easy_transition from_right spinY">from_right<br>spinY</div>
<div class="easy_transition from_left spinX">from_left<br>spinX</div>

<div class="easy_transition from_right zoom fade spin">from_right<br>zoom<br>fade<br>spin</div>