CSSのposition:stickyがすごく便利 | q-Az
最近新しく追加された position の新しい値 sticky が場合によってはすごく便利なので記事を書いてみます。 対応ブラウザがまだあまり多くないので実用性は乏しいかもしれませんが、今まで JavaScript の力を借りなきゃ出来なかったことがたったの2行の CSS で出来てしまう魔法みたいな position の値です。 position: stickyMDN が説明が詳しいので貼っておきます。 参考：position - CSS｜MDN 簡単に言うと「スクロールでその位置まで来たらそれ以降は fixed する」みたいな感じです。 サンプルこの記事内で「position: sticky」や「サンプル」など h2 要素に position: sticky をかけています。対応ブラウザであれば h2 要素が fixed しているはずです。 HTML<h2 class="h2-stic
400m画面スクロールの“苦行”が生む体験--「くばら あごだしチャレンジ」誕生秘話
スマートフォンを中心に、オムニチャネルやIoTなどの次世代テクノロジを通じて生み出されるデジタルマーケティング戦略。そこにはアイデアやクリエイティビティが不可欠だが、それだけでは「これまでになかった体験」を提供することはできない。ユーザーに新たなエクスペリエンスを届けるために、欠かせない普遍性や本質とは何か。 この連載では、デジタルを活用したコミュニケーション施策を発信する「コードアワード」に寄せられた作品から、デジタルマーケティングの「未来」を拓く“ヒント”をお届けする。 「コードアワード2016」において「グッド・ユース・オブ・メディア」に輝いた、久原本家グループ本社による「くばら あごだしチャレンジ」。施策のタイトルにある「あごだし」とは、「トビウオから採れるダシ」のことだ。 そのトビウオが400mの跳躍をすることにかけ、スマートフォンのみで閲覧できる「400m分のスクロール画面」を
MADOGATARI展［SHAFT 40th ANNIVERSARY］
「魔法少女まどか☆マギカ」© Magica Quartet／Aniplex・Madoka Partners・MBS 「〈物語〉シリーズ」© 西尾維新／講談社・アニプレックス・シャフト 「ぱにぽにだっしゅ！」© 氷川へきる／スクウェアエニックス・ぱにぽに製作委員会 「キノの旅 -the Beautiful World-」© 時雨沢恵一／アスキー・メディアワークス／「キノの旅」製作委員会 「十二戦支 爆烈エトレンジャー」© I＆S 「メカクシティアクターズ」© じん／1st PLACE・メカクシ団アニメ製作部 「ニセコイ」© 古味直志／集英社・アニプレックス・シャフト・MBS 「電波女と青春男」© 入間人間／アスキー・メディアワークス／『電波女と青春男』製作委員会 「ef-a tale of memories.」© minori/「ef」製作委員会 「まりあ†ほりっく」© 2009 遠藤海成・
jQueryでフリックを実装する場合に縦スクロールできなくなる問題を解決する方法 | スターフィールド株式会社
以前jQueryでプラグインを使わずにフリックを実装する方法についてご紹介いたしましたが、 こちらの方法を使った場合に、１つ問題が発生します。 それは、スマホやタブレットでは、 フリックできるようにした要素の上ではページのスクロールができなくなってしまうという問題です。 これは、touchmoveイベントの本来の動作であるページのスクロール動作を、 「e.preventDefault()」を指定してキャンセルしているためです。 フリックで要素を動かす動作を自然に行うためには欠かせないことなのですが、 横いっぱいに広げたスライダーなどでは、これによってページのスクロールができない範囲が大きくなってしまうため、とても使い勝手の悪いものとなってしまいます。 今回は、この問題を解決する方法について考えてみましたので、 ご紹介いたします。 ↓こちらがこの問題を解決したDEMOです(スマホやタブレット
8188www威尼斯(中国)有限公司-首页|欢迎您点击
最可能的原因: 指定的目录或文件在 Web 服务器上不存在。 URL 拼写错误。 某个自定义筛选器或模块(如 URLScan)限制了对该文件的访问。 可尝试的操作: 在 Web 服务器上创建内容。 检查浏览器 URL。 创建跟踪规则以跟踪此 HTTP 状态代码的失败请求，并查看是哪个模块在调用 SetStatus。有关为失败的请求创建跟踪规则的详细信息，请单击此处。
[JS]最近のWebサイトで見かける面白い仕掛けや便利な機能を実装するスクリプトのまとめ
最近のWebサイトでよく見かける面白い仕掛けのコンテンツやエフェクト、便利な機能を実装できるjQueryのプラグインやスクリプトを紹介します。 Midnight デモページ ロゴやヘッダなどをスクロール時に固定表示し、スクロールして表示されたコンテンツに応じて、固定エレメントのスタイルシートを変更させて表示するjQueryのプラグイン。 デモでは、表示されているコンテンツに応じて、ロゴの背景色とカラーが変わります。 Off Canvas Menu Effects デモページ メニューをサイドやトップ・ボトムから気持ちいいアニメーションで表示させるOff Canvas Menuのかっこいいエフェクトのまとめ。アニメーションのバリエーションとして見るだけでも楽しいです。
![[JS]最近のWebサイトで見かける面白い仕掛けや便利な機能を実装するスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/eb35406166a9bab01fb02a6a7949249bd7191347/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014092904-01.png)
「シングルページ」流行の7つの理由と最新事例まとめ (1/4)
「シングルページ」と呼ばれる、1ページで完結しているWebページを見かけることが多くなりました。シングルページの概要と、CSSフレームワークを使った実際のシングルページの作成を通して、シングルページのデザインの考え方や作成方法の知識を身につけられる連載をお届けします。解説はデザイナーの石嶋未来氏にお願いしました。（編集部） シングルページとは、1ページで完結しているWebページのことです。最近よく見かけるようになりましたね。シングルページのみを集めたギャラリーサイトなどもあり、Web制作に携わっている方であれば一度は目にしたことがあると思います。 シングルページで作られたサイト。左から、モバイルセキュリティソフトウェアのLookout, Inc,（https://www.lookout.com/）、「重陽」ブランドの包丁を製造販売している堺菊守 河村刃物株式会社（http://chouyo
Still Within · Compassionate guidance on the path of the heart
In my life, I have recognized immense benefit by consciously extending myself beyond what is comfortable.By choosing to encounter all that within me is unknown—fear, grief, and death; silence, ecstasy, and unity—I have uncovered a peace inside myself that seems to deepen my capacity to be with all the uncertainties of what it means to be human. Feeding this inquiry has allowed me to meet suffering
[JS]ユーザーがどのようにスクロールしてページを見ているかGoogle Analyticsで解析できるスクリプト -Scroll Depth
ユーザーがページを見た際に、どのくらいスクロールされているのか、また指定した要素がスクロールされて表示されるまでにどのくらいかかるのか、といったデータをGoogle Analytics上で解析できるようにするjQueryのプラグインを紹介します。 実装は簡単、ほんの数行ページに加えるだけです。 Scroll Depth Scroll Depth -GitHub Scroll Depthのデモ Scroll Depthの使い方 Scroll Depthのデモ Scroll Depthは、Universal Analytics, Classic Google Analyticsに対応しており、Google Tag Managerもサポートしています。 対応ブラウザは、Chrome, Safari, Firefox, Opera, IE7-10で、スマフォもiOS, Mobile Opera,
[CSS]iPhoneでもoverflow-y:scrollでスクロールバーを表示する - jsdo.it - Share JavaScript, HTML5 and CSS
::-webkit-scrollbar使っただけです。 一応、1世代のiPod TouchのSafariでも表示できた。 でもスクロールはやっぱり2本指なのね；orz [追記:1] iOS5からの新機能で、-webkit-overflow-scrolling: touch;と追加すると、1本指でスクロールできるようです。 俺、iPhone持ってないので確認できない（ToT） <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>[CSS]iPhoneでもoverflow-y:scrollでバーを表示する</title> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" /> <meta http-equiv
![[CSS]iPhoneでもoverflow-y:scrollでスクロールバーを表示する - jsdo.it - Share JavaScript, HTML5 and CSS](https://cdn-ak-scissors.b.st-hatena.com/image/square/dff7bc3561bfd0c4843153e90eb24dc4fc1a2b13/height=288;version=1;width=512/http%3A%2F%2Fjsdo-static-contents.s3.amazonaws.com%2Fimages%2Fcapture%2Fc%2F2%2Fj%2Fc2jr.jpg%3Ft%3D1318477517)
[JS]最近のウェブサイトで見かける面白い仕掛けを実装するスクリプトのまとめ
fullPage.js ポートフォリオや企業のプロモーションでもよく見かける1ページで構成されたサイトで、フルスクリーンの垂直スクロール、そして水平のスライドにも対応したウェブサイトを作るためのスクリプト。 こういう作りは特にタブレットで操作がしやすいですね。 FancyScroll.js スマフォやタブレットのようにページの終わりまでスクロールした際にバウンドするのをはじめ、ちょっと面白いさまざまなエフェクトをスクロールに与えるスクリプト。
スクロールに自信のある挑戦求む！世界で一番早いスクローラーを決める -THE 100 METER SCROLL
スクロールに自信のある挑戦求む！世界で一番早いスクローラーを決める -THE 100 METER SCROLL
リスティング広告代行サービス LIGLIS～リグリス～
自社運用していることで余計なコストが発生していませんか？ リスティングで効果をあげるためには、キーワードの単価設定や追加、広告文の変更など日々の細かい調整が必要です。 これらの作業を自社で行う事で、かなりの時間と人件費が発生していませんか？ 我々LIGはリスティング広告の運用スペシャリストです。 これらの作業を我々に任せることで、是非本業に注力してください。 今のリスティング代行会社で、期待以上の成果がでていますか？ 我々LIGは、WEB制作会社としての独自の目線と様々な運用実績をもとに品質スコア及び品質インデックスの最適化を運用の早い段階で行い、費用対効果の高いCPAを実現できます。 初めてのリスティング、不安はありませんか？ リスティング広告を初めて行う場合、代行会社に御社の大切なお金を預けて運用を任せる事になりますが、弊社では預からせていただいた金額で最大限の効果を発揮できるよう、日
[JS]複数の指定した範囲ごとにスクロールに追従するパネルを設置するスクリプト -jQuery Stick ‘em
ページ内の複数の指定した範囲ごとに、スクロールに追従するパネルを設置するjQueryのプラグインを紹介します。 World Wildlife | Fund Work | Viget 左に長い画像、右にそれを説明するテキストがあります。通常、画像の下までスクロールしてしまうと、テキストを読むために上にスクロールをすることになります。 しかし、このサイトでは画像の下までスクロールした際、テキストがスクロールに追従して移動します。 スクロールに追従するコンテンツは複数設置する可能性があるので、当然このスクリプトもそのようになっています。 jQuery Stick ‘emのデモ デモでは、左に長いコンテンツがあり、右のグレーのパネルが指定した範囲内のみスクロールに追従します。 追従の様子 jQuery Stick ‘emの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトを
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://scrollingmarathon.ca/
IT Company London, UK - Managed IT Solutions - Akita
http://www.fontwalk.de/