【Adobe XD】ホバーアニメーションの応用編~パララックス風の動きを再現してみよう~ 前回の記事では、Adobe XDの「ホバーステート機能」を使った画像のホバーアニメーションの作り方をご紹介しました。今回の記事では、・・・ View More
以前、パララックス効果(視差効果)を用いたサイトをご紹介しました! スクロールで動く!パララックスを使用したユニークなサイト このようなかっこいいサイト、つくってみたいですよね! パララックスの実装をするためにさまざまなプラグインが存在しますが、 今回はプラグインを使わないで、簡単に作成する方法を書いてみたいと思います。 作成の流れとしては 1.スクロール量を取得する 2.positionのCSSを変更して動かす というものです。 デモページ 今回、私がプラグインを使わないで作成したパララックスを用いたサイトはこちら。 パララックスを使用したデモページ 夏も終わるというのにカブトムシですが。 このように、ひとつずつ動きを変えることもできます。 スクロール量を取得、出力する まずはスクロール量を取得、出力してみます。 実際は出力しなくてもいいのですが、今回は表示させてみました。 jQuery
PCでも、スマートフォンでも、画面をスクロールさせた時の各パーツ等の*「動き・挙動」*というのは、ユーザーの興味を引きつける上で非常に重要な要素です。 最近では動画以外の要素にも動きをつけて表示するホームページが増えてきました。 今回は、ページ下部へとスクロールさせるごとにユニークな動きをする、簡単に設置できるjQueryのプラグインをご紹介します。デモページと併せ、「どんな動きをするか」という具体的な説明もご覧ください。 注目!スクロール時にユーザを引きつけるjQueryプラグイン12選 1. セクションが重なるようにレイヤー表示「StickyStack.js」 配布ページ|デモ 一つひとつのセクションをレイヤーに見立て、ページトップから積み重なるように表示するエフェクト効果を実装できます。垂直に配置した各パネルを上部に固定配置しながら、積み重なるようにスクロールすることができます。言葉
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く