ライブドアみたいにスクロールしたらサイドバーの広告を固定する - ぼくはまちちゃん！
こんにちはこんにちは！！ 夏ですね！ 真夏ですね！！ ところで最近、ライブドアの一部の人気ブログで、サイドバーの挙動に「んん？」って思ったことありませんか！ …百聞は一見にしかずってことで、実際の例をみてみましょう！ ※PC版のみです ハムスター速報 (左のサイドバーを見ながら、下にスクロールしてください) 痛いニュース(ﾉ∀`) (右のサイドバーを見ながら、下にスクロールしてください) ある程度スクロールすると、サイドバーの広告がぴたっと固定されますね！ これって流行りなんでしょうか…！ そんなわけで、もしかしたら同じことをやりたい人が他にもいるのかも？と思って、 コピペで使えるJavaScriptにしてみました！ ↓ 動作サンプルです！ スクロールしたらサイドバーの広告を固定するスクリプトの動作サンプル ↓ コードはこれです！ 適当にコピペしてブログに貼り付けてね！ <script t
403 Error - Forbidden
403 Error 現在、このページへのアクセスは禁止されています。 サイト管理者の方はページの権限設定等が適切かご確認ください。
パララックス効果を使ったウェブデザイン | | DesignWalker
パララックス効果って、あまり聞き慣れない言葉ですが…。 初期の横スクロール型のテレビゲームなどでよく使われていた視差効果を使って奥行きを出す技法だそうです。 いくつかのレイヤーを、それぞれ違った速度でスクロール（奥にあるレイヤーはゆっくり、手前にあるレイヤーは早くスクロール）させる事で、視差効果を与えて奥行きがあるように見えるのだそうです。 今回は、このパララックス効果を上手にウェブデザインに応用サイトをいくつかまとめてみました。 How to recreate Silverback’s parallax effect まずは、パララックス効果をウェブデザインに応用する方法から。ブラウザの横幅を変えてみると、４つのレイヤーに配置されているPNG画像がそれぞれスクロールの速度が違って奥行きがあるように見えます。サンプルコードも公開されているので、挑戦してみてはいかがでしょうか。CSSのbac
Parallax Background with Javascript and CSS
« back to inner.geek Parallax Backgrounds a multi–layered javascript experiment This work is licensed under a Creative Commons Attribution 3.0 License. First of all, try scrolling up and down thing page. Use your scroll wheel, use the scroll bar, use the arrow keys, page up, page down, space bar. Note how the text scrolls normally, but the green background scrolls slowly, and how the clouds scroll
[JS]奥行きを生み出す『パララックス』を簡単に実装できるスクリプト -Smart3D
複数の画像のスクロールのタイミングをずらして表示するパララックスを簡単に実装できるjQueryのプラグインを紹介します。 jQuery.Smart3D デモページ [ad#ad-2] パララックスはそれぞれのタイミングをずらして視差効果を生み出し、奥行き感を出すものです。 上記デモでは背景と人物の画像2枚をそれぞれマウスに合わせてずらして表示しています。 使用画像 5枚の画像を使用したパララックス Smart3Dの実装 一番最初に紹介したデモの実装方法です。 HTML 各画像をリスト要素で配置します。 <ul id="mindscape"> <li><img src=".../mindscape1.png" /></li> <li><img src=".../mindscape2.png" /></li> </ul> CSS スタイルシートでサイズを設定し、好みでborderなどのデザイン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]永遠にスクロールしていたくなる、気持ちいいエフェクト -CSS Scroll Effects
[JS]パノラマ画像を使用したバーチャルツアー -jQuery virtual tour
スクロールに応じて要素がアニメーションする、視差効果（パララックス）を取り入れたWebデザイン例とTipsいろいろ - かちびと.net
