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

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 ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)