スクロールアニメーションによる立体コンテンツの見せ方 (1/2)
スクロールによって立体的に浮かび上がるサムネイル サムネイルに視点をフォーカスさせる仕掛けが目を引く、動画のポートフォリオサイト「MANUEL RUEDA」。ページ中央にあるサムネイルには奥行きが設定されており、スクロールによって手前に起き上がってくる動きが斬新だ。サイドナビにもスクロールに合わせたギミックが用意されており、コンテンツを何度も行き来してしまうおもしろさがある。 今回は、このサイトをヒントに、CSS3の3D表現とjQueryを使ったスクロールアニメーションを制作する。 STEP 1：スクロール値を取得する スクロール値を基にCSS3のプロパティを変化させるため、スクロール値を正しく取得することから始めよう。 スクロール値は jQueryのscrollメソッドを使って取得する。以下のようにして現在のスクロール値を取得できる。 ■ソースコード（HTML） <p id="posy"
デビュー5周年を迎えるきゃりーぱみゅぱみゅ、世界と日本をつなぐ「５つのたくらみ」を発表！
これまでの国内外を問わずの活動の集大成と、さらなる飛躍の年とするべく、初めての事にも挑戦し、まさに「ド派手！」に新たな１年を突き進みます。
Page Scroll Effects | CodyHouse
Page Scroll Effects Introducing a mini-library of experimental page scroll effects. We put together some fancy effects that take place while the user is surfing through the sections of a web page. Some of the effects are quite extreme, but they can prove very useful if your goal is to create an immersive user experience. All animations have been created using Velocity.js. Please note that these ef
jQueryで1ページごとにスクロールして画面遷移させるUIを実装する方法｜BLACKFLAG
以前、iPhone5sのプロダクトページがリリースした頃に『簡単にパララックス実装可能な軽量スクリプト「skrollr」＆コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」』と題して1ページをフルスクリーン表示にして、画面全体をスクロールさせることで、1ページ分（1コンテンツ分）を画面遷移させるUIを実装できるjQueryプラグインを紹介しましたが、自分なりにもっと使いやすい形で実現できないかやってみた実験をご紹介してみます。 【2014/08/05 追記】 各ブロック内での横スライド機能を追加しました。 まずは動作サンプルから。 下記のサンプル画面でマウスホイールスクロールもしくは画面右側のナビゲーションボタン等を使って画面（ページ）を切り替えてみてください。 「jQueryで1ページごとにスクロールして画面遷移させるU
パララックスサイトの作り方の初歩
最近パララックス（視差効果）を取り入れたサイトが増えてきました。 仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。 ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないので そちらを使ったほうが楽かもしれません。 パララックス効果のjQueryプラグインまとめ あと動作はこの記事時点でのFirefoxの最新版でしか確認はしていません。 スクロール量を取得する まずはスクロールすると動くので、スクロール量を取得します。ちなみにjQueryを使ってます。 $(function(){ $(window).scroll(function(){ var y = $(this).scrollTop(); $("#num").text("スクロール量：" + y);//表示用 }); }); サンプルペー
Effective Uses Of Parallax Scrolling Effect In Web Design
You may have noticed that different elements of a website scroll along different site lines. This is called as parallax scrolling effects and this trend is gaining popularity day by day. Using such effects in website design allows the viewers to get an increased sense of depth in the design. This is the main reason why majority of the websites have now incorporated parallax scrolling elements in t
Horizontal scrolling website examples to use as inspiration
Design Your Way is a brand owned by SBC Design Net SRL Str. Caminului 30, Bl D3, Sc A Bucharest, Romania Registration number RO32743054 But you’ll also find us on Blvd. Ion Mihalache 15-17 at Mindspace Victoriei contact@designyourway.net A horizontal scrolling website seems counterintuitive. They don’t seem to be as user-friendly as vertical scrolling websites, but the truth is that sideways scrol
the Volkswagen Group Code of Conduct （行動規範）
■ T-Roc Life フェア 6/8(土) - 6/16(日) スタイリッシュに、自分らしい生き方を。 ■ID.4最大27万円のメリット。 ■今ならT-Roc、ティグアン、パサート ヴァリアント、パサート オールトラックに購入サポート実施中！ ■そのサイズ、コンパクト。そのスケール、怪物級。Polo GTI Edition 25 登場！ ■おかげさまで2023年輸入SUV登録台数 1位 T-Roc & 2位 T-Crossを獲得！* ■フル電動SUV「ID.4」が2023-2024日本カー・オブ・ザ・イヤーの「10ベストカー」を受賞！ *各メーカーがSUVとしてカテゴライズしたものを日本自動車輸入組合（JAIA）2023年1～12月モデル別 新車登録台数に基づき自社調べ。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
要素がスクロールで画面内に入った時、内包要素を順番にフェードインするjQueryプラグインを作りました