Updated 2015.05.29 / Published 2013.11.21 特定の場所までスクロールしたら要素を表示させたり・動かしたり、またはリサイズに応じてレイアウトを再調整したりなど、JavaScriptではscrollやresizeに応じたイベントが頻繁に用いられますが、これらのイベントは断続的に処理を実行することになるので、制作者の意図せぬ形でユーザ側では負荷の高い処理になっているかもしれません。そこで、ちょっとの工夫だけでこれらのイベントの負荷を抑制できるポイントを紹介します。 スクロール時におけるサンプルコード try { //IE9+, Other Browsers window.addEventListener( 'scroll', sample, false ); } catch (e) { //for IE8- window.attachEvent( 'ons
キーボードの矢印キーでスクロールする時のカクカク感をなくす拡張機能『Smooth Key Scroll 』 | ライフハッカー・ジャパン
デスク配線がスッキリ。Ankerの全部入り12 in 1モニタースタンドが突然8,250円OFFされてた #Amazonセール
AjaxScroll – Ajax Scroll jQuery Plugin | Blogfreakz - Web Design and Web Development resources
28th March 2010 81tYr4Or · Ajax, JQuery · Comments Off on AjaxScroll – Ajax Scroll jQuery Plugin AjaxScroll is an lightweight jQuery plugins that provided the ajax scollpane to replace the Next/Previous buttons, behaviour similar as dzone.com or MSN Image Search(Live.com Search). This plugin support dor vertical scroll and horizontal scroll. It has 3 parameter you have to set toomplents this ajax
Macアプリ「Scroll Reverser」を使って、トラックパッドとマウスのスクロール方向を逆に設定する方法を紹介します。 デフォルトの設定では、トラックパッドのスクロール方向はナチュラル方向に設定されています。ナチュラル方向は、iPhoneやiPadと同じスクロール操作なので、直感的で使いやすくなっています。 しかし、この設定だとマウスのスクロール方向が従来の（Windowsの）方向と逆になってしまうので、はっきり言って使いづらいです。そのため、「トラックパッド/マウスでの操作」の際に毎回トラックパッドのスクロール設定を切り替える。このような方も多いのではないでしょうか（たぶん）。 そこで！ アプリ「Scroll Reverser」を使って、以下の理想的なスクロールを手に入れましょう。 トラックパッド：ナチュラル方向のスクロールマウス：従来のスクロール それでは、アプリ「Scroll
WEB,DESIGN,ActionScript Memo and MORE…サンプル（コンテナ範囲外でスクロール） サンプル（コンテナ範囲内でスクロール） ダウンロード JQUERY SCROLL FOLLOW http://kitchen.net-perspective.com/open-source/scroll-follow/ <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery.cookie.js"></script> <script type="text/javascript" src="js/ui.core.js"></script> <script type="text/javascript"
scrollに応じて要素を固定/解除するCSS「position: sticky」とpolyfill「sticky-state」の紹介（脱jQuery）
当ブログでは、画面をスクロールすると途中でサイドバーを固定/解除する機能を実装しています。もともとこの機能をJavaScript（jQuery）で独自に実装していました。今回のこのサイドバー固定/解除機能をCSSの「position: sticky」で実装し直すことにしました。いわゆる脱jQueryです。スクロールが絡むJavaScriptの処理は、イベントが頻発するためにブラウザに負荷をかけやすいです。今回CSSの「position: sticky」で実装し直したことで、ブラウザに優しいページになったんじゃないかなと思っています。今回はこの「position: sticky」でのサイドバー固定機能の実装方法と、polyfill「sticky-state」の使い方を紹介したいと思います。 はじめに当ブログでは、ページをスクロールすると途中で「サイドバー」が画面に固定されるようになっています
TOP > WebDesign > スクロール終端で出現するTOPに戻るボタン「jQuery Scroll to Top Control v1.1」 WEBはどうしてもその性質上縦に長くなってしまう傾向があり、縦にスクロールして見ていくと言うサイトも多いかと思います。よくユーザーインターフェイスをよくするためにページ下層にTOPに戻るボタンが用意されていて、読み終わった後に一瞬でTOPに戻れる仕組みを取っているサイトも多いのですが、今回紹介するのは常に表示させておくのではなく、スクロール終端で出現するTOPに戻るボタン「jQuery Scroll to Top Control v1.1」です。 ユーザーがページ下部に戻ったときだけ、フェードインで登場し、逆にスクロールで上部に戻ると言った時には消えると言う仕組みになっています。 詳しくは以下 実装は至って簡単で、ボタンを準備して、J
Easy Scroll v1.0 - Unobtrusive content scroller This is a demonstration of an unobtrusive content scroller.コンテンツをブロック内でスクロールさせられる「Easy Scroll」 先日、横スクロールのものを紹介しましたが、たてスクロールのものもありましたね。 狭い範囲に情報を入れたい場合に活用できそうなので覚えておきましょう。 関連エントリ カーソル位置によって自動スクロールする小窓実装ライブラリ
Scroll Depth - A Google Analytics plugin for measuring page scrolling
Scroll Depth is a Google Analytics plugin that lets you measure how far users are scrolling. It monitors the 25%, 50%, 75%, and 100% scroll points, sending a Google Analytics Event for each one. You can also track when specific elements on the page are scrolled into view. The plugin provides native support for Universal Analytics, Classic Google Analytics, and Google Tag Manager, and can be used w
Native CSS Scroll Snap PointsScrolling effects are increasingly popular these days. Scroll snapping is used widely for a better separation of the provided content (vertical full height pages) or, for example, to emulate galleries behavior. There are many popular plugins (fullPage.js, jQuery.panelSnap, jQuery Scrollify etc.) which provide such functionality. Can you imagine how easy would be creati
twitter facebook hatena google pocket よくサイトの右上に必ずついてくる情報ボックスやメニューがあります。 邪魔という意見もありますが、必要な情報にすぐにリーチ出来るのならあってもいいのではないでしょうか。 これをjQueryプラグインのContained Sticky Scrollで実現しましょう。 sponsors 使用方法 Contained Sticky Scrollからjquery-contained-sticky-scroll.jsをjqueryからjquery.jsをダウンロードします。 <script src="/test/js/jquery-1.4.4.min.js" type="text/javascript"></script> <script src="/test/js/jquery-contained-sticky-scroll
Murasakiはシンプルなユーザインターフェイスと豊富な機能を持った、OS X用のEPUB閲覧アプリケーションです（DRMで保護されたEPUBは開けません）。
This extension has been deprecated and can be safely removed.
Using CSSOM smooth scroll API in JavaScript and CSSFrequently we want to add scrolling to some part of the page or box. E.g. to highlight something or just scroll to an anchor. To provide better UX and feeling usually smooth scrolling is used. Previously to implement it we had to use plugins like "jQuery.scrollTo" or similar solutions. But dreams came true- there is a specification for native smoo
iPhone 5sサイト風の１ページスクロールなページを作れるjQueryプラグイン「One Page Scroll」:phpspot開発日誌
jQuery One Page Scroll by Pete R. | The Pete Design iPhone 5sサイト風の１ページスクロールなページを作れるjQueryプラグイン「One Page Scroll」。 流行りの１ページスクロールサイトが作れるプラグインです。iPhone 5sのサイト divを並べて初期化するだけなのでだれでも簡単に使えそう 関連エントリ ページを水平にパララックスしつつスクロールさせられるjQueryプラグイン「jInvertScroll」 バウンスさせたりできるページのアニメーションスクロール実装jQueryプラグイン「AnimateScroll」 スクロールしてもブロックを固定位置に表示させられるjQueryプラグイン「Sticky-Kit」 スクロールすると上に固定される一見普通のナビゲーション実装jQueryプラグイン「SMINT」 アニメ
【Animate On Scroll Library】スクロールに反応してエフェクトをかけられる！【Javascript】 - Milkのメモ帳
外部Libraryってどうやって利用するの？ CDN（Content Delivery Network）サービス AOS（Animate On Scroll Library）を利用してみよう！ CDNサービスの利用設定 実際に使ってみよう！ FADE FLIP ZOOM 最後に こんにちは。Milkです。 記事を書いていると、「なんか味気ないなぁ・・・」って思うことはありませんか？ そんな時は、外部Libraryを利用して手軽にエフェクトを追加してみましょう。 今回ご紹介するエフェクトのLibraryは、「AOS：Animate On Scroll Library」と言うものです。 michalsnik.github.io その前に、こう言った外部Libraryを利用するのにはどうしたらいいのでしょうか？ こちらの記事が上手く動作しない場合は、こちらからどうぞ www.milkmemo.c
ページが縦に長くなるとサイドメニューとかが見えなくなってしまいます。 それを防ぐ方法としてabsoluteやfixedするケースがあります。 jQuery Scroll FollowではjQueryを使用し、スムーズについてきます。 sponsors 使用方法 jQuery Scroll FollowからjQuery、jQuery UI Core、jQuery Easing Plugin、jQuery Cookie Pluginをダウンロードします。 headには以下のように記述します。 <script type="text/javascript" src="http://yourdomain/jquery-1.2.6.js"></script> <script type="text/javascript" src="http://yourdomain/ui.core.js"></scri
Performance focused, lightweight JavaScript scroll animation library
This extension has been deprecated and can be safely removed.
ScrollTrigger - Let your page react to scroll changes
Trigger classes based on scroll position The most basic usage of ScrollTrigger is to trigger classes based on the current scroll position. E.g. when an element enters the viewport, fade it in. You can add custom offsets per element, or set offsets on the viewport (e.g. always trigger after the element reaches 20% of the viewport) Execute callbacks on entering / leaving the viewport When using the
16 jQuery Infinite Scroll Plugin by Editorial Staff January 17, 2013 Infinite scrolling is a new interface technique to retain your users on a single page of a website. the web page just keeps loading with new items attached to the end. Infinite scrolling popularity and use of social media sites, sites like Pinterest, Facebook, Twitter and many more. In this post, we are sharing with you a free pr
jQuery Scrollable @ jQuery Tools - Scroll your HTML with eye candy
Õ]ysÛFÿü hʦDPã :q|$I2ÞHÔÖÔ«I4IX @ ÑLÊß}ßÑ @H¦,ek×e èãõëwüÞëCý>þ ô³×ïøsúÅ >¿üï×/Å\/² øp0 ýÞ«¬X-3¹V¥ø»¼ 2]ê}±Rã*Õj_L²^Tâx÷_µ*×â²(²Já* ñ:MKæ*ú½×¥B;PWTZæ,J ×ðèU&«y,þ&ª i%ô\"ÏÖB}¨¥N\ìBO"/V{q 0 }H«Èd>;T Ñ % ÿôù¿>~rßz½SêL 0"Ëä8SâoMú æX u)~¼üù'±Jõ\¨µ |}:ä°Í ÒRär¡Î¢ ª" Á ¹V¹>LÓˬ¥9rL,äUÏÖU¦ P¶ ÷;/Êôw¨/3` T &étß"1 õZÝþCW 03ìó=õÉÍí7¾AÏÍ Èýw0»L¼«Ô~B ; môÒùØm^
Infinite scroll search-friendly recommendations
accessibility 10 advanced 195 AMP 13 Android 2 API 7 apps 7 autocomplete 2 beginner 173 CAPTCHA 1 Chrome 2 cms 1 crawling and indexing 158 encryption 3 events 51 feedback and communication 83 forums 5 general tips 90 geotargeting 1 Google Assistant 3 Google I/O 3 Google Images 3 Google News 2 hacked sites 12 hangout 2 hreflang 3 https 5 images 12 intermediate 205 interstitials 1 javascript 8 job s
Yo! We’re leaving this post up, but this is really old and we super don’t maintain Alton. You can probably find a better scroll-jacking solution, if you should even use one. Alton is a jQuery-powered scrolling plugin that utilizes 100% height & width, custom vertical scrolling effects in order to present and navigate through web content in a unique manner. It utilizes the whole scrolljacking idea,
ウェブページ全体の何％までスクロールしたかひと目で分かるアドオン「Scroll Progress」 | ライフハッカー・ジャパン
デスク配線がスッキリ。Ankerの全部入り12 in 1モニタースタンドが突然8,250円OFFされてた #Amazonセール
Easy Scrollは、スクリプトやCSSオフ時でも情報の提供が可能な、コンテンツをスクロールするスクリプトです。 Easy Scroll: Accessible Content Scroller デモページ スクリプトのオフ時には隠されているコンテンツが全て表示され、CSSのオフ時にはスクロールボタンがリストで表示されます。 Easy ScrollはjQueryやPrototypeなどのライブラリを必要とせず、単独のスクリプトとして配布されています。 設置もシンプルで、コンテンツのスクロールアップ・スクロールダウン・リセットの機能があり、スクロール領域の高さとスピードを設定することができます。
Include css3-animated.js at the end of your file and animations.css in the head. Once you have done that you can just define "animatedParent" as the parent class which is what will trigger the child class "animated" to animate whichever animation is defined, here we are using "bounceInDown". Click here to see an example of all the CSS animations. This CSS animation library utilises the lastest har
ある案件で、divタグにoverflow:autoを指定し、スクロールバーを表示される様な指定をしていたのですが、iPadで確認を取った時に、スクロールバーが表示されていない事を教えてもらい、iPhoneでも同様の状態になっている事に気づきました。 また、通常のスクロールのようになぞってもスクロールされず、中のコンテンツを確認することが出来ませんでした。 何か方法でもあるのかと調べてみたところ、「メモ: iPad（iPhone）の困った仕様」で、「二本指」でなぞることでスクロールする事が分かりました。 説明書が無い、また、二本指でのスクロールはあまり使わないことから、中々気づきにくい操作であるような気がするので、iPhone向けのコンテンツなら尚更、ページ内に説明文が必要な感じを受けました。 「直感的」な操作であるタッチパネルであっても、今回であればページ内の一部のコンテンツをスクロールさ
Scroll to the future—Martian Chronicles, Evil Martians’ team blog
If you’re interested in translating or adapting this post, please contact us first. Everything you always wanted to know about implementing scrolling but were afraid to ask. We have scrolled to the bottom of modern web specifications to take you on a whirlwind tour of latest CSS and JavaScript features that make navigating around a single page smooth, beautiful and less resource-hungry. Most of th
Firefoxで「スクロールマーカー」を実現できるスクリプト「Page Scroll Marker」*二十歳街道まっしぐら（FC2ブログ時代）
「Page Scroll Marker」はGreasemonkeyスクリプトで、Firefox上で「スクロールマーカー」を実現できます。 「スクロールマーカー」はOpera標準の機能で、どこまで自分がスクロールしたかを表示してくれる機能です。 以下に、使ってみた様子を載せておきます。 「スクロールマーカー」はOpera標準の機能です。 真ん中に灰色の矢印と点線が表示されています。 これが「スクロールマーカー」です。 Operaのサイトでも解説があります。 新機能 Opera スクロールマーカーは Web ページをあちこちスクロールさせて続きを読む際に役立ちます。ページの末尾まで読み進んだ時にスクロール前の画面の下端の位置を示してくれるので、どこからが続きか見つけやすくなります。 （Opera 9.6 for Linux 更新履歴より）
Mozilla Re-Mix: Firefoxの検索エンジンをマウスホイールでクルクルと切り替えることができるアドオン「Scroll Search Engines」
FirefoxやThunderbirdはWEBユーザーの必須アイテム。 初心者からヘビーユーザーまで使える！便利でクールなFirefox拡張機能（アドオン）の使い方やカスタマイズ、Mozilla関連情報をどうぞ。 Adobe 「Flash Player」を緊急アップデート。 by hoge (07/16) Adobe 「Flash Player」を緊急アップデート。 by H.I. (07/16) ウェブページから余計なコンテンツを排除して読みやすく表示できるFirefoxアドオン「Tranquility Reader」 by しんちゃん (07/11) YouTubeのHTML5動画に表示される広告をブロックしてくれるFirefoxアドオン「YouTube Advertisement Blocker」 by はち (06/17) ウェブページ上の不要なリンクを非表示にできるFirefox
♯現場猫 事務猫さん「上司猫のパソコントラブルといえば、CapsLockかNumLockかScroll Lockくらいなもんでしょ(ミルクボーイ風に)」
まとめ 現場猫コラまとめ【事務猫さん】 事務猫さんに関するコラのまとめです。 ※現場猫・電話猫の元ネタはくまみね氏(@kumamine)氏によるものです。こちらは「からあげのるつぼ」による二次創作作品なのでご注意ください。
社内で、アジャイルプラクティスの読書会を開いている。 今日は、その第四回。 アジャイルプラクティスをみんなで読んでいて、感じるのは、 現場には現場のプラクティスが既にあるということ。 その知恵を共有することで、新たな気づきを生むことができる。 Aという現場で抱えている問題は、すでにBという現場で解決を している。でも、それをシェアするようなタイミングも場も 無いから、同じような問題をそれぞれが解決している。 もっと、もっと、組織の壁は越えていい。 さて、この視点を広げてみたらどうだろうと思った。 つまり、社内でやっただけでも、我々は、前進することが できた。 では、会社の壁を越えて、そんな場を作り出すことができたら、どうか。 AというSIerとBというSIerは同じ悩みを抱えているかもしれない。 しかし、CというSIerはそれを既に解決しているかもしれない。 会社という壁を乗り越えたとき、
Some inspiration for headers that animate when scrolling the page. You’ve surely seen those really cool on scroll effects for headers that have been around lately. One example is the header on the Riot Industries website by Phil Renaud which rotates in 3d on click and enlarges when scrolling down. Similar work has been done by Johnny Simpson where he explores Scroll Activated Fixed Header Animatio
Android2.xでoverflow:scrollやautoが効かない（overflow:hiddenとして処理される）のは有名な話で、困った経験がある方も多いと思います。 調べた限りJSで実装するか、スクロールバーを諦めるといった対応をされる方が多いでしょうか？ 当社ではJSプラグインで対策する方法を検討しましたが、既存プラグインはjQueryなどライブラリに依存している事や 他UIと組み合わせた際の相性（イベントが競合しても調整しやすいように）を考えて自前実装で対応する事にしました。 ネイティブで対応済みのバージョンは？ 最初に、Android2.xなどは何かしら対策が必要ですが比較的新しいOSはネイティブで対応しているものもあります。 手元の端末で確認したところ、Androidは4.xでoverflow:autoに対応（Android4.0.4の標準ブラウザ&Chromeで確認）、
Exclusive Scroll
news 2008/8/30 ペンタブを動かした状態でExclusiveScrollに割り当てたボタンを押すと、ペンタブのクリックやボタンが押されたままになる問題を修正 2008/7/27 対応アプリケーションとプラグインの追加 2008/3/18 Scroll Plugin Source Code Beta v1.0 を公開 2008/2/27 システムシャットダウン時に設定が保存されないバグを修正 2008/2/27 割り当てたキーが押されたままになるバグの原因の一つを修正 2008/2/25 システムワイドホットキーの実装 2008/2/25 ExclusiveScrollの無効時にアイコンをグレースケール化 2008/2/23 SendLineScrollPluginが落ちるバグを修正 2008/2/23 SpaceDragPluginのスクロール方向が逆だったの
Parallax-Scroll is a jQuery plugin to create elements with background images that behaves as if their background-attachment property is between scroll and fixed, similar to the parallax scrolling effect you see on Spotify and is loosely based on Peder Andreas Nielsen’s Parallax ImageScroll. It makes clever use of background-position and background-size properties instead of CSS3 tranforms. It runs
どこまでスクロール(閲覧)されているかをGoogleアナリテクスで分かる「Scroll Depth」を試してみた｜Resound Log
この記事は約 4 分で読めます。 Webサイトの長いページやブログの長い記事を書くと、どこまでスクロールして読んでもらえているのか気になります。 Googleアナリテクスの滞在時間を目安にしたり、「UserHeat」を利用するテもありますが、今回jQueryプラグインを使うことでGoogleアナリテクスの画面でスクロール量を見ることができる「Scroll Depth」が面白そうだったので、試してみました。 ※WordPressのプラグインがあることが分かりました！この記事の最後にリンクします。 「jQuery Scroll Depth」の簡単な説明 「Scroll Depth」を導入すると、以下のことがGoogleアナリテクスで計測できるようになります。 ページ到達状況(%やpx単位でわかる。設定をすれば細かな単位で把握できるようになる) ページの到達時間 Googleアナリテクスのレポー
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
scroll, resizeイベントの負荷を抑制する
Mac - トラックパッドとマウスのスクロール方向を逆にする - アプリ「Scroll Reverser」
KIYOTY DESIGN BLOG - フローティングメニュー-JQUERY SCROLL FOLLOW
スクロール終端で出現するTOPに戻るボタン「jQuery Scroll to Top Control v1.1」
コンテンツをブロック内でスクロールさせられる「Easy Scroll」:phpspot開発日誌
買い物山脈 Kensington「Orbit Trackball with Scroll Ring」 ～スクロールリングを搭載した低価格トラックボール
Native CSS Scroll Snap Points
jQueryで常に所定の場所にサイドカラムを表示させるプラグイン「Contained Sticky Scroll」
Murasaki — The Scroll-based EPUB Reader for OS X
Google Quick Scroll - Google Chrome 拡張機能ギャラリー
Native Smooth Scroll behavior
スクロールしてもついてくる！のJavaScript「jQuery Scroll Follow」
Sal - Lightweight scroll animation library
Google Quick Scroll - Chrome Web Store
16 jQuery Infinite Scroll Plugin
Alton: jQuery Scroll Jacking Plugin - Paper Leaf
[JS]コンテンツをスクロールするアクセシブルなスクリプト -Easy Scroll
CSS3 Animate It Examples - Animate Elements on Scroll
iPhone、iPadでのoverflow:scroll/autoの動作について - SUSH-i LOG
この業界が変わるわけがないと、言う人はまだいるだろうか。 - The Dragon Scroll
On Scroll Header Effects | Codrops
Androidのoverflow:auto/scroll対策
【やじうまミニレビュー】 ケンジントン「OrbitTrackball with Scroll Ring」 ～実売3千円で購入可能、左右どちらの手でも使えるトラックボール
Parallax-Scroll by Aen