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

Web制作

• CSS
• JavaScript
• ライブラリ
• 自作

概要

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

コード & 使い方

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

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

spin

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

composite

<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>