ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Webブラウザでは様々なユーザアクションを使ってイベントを実行できます。クリックや文字入力はもちろん、ウィンドウのリサイズやマウスオーバーなど細かく指定して、よりユーザビリティの高い仕組みを提供できます。

Smooth Scrolling Image Effectsは名前の通り、スクロールを使って画像エフェクトを実行します。

Smooth Scrolling Image Effectsの使い方

画像が少し大きくなったり、テキストとのパララックスエフェクトがいい感じです。

こちらは縦に歪むエフェクト。

斜めに動くのも写真が揺れているようで格好いいですね。

Smooth Scrolling Image Effectsは写真をより印象的に見せるのによさそうです。パララックスエフェクトと合わせることで、テキストと写真のずれがいい感じに展開されます。スクロール、つまりユーザの操作によってイベントを起こすのは面白い効果を生みそうです。

Smooth Scrolling Image EffectsはJavaScript製のソフトウェア(ライセンスは独自)です。

Smooth Scrolling Image Effects | Demo 1 | Codrops

codrops/SmoothScrollingImageEffects: A small set of ideas on animating images and other elements while smooth scrolling a page.

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2