スクロールで色が流れ込む演出を作るアイディア – Icons Filling Effect

PR

Icons Filling Effect

http://codyhouse.co/gem/icons-filling-effect/

スクロールに合わせて アイコンに色が注入されていくような演出を実装するアイディア

DEMO 表示

filter2

 

大まかな仕組みは

bodyの色を 上下で2色にする

2色にするには 擬似要素を使って行っている

(擬似要素の代わりに2段階のグラデーションでも可能かと思う)

 

bodyの色が透けて見るようにした画像を用意し

他の要素には色をつけてあり 画像の色もその色と統一してある

画像の色が透けるところが唯一 bodyの色を表示するようになっており

 

スクロールすると、bodyの2色の色の境界線が

まるで色が流れ込んでいくかのように見せている

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー