Webデザイン実践Ⅲ<インタラクション>|13.ボタン/スクロール

アニメーションのサンプル

CSSでアニメーションを実装する

下記のサンプルコードをまるっとDLするにはこちら

心地よいボタンの収集

収集した事例の言語化

どのようなインタラクションか?

フィードバック

ユーザーはどのようなフィードバックが得られるか?

マウスによる操作

その他マウス操作で特別なエフェクトなどがあれば紹介しあう。

実装への考察

スクロール

スクロールによって着火するスクロールエフェクト等について、さまざまな事例を収集しつつ実装にトライする。

パララックス

パララックスとは、スクロールなどの動作に応じて、複数のレイヤーにある要素を異なるスピードで動かすことで視差を生み、立体感や奥行きを演出などが行える視差効果のことを指します。

2012年頃から流行するようになりました。

position: stickyやtransformプロパティを活用することでCSSだけでもパララックス(風の効果)を実行できます。

スクロールによるフェード

スクロールに応じてコンテンツを少し遅らせてふわっと表示する手法もよく見られます。「inview.js」などを使うと簡単に実装できます。

スムーススクロール

ページ内をスムースにスクロールすることを「スムーススクロール」と言います

JavaScriptなどで実装可能です。