Connecting people, spaces, and data to power the places where people work best together
scrollに関するtytoのブックマーク (14)
-
tyto 2014/04/07
-
CSS3で簡単！ スマホ向けWebページのスクロールを激派手にできるstroll.jsとは
CSS3で簡単！ スマホ向けWebページのスクロールを激派手にできるstroll.jsとは：HTML5アプリ作ろうぜ！（9）（1/2 ページ） オープンソースのJavaScriptライブラリ「stroll.js」について、概要と使い方を紹介します。CSS3のアニメーションを駆使しているので動きが軽く、スマホ向けWebページのスクロールに派手なエフェクトを簡単に追加できます。 最近はやりの「HTML5・JavaScriptライブラリ・CSS3・API」の紹介、またそれらを組み合わせた「sampleアプリケーションの紹介と解説」を厳選し執筆していく本連載「HTML5アプリ作ろうぜ！」。今回紹介するのは「stroll.js」です。 CSS3のアニメーションを駆使するstroll.jsとは stroll.jsはオープンソース（ライセンスMIT）のスマートフォン用スクロールライブラリ（JavaScr
-
scrolldeck.js
scrolldeck created by Chicago Web Developer John Polacek. I work at at AuctionsByCellular. We make mobile bidding and auction software for charities. Follow @johnpolacek A jQuery plugin for making scrolling presentation decks For example: animations, fullscreen images or parallaxing Powered by Scrollorama Download: zip tar How to Use Build a web page with each slide as a div. Pro-Tip: Use rem’s to
-
[JS]最近よく見かける1ページ垂直スクロールコンテンツで、スクロール位置を自動補正するスクリプト -windows.js
スクロールしすぎも補正 windows.jsの使い方 実装は簡単で、既存のコンテンツにclassを加えるだけで適用できます。 Step 1: HTML HTMLは各コンテンツを配置しているdivやsectionにclassを加えるだけです。 classは変更可です。 <section class="window"></section> <section class="window"></section> <section class="window"></section> <section class="window"></section> <section class="window"></section> Step 2: 外部ファイル 「jquery.js」と当スクリプトをhead内に記述します。 <script src="http://cdnjs.cloudflare.com/aja
-
[JS]ページのデザインに影響を与えないパーフェクトなスクロールバーの超軽量スクリプト -Perfect Scrollbar
Perfect Scrollbar Perfect Scrollbar -GitHub 何をもってパーフェクトなのか Perfect Scrollbarのデモ Perfect Scrollbarの使い方 何をもってパーフェクトなのか このスクロールバーにパーフェクトとつけた理由は、下記の4つだそうです。 ページ上のあらゆる要素にCSSで影響を与えないこと スクロールバーがオリジナルのデザインに影響を与えないこと スクロールバーのデザインは完全にカスタマイズ可能であること コンテンツの大きさが変化したら、スクロールバーの大きさと位置がそれに合わせて変化すること Perfect Scrollbarのデモ デモではあずにゃんの画像をホバーすると、スクロールバーが表示されます。 デモ：領域を拡大 バーの長さが変化していることに注目してください！ Perfect Scrollbarの使い方 Step
-
-
スクロールすると左右から画像が集まってくるWebデザインのNizoっぽいやつをjQueryで作る - かちびと.net
以前少し話題になった、Nizoというサイト がああります。このサイトで導入している、 スクロールに応じて要素をアニメーション させるエフェクトがちょっと素敵なんです が、これと同じような効果をjQueryで作る、 というのが今日の記事内容です。 どんなエフェクト？って思われた方はNizoでスクロールしてみてください。このエフェクトをjQueryで作る方法が公開されていたので一応メモです。 Intriguing animate-on-scroll effect スクロールすると左右からいろいろ集まってきます。まぁそれだけなんですが、インパクトはありますね。 IE7でも問題なく動作しました。 Sample コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquer
-
-
-
ページ内に自動でビジュアル付きのスムーズスクロールを実装する軽量なjQueryプラグインSimple Elements Mapper - かちびと.net
珍しかったので衝動でメモ。ページ内 に自動でビジュアル付きのスクロール を実装してくれるjQueryプラグイン・ Simple Elements Mapperです。ビジュ アル化したい要素や色なども選択可能 でスクリプト自体も軽量です。 たまに見かけるスクロールですね。指定した要素をビジュアル化することで概ね何があるかを把握してもらえます。またライブラリ自体も3kbと軽量でシンプルです。 右側に見えているピンクの何かしらが、エレメントがビジュアル化されたページスクロールです。クリックでそのエレメントの場所にページ内スクロールする、というもの。 サンプル見たほうが早いですかね。 Sample(※デモページはShotokuを使用しています) サンプルでは、リンクと画像をビジュアル化しています。 最初は、ドラッグで動かせるのかな、とか勝手に思ってしまいました。動かせたほうが素敵かなー、やっぱり。
-
独自デザインのスクロールバーにする際に使えるjQueryプラグイン「jScrollbar」:phpspot開発日誌
jScrollbar : make your own scrollbar for scrolling contents with jQuery UI - MyjQueryPlugins 独自デザインのスクロールバーにする際に使えるjQueryプラグイン「jScrollbar」 綺麗にデザインされたバーもブラウザ依存のスクロールバーで台無しになってしまったり、OSによってデザインに違いが出てしまったりとあまりよいことはないですね。 かといってデザインを崩したくない場合なんかで、スクロールさせないわけにもいけないような時に使えそうなプラグインです。 以下のような自由なデザインのスクロールバーが作れます。画像を切り替えることで簡単に独自デザインにも出来ます。 で、独自デザインにしつつも、ちゃんとマウルホイールにも対応しています。 Twitterの新UIなんかでもスクロールバーが独自になっていたり
-
[JS]イージングにも対応した、コンテンツをスクロールさせるスクリプト -Custom Content Scroller
限られたスペースに設置するのに最適、コンテンツにスクロールバーを設置するjQueryのプラグインを紹介します。 スクロールバーのデザインはCSSで簡単にカスタマイズできます。
-
jQueryのプラグイン「Page Scroller」を商用利用でも無料に変更しました：更新- 3.0.7
当サイトで配付しているページ内をスムーズにスクロールできるスクリプト「Page Scroller」をバージョンアップ（3.0.7）して、商用利用でも無料に変更しました。 スクリプトは当サイトでも下記のキャプチャのように、いろいろな箇所に利用しています。 簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 [ad#ad-2] 3.0.7の変更点 スクリプトのライセンス スクリプトのダウンロード 3.0.7の変更点 主な変更点は、下記の通りです。 3.0.7 ライセンスが変わりました。 詳しくは、「スクリプトのライセンス」を参照ください。 スクリプトのライセンス ライセンスを下記のように変更しました。 変更前： 表示 - 非営利 - 継承 2.1 日本 変更後： 表示 - 継承 2.1 日本 使用条件 上記のライセンスに従い、個人でも商用で
-
ページ内スクロールエリアの是非 | Accessible & Usable
公開日 : 2010年8月4日 (2011年7月16日 更新) カテゴリー : アクセシビリティ / ユーザビリティ 今回の話題で採り上げる「ページ内スクロールエリア」とは、ブラウザの機能として標準装備されているスクロールバーとは別に、Webページの中で表示されるスクロール領域を意味します。下図のようなイメージです。 このようなスクロールエリアを用いると、情報をコンパクトに配置することができます。エリア内のすべての情報を見るにはスクロール操作が要るので、メニュー表示のように一覧性が求められる情報には適しませんが、たとえば、下図のような例を見かけたことがあるのではないでしょうか。 ページ内スクロールエリアは表示面積が限られるので、当該エリアの外側部分も含めて、ページ全体を見渡しやすくできるというメリットがあります。その一方で、ページ内スクロールエリアには、ユーザビリティやアクセシビリティの問
-
1
公式Twitter
- @HatenaBookmark
リリース、障害情報などのサービスのお知らせ
- @hatebu
最新の人気エントリーの配信
キーボードショートカット一覧
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Copyright © 2005-2025 Hatena. All Rights Reserved.
設定を変更しました