ソシオメディア | UITableView の衝撃
ひとつのデザインが事実上の標準となり、その後の基本パターンを変えてしまうことがあります。変わった後ではそれが当たり前となってしまい、その標準に始まりがあったことなど誰も気にしなくなるのです。また振り返ってみたとしても、それがなかった頃の感覚に立ち戻ることはできないので、もはや何がどう新しかったのかを実感することは難しいのです。 2007年に iPhone が発売され、その一年後に日本で iPhone 3G が発売されてから今日（2018年7月11日）でちょうど10年が経ちました。この10年間でスマートフォンやそのアプリを介したオンラインサービスは瞬く間に普及し、私たちのモバイルコンピューティング、コミュニケーション、ソーシャルメディア、Eコマースなどの態様が大きく変化したのは周知のとおりです。 iPhone のデザインは多くの面で新しいものでした。そしてその大部分がその後のスマートフォンの
Bidirectional Scrolling is here to save Responsive Design
This article is about a simple question with a surprisingly complex answer. The QuestionIt’s Monday afternoon and the air is starting to feel stuffy in our meeting room. We are standing in front of 20 marketing professionals, all of them representatives of individual countries of an international non profit organisation. We just finished presenting our new UX approach for their global website rela
CSS only scroll indicator
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
下方向にもCSS Transitionでスムーズにスクロール
少し前のCSS Transitionを使ったスムーズにスクロールしてトップに戻る機能という記事では、CSS Transitionを使ってスムーズにスクロールさせるためにbody要素のmargin-topプロパティーを負の値を設定した。これはとにかく上方向へのスクロールにしか使うことは出来ない。下方向にスムーズにスクロールさせるためにはまた別のアプローチが必要になるようだ。 何かしらのCSSプロパティーを使い、body要素を上方向にずらすということになる。つまりtransformプロパティーでtranslate()やtranslate3d()を使いY方向のマイナスへ動かすのが向いているようだ。あとはtransitionプロパティーを組み合わせるだけでスムーズにスクロール(しているように見せる)ことができる。 Demo: Scroll Down Smoothly with CSS Transi
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
LukeW | There Is No Fold
There Is No Fold by Luke Wroblewski April 29, 2015 On the Web, people use the concept of “above the fold” to support layout decisions, call to action designs, ad placements, and more. Here’s why most of these arguments don’t fly. Placing elements at the top of the screen does not guarantee they are visible because people often scroll right away. So just because something is “above the fold” does n
Dear web designer, let’s stop breaking the affordance of scrolling
We’ve all seen it. You get on a website and there it is: a massive edge-to-edge picture, and it's beautiful… It’s a huge (pun intended) web design trend and it looks like a lot of people love it. Why are you screaming at me, arrow down? Or should I call you "scrorrow?" Ugh… I know how to use my computer, ok? I'm a natural explorer. I've been scrolling away for years and I'm not stupid. :( Please d
Native Smooth Scroll behavior
Frequently 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 smooth scroll behavior API. Demo ...
スクロールで何かするための処理まとめ。（JavaScriptおれおれAdvent Calendar 2014 – 21日目） | Ginpen.com
JavaScriptおれおれAdvent Calendar 2014 – 21日目 よくある処理についてまとめました。 スクロールの監視 windowを対象にscrollイベントを監視するだけです。documentでも動くけど、古いIEは駄目。いちいち変える理由もないので、windowだけ使えばよろし。 $(window ).on('scroll', function(event){ console.log('window'); }); $(document).on('scroll', function(event){ console.log('document'); }); // IE 8では呼ばれない スクロール位置の取得 document.documentElement.scrollTopに現在のスクロール位置が格納されています。ちなみにdocument.documentElemen
iPhone/Androidにタッチ！ - 愛と勇気と缶ビール
stats.js (https://github.com/mrdoob/stats.js) という、JavaScriptでfpsもどきの値を出すライブラリをiPhone/Androidで試していた時に気づいたんだけど、iPhone/AndroidのWebKitではデフォルトのスクロール中はsetIntervalの監視が無効になっているっぽい。 具体的には、例えば setInterval(function() { count++; }, 1000); みたいなことをやっているページがあってとして 1. タッチ開始 2. 指を動かす 3. タッチ終了 4. 慣性スクロール の流れで、4.が完全に終わるまでcountの値は変わらない。また、実行キューに入っていたものがスクロール後に一気に実行されるというわけでもない。完全にtimerが止まっている。 一瞬「指を置いて動かしている間はJSの実行は全
Issues with position fixed & scrolling on iOS
With the release of iOS 5, fixed positioned layout is said to be supported in MobileSafari. The word supported needs to be taken with a pinch of salt, because there's all kinds of issues which I intend to show you in the following post. Note that I have filed bugs for a number of these during the beta of iOS 5 - but god knows how the Radar Apple thing works, so I don't know the issue numbers. READ
Mailchimpの新ヘッダー
Mailchimpのウェブサイトが新しくなり、ヘッダーがかっこ良くなった。もしかしたら固定された水平ヘッダーの最適解かもしれない。なかなかパクりたい。 Mailchimpの新ヘッダーは最初はちょっとスクロールに従ってついてくるんだけど、メイン・コンテンツに差し掛かると消える。最後まで読むか上にスクロールして戻ろうとすると再表示されるというもの。トップだとちょっとわかりづらいのでPricingのページをスクロールさせてみるとわかりやすい。 スクロールすると固定になるヘッダーを採用している多くのウェブサイトと同じようにMailchimpもヘッダーのすぐ下にでっかい領域が確保されている。そのでっかい領域によるヘッダー(のナビゲーション)へのアクセス性の低下をフォローするために多くのウェブサイトはヘッダーを固定しちゃうわけなんだけど、それでは同時にコンテンツの閲覧性に影響を与えてしまう。ヘッダーを
Smooth Scrolling | CSS-Tricks
Hey! Before you go too far down the rabbit hole of JavaScript-based smooth scrolling, know that there is a native CSS feature for this: scroll-behavior. html { scroll-behavior: smooth; } And before you reach for a library like jQuery to help, there is also a native JavaScript version of smooth scrolling, like this: // Scroll to specific values // scrollTo is the same window.scroll({ top: 2500, lef
fartscroll.js | Everyone farts. And now your web pages can too.
Download .zip Bookmarklet View on GitHub Everyone farts. And now your web pages can too. Include "fartscroll.js" in your page. You can include the latest version straight from our CDN: <script src="http://code.onion.com/fartscroll.js"></script> Initialize the fartscroll plugin after the page has loaded: // Fart every 400 pixels scrolled in the window fartscroll(); // Fart every 800 pixels scrolled
Page not found - Directlyrics
Oops we couldn't find that page. Use the search bar in the header, or check out any of these popular lyrics: Cardi B I Like It lyrics XXXTENTACION SAD lyrics Juice WRLD Lucid Dreams lyrics Maroon 5 Girls Like You lyrics Post Malone Psycho lyrics Drake Nice For What lyrics Ella Mai Boo'd Up lyrics Ariana Grande No Tears Left To Cry lyrics Drake God's Plan lyrics Bebe Rexha Meant To Be lyrics
windows
a handy, loosely-coupled jQuery plugin for full-screen scrolling windows project root | -- css | -- | -- main.css (compiled) | -- js | -- | -- jquery.windows.js | -- scss | -- | -- main.scss | -- index.html This is a light bootstrap that sets up: - the basic SASS for sequential full screen windows - a jQuery plugin for managing their positions as the user scrolls The plugin simply opens up a handy
第2回 スクロールとページングのUIを考える（2） | gihyo.jp
スクロールするUI UIの基本を見てきましたが、Web UIの世界では、今まで当たり前だったものが、時代の変化に伴って廃れていったり、新しいものに置き換えられていくということが頻繁に起きます。今回のテーマであるスクロールとページングを例に、まずはスクロールバーの歴史を紐解いていきましょう。 スクロールバーとは スクロールバーは上下または左右にスクロールするために使用されるGUI（Graphical User Interface）の代表的なUIコンポーネントの一つで、近年、役割が変化しつつある部品です。 スクロールバーの役割としては次のようなものが挙げられます。 ページ全体の分量がどの程度なのか把握する 現在の位置がどこなのか把握する 指定位置にジャンプする 細かいスクロールをする 最初に登場したスクロールバーは、直接操作して画面を上下または左右に動かすものでした（図1・注3）。 図1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Making Huge Moves.
GitHub - kswedberg/jquery-smooth-scroll: Automatically make same-page links scroll smoothly
SHADOW | Community of Dreamers