マウスオーバーで動くなめらかカルーセルパネル (1/2)
軽快でなめらかなカルーセルパネル 毎週アップロードされる充実した動画コンテンツを、カルーセルパネルやボックスレイアウトで賑やかかつコンパクトにまとめている「Universiteit van Nederland」。このサイトのカルーセルパネルは、マウスカーソルの位置に応じて軽快でなめらかに動く。 STEP 1：基本構造を用意する 今回作成するカルーセルは、横長のコンテンツをマウスの座標に応じて左右に移動させることで、スクロールの動きを演出している。 通常のボックススクロールでは、overflow: scroll; でスクロールバーを表示させ、スクロールバーの操作によってコンテンツを移動させる。今回のカルーセルは、スクロールバーの代わりにマウス座標を利用するため、overflow: hidden;で表示ボックス（.holder）からはみ出す部分を非表示化。内部（.inner）に横長のコンテンツ
[JS]Appleのプロダクトページのように、スクロール時に各要素をさまざまなアニメーションで表示させるスクリプト -scrollReveal.js
スクロールすると商品写真がアニメーションでスライド表示するAppleのプロダクトページのように、スクロールした時、ロードした時など、ページ内の要素がビューポートに表示した時に、各要素それぞれをさまざまなアニメーションで表示させることができる単体のスクリプトを紹介します。 デモのアニメーション scrollReveal.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして</body>の上あたりに記述します。 jQueryなど他のスクリプトは必要ありません。 <body> ... ... <script src="js/scrollReveal.js"></script> </body> Step 2: HTML スクリプトをセットしたら、あとはアニメーションで表示させる要素に「data-scrollreveal」を追加するだけです。 <h1 data-scrollr
Javascriptを使ってここまでできる！凄い動きのサイト10選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。マラガの海の贈り物SEKOです。 フラッシュを使えばサイトはダイナミックな動きを実現しますが、今回はフラッシュでなくてもJavascriptで凄い動きのサイトを集めてみました。 是非参考にしてください。 Javascriptを使った、凄い動きのサイト10選！ MoMA MoMA 円が時系列で表現されております。クリックするとグリンっとまわる動きは気持ちがいいです。ただサイト自体がけっこう重いですね。。 DUB FIRE DUB FIRE マウスを右や左に動かすとサイト全体が動きます。広がりがあり、操っている感もあり、こちらも操作が気持ちいいサイトです。 Volkswogen Volkswogen メインスライドの動きが綺麗です。スクロールで車を操作する年表ページやフォトギャラリーにも楽しい動きが沢山含まれています。 Secret Study Secret Study DUB F
データの一部をロックして、他の部分を横スクロール
前回は縦にスクロールする表示方法をご紹介いたしました。 今回は横にスクロールさせる方法をご紹介いたします。 大きくわけて3つの要素で構成します。 外枠部分 ロック部分 横スクロール部分 外枠部分はdivで大枠のボーダー線や幅を指定します。 div.x_data_area { width: 900px; overflow: hidden; /* floatさせた要素を内包しているため指定 */ border-right: 1px solid #CCC; border-bottom: 1px solid #CCC; border-left: 1px solid #CCC; } ロック部分はdivとテーブルで構成します。 「<div class="lock_box">」には横スクロール部分と横に並ばせるため「 float: left;」と「 width: 300px;」として幅を指定します。
[JS]最近のウェブサイトで見かける面白い仕掛けを実装するスクリプトのまとめ
fullPage.js ポートフォリオや企業のプロモーションでもよく見かける1ページで構成されたサイトで、フルスクリーンの垂直スクロール、そして水平のスライドにも対応したウェブサイトを作るためのスクリプト。 こういう作りは特にタブレットで操作がしやすいですね。 FancyScroll.js スマフォやタブレットのようにページの終わりまでスクロールした際にバウンドするのをはじめ、ちょっと面白いさまざまなエフェクトをスクロールに与えるスクリプト。
気持ち良いスクロールをする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">
(いわゆる)パララックス演出手法とそのバリエーションについて | nodot
(いわゆる)パララックス手法が大流行である。理由の一つにはある種の快感の存在があると思われる。ウェブページ閲覧の際の最も主要な操作である縦方向のページスクロール。この操作に連動した動き、想定外ではあるものの、スクロールとの相関によりあくまで自分が操作している感覚が得られ、こちらの渡邉恵太氏の記事にもあるような自己帰属感を得られる。これが快感の正体ではないかと考える。 (快感なんかなくね? という意見があったので追記) 簡単に言えば、本来マウスを触ってカーソルが動くだけでも面白くて身体拡張感覚由来の快感があったのである。しかし慣れることによって、ホイールを回して画面がスクロールすることはもはや当たり前すぎて身体拡張感覚など得られなくなっている。しかしデフォルトの挙動以外に新たなインタラクションを導入することでこれを再び感じられる。つまり言いたいことは「インタラクションは気持ちいい」ということ
UICollectionViewでエンドレススクロールを実現する方法
これは面白そう。 以下、引用： ソフトウェア開発における「プロトタイプ」とは、シミュレーションを目的とした試作品のことをいいます。本書で解説するプロトタイピングは、主に紙などを使った「低精度プロトタイピング」を中心とした手法です。リスク回避や初期段階における可能性の模索をメ...
iOS: UITableViewを使って横スクロール型画像ビュアーの実装
UITableView を横スクロールさせる画像ビュアーを作ってみましょう。 UITableView の横スクロール方法は多くの方が語られておりますが、今回はちょっとした Tips も含めて書いてみました。 UITableView は基本的に縦スクロールしか機能がないので、その View を90度回転させてやることで横スクロールを実現させます。 その際、UITableView を直接90度回転させるのではなく、UIView の上に UITableView を載せ、その UIView を回転させるのがコツです。 そうしないと UITableView のタッチ検出がうまくいかない時があるそうです。 以下のサイトを参考にしました。 UITableViewを回転して横スクロールする際のタッチのエラーと対策方法 | Zero4Racer PRO Developer's Blog なお今回のサンプルプ
Nike Sustainability. Move to Zero
Nike asks you to accept cookies for performance, social media and advertising purposes. Social media and advertising cookies of third parties are used to offer you social media functionalities and personalized ads. To get more information or amend your preferences, press the ‘more information’ button or visit "Cookie Settings" at the bottom of the website. To get more information about these cooki
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.css-lecture.com/log/web-design/horizontal-scroll-website.html
WordPress推しブログ – ねたわん