マウスオーバーで動くなめらかカルーセルパネル (1/2)
軽快でなめらかなカルーセルパネル 毎週アップロードされる充実した動画コンテンツを、カルーセルパネルやボックスレイアウトで賑やかかつコンパクトにまとめている「Universiteit van Nederland」。このサイトのカルーセルパネルは、マウスカーソルの位置に応じて軽快でなめらかに動く。 STEP 1：基本構造を用意する 今回作成するカルーセルは、横長のコンテンツをマウスの座標に応じて左右に移動させることで、スクロールの動きを演出している。 通常のボックススクロールでは、overflow: scroll; でスクロールバーを表示させ、スクロールバーの操作によってコンテンツを移動させる。今回のカルーセルは、スクロールバーの代わりにマウス座標を利用するため、overflow: hidden;で表示ボックス（.holder）からはみ出す部分を非表示化。内部（.inner）に横長のコンテンツ
Javascriptを使ってここまでできる！凄い動きのサイト10選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。マラガの海の贈り物SEKOです。 フラッシュを使えばサイトはダイナミックな動きを実現しますが、今回はフラッシュでなくてもJavascriptで凄い動きのサイトを集めてみました。 是非参考にしてください。 Javascriptを使った、凄い動きのサイト10選！ MoMA MoMA 円が時系列で表現されております。クリックするとグリンっとまわる動きは気持ちがいいです。ただサイト自体がけっこう重いですね。。 DUB FIRE DUB FIRE マウスを右や左に動かすとサイト全体が動きます。広がりがあり、操っている感もあり、こちらも操作が気持ちいいサイトです。 Volkswogen Volkswogen メインスライドの動きが綺麗です。スクロールで車を操作する年表ページやフォトギャラリーにも楽しい動きが沢山含まれています。 Secret Study Secret Study DUB F
気持ち良いスクロールをするjQueryプラグイン - ホームページ制作やリニューアル印刷物デザインなら大阪のWPC
気持ち良いスクロールをするjQueryプラグイン ページ内で「するすると」移動する、気持ち良いスクロールを出来るようにするjQueryプラグインを紹介します。 スムーススクロールを実装できるものはこれ以外にも色々ありますが、選択肢の一つにいかがでしょうか。 jquery.smoothScroll.js まず↑サイトからjQuery.smoothScroll.jsをダウンロードし、フォルダーに放り込みます。 （下記ではjsフォルダー） ヘッド内に下記のコード（jQueryとjQuery.smoothScroll.js）を読み込ませます。 簡単に書くとこんな感じでしょうか。 <html> <head> ・ ・ <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery
たったの10秒でできる！jQueryで実装する「ページトップへ戻るボタン」 - Kowappa
ページをスクロールするとフワッとフェードインする「ページトップへ戻るボタン」をたったの10秒で実装してしまいます。 今回ご紹介するものは、スクロールするとフワッとフェードインしてボタンが出てきて、ボタンを押すとスルスルッとページトップに戻るものです。とても10秒クオリティーとは思えないものなのでご安心を。 HTML <a id="pageTop" href="#contents">ページトップへ</a> CSS #pageTop{ background:#DDD; border-radius:5px; color:#FFF; padding:20px; position:fixed; bottom:20px; right:20px; } #pageTop:hover{ background:#EEE; } JavaScript <script type="text/javascript">
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
