[jQuery] スクロールして、要素が画面内に入ったか・出たかを判定する - ブログ | mgtnsn.com
タイトルの通りです:) 判定の考え方にも色々あるため（要素が1pxでも入っていればいいのか？画面の中央に来たくらいがいいのか？など）、そのあたりも網羅していきたいと思います。 色々な判定の組み合わせ一覧 画面の下部 × 要素の上部 要素が1pxでも画面に入ったら、という判定です。 var scroll; var winH = $(window).height(); var objTop = $('.obj').offset().top; $(window).on('scroll', function(){ scroll = $(window).scrollTop(); if(scroll >= objTop - winH){ //ここに処理 } }); var scroll; var winH = $(window).height(); var objH = $('.obj').outer
![[jQuery] スクロールして、要素が画面内に入ったか・出たかを判定する - ブログ | mgtnsn.com](https://cdn-ak-scissors.b.st-hatena.com/image/square/c71b0a20bb448bbfa924e83ff2eb099a62096954/height=288;version=1;width=512/https%3A%2F%2Fwww.mgtnsn.com%2F_wp%2Fwp-content%2Fuploads%2F2022%2F08%2Fjquery-scroll-event-00.png)
slick.jsにYouTube, Vimeo, video要素の動画を含めて自動再生するスライダーを生成する方法
現在、もっともポピュラーでカスタマイズ性が高く実装が簡単な、レスポンシブ対応のスライドショーjQueryモジュールである「slick.js」。 弊社にて提供中のWordPressテーマ「DigiPress」シリーズの次期テーマには、トップページのスライダーに動画を含めることが要件としてあるため、今回はそんな人気のスライドショーモジュール「slick.js」を利用して、画像だけでなくYouTube、Vimeo、さらにHTML5のvideo要素の動画もスライドとして含める方法を、次期リリース予定のテーマ向けに考えてみました。 今回のデモで動画スライドを含めたスライドショーを実装する要件は以下です。 スライドに動画を含める要件 動画は、YouTube、Vimeo、video要素のムービーを含めることができる 動画スライドが表示された際は、自動再生させる 動画スライドが非アクティブになった際は、一
Turn.js: The page flip effect in HTML5
Turn.js is a JavaScript library that will make your content look like a real book or magazine using all the advantages of HTML5. The web is getting beautiful with new user interfaces based in HTML5; turn.js is the best fit for a magazine, book or catalog based in HTML5. <div id="flipbook"> <div class="hard"> Turn.js </div> <div class="hard"></div> <div> Page 1 </div> <div> Page 2 </div> <div> Page
どこまでスクロールしたかをイベントトラッキングで計測できるjQueryプラグインを作ってみた
スクロール位置をイベントトラッキングで取得する実験をしてみたついでに、処理をプラグイン化してみました。 特定の要素を指定した数値でエリアを分割して、どこまで表示されたのかを取得できます。 「scrollTracking.js」のデモページはこちら 「scrollTracking.js」のダウンロード ※ユニバーサルアナリティクスのみの対応になります。 設定方法 jQueryとプラグインを読み込みます。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="./scrollTracking.js"></script> JavaScript $(function(){ $('#contents').scrollTracking(); }); 今回
particles.js - A lightweight JavaScript library for creating particles
particles.js is a lightweight JavaScript library for creating particles.
Owl Carousel
Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.Fully Customisable Over 60 options. Easy for novice users and even more powerful for advanced developers. Touch and Drag Support Designed specially to boost mobile browsing experience. Mouse drag works great on desktop too!
フェード表示やタイピング風など、テキスト表示に動きをつけられるjQueryプラグイン 8 - NxWorld
いずれもテキストがフェードや回転といったアニメーション付きで表示されたり、一文字ずつタイピングされているような見せ方を実装することができるjQueryプラグインです。 同じようなプラグインが並んでいる感じですが、軽量なものやオプションが豊富に揃っているもの、日本語にもしっかり対応しているかなどそれぞれ特徴もあるので、こういったものを使いたい時に少しでも選択肢が広がるよう良さそうなものを備忘録兼ねてまとめました。 Letter by Letter JS Letter by Letter JS はテキストを徐々に表示させる効果を簡単に実装でき、1KBという軽さも特徴のjQueryプラグインです。 デモ画面などでは全て英語が使われていますが、日本語でも動くのは確認できました。 オプションとして表示スピードと表示タイプを指定することができ、表示タイプでは単純に表示させる'show'とフェード表示さ
jQuery：セレクタや要素指定に関する備忘録 - NxWorld
jQueryで何かしたい時にまずセレクタで該当要素を指定すると思いますが、要素にidやclassがついていなくても特定の条件を持つ要素として指定できたり、奇数・偶数・n番目の要素を指定できたりと、セレクタには様々な指定方法があります。 ただ中には利用頻度が低くていざ使える場面がきても忘れしてしまっていたり、未だに使う度にググったりするものも幾つかあるので、セレクタに関しての復習兼ねた備忘録です。 また、併せて同じく使用する機会が多いthisに関することやセレクタで指定した要素の親要素や子要素を指定する方法も書いておこうと思います。
[jQuery]スクロール量に応じて(連動して)、アニメーションさせる方法 | UNORTHODOX WORKBOOK | Blog
アニメーションというか、jQueryでスクロールを監視して数値化し、それをリアルタイムに反映させることで滑らかに動かす方法。スクロール量に連動させているので、スクロールするたびにアニメーションのような滑らかな動きをします。 色々な使い方があると思うけど、ここではwidthの値をリアルタイムに更新し、スクロール量に応じて幅を広げたり狭めたりする方法をのせています。 デモとHTMLとCSS 言葉だけだと説明が難しいので、デモを見てもらうと何をやりたいのか分かるかと思います。とてもシンプルです。※古いIEでは見れません。 DEMO デモでは５種類ありますが、基本的にはスタート位置(CSS)が違うだけで、内容はほとんど同じ。 HTML HTMLは何でも良くて、便宜上、空divの要素を更新するような形にしています。 <div class="contents"> <div class="line"><
![[jQuery]スクロール量に応じて(連動して)、アニメーションさせる方法 | UNORTHODOX WORKBOOK | Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/dc8c95bc6d707ff555b0dcfe047f07bb04a7b352/height=288;version=1;width=512/https%3A%2F%2Ftheorthodoxworks.com%2Fwordpress%2Fwp-content%2Fuploads%2F2015%2F01%2Fcatch-study.jpg)
jQueryで簡単！フォームをリアルタイムで入力チェック [ホームページ作成] All About
フォームの入力チェックは、JavaScriptでリアルタイムにできると便利 ウェブ上のフォームに何らかの入力をするとき、一旦送信してからエラーを表示されるよりも、その場でリアルタイムに入力ミスを指摘してくれる方が便利です。その方がページを移動する手間が省けますし、戻る際に入力内容が消えてしまう心配もなくなるからです。 ■入力チェックは、複合条件だと特に手間がかかる フォームへ入力された内容のチェック機能を自力で作るのはかなり面倒です。特に「この項目のチェックがONの場合にだけ、隣のテキスト入力欄への入力が必須」といった複合条件でチェックするのは大変でしょう。HTML5には個別に入力チェックする機能がありますが、複数項目を組み合わせたチェックをしたければ、JavaScriptなどを併用するしかありません。 ■見やすくて分かりやすい形でエラーを表示したい ユーザの入力や選択にミスがあればエラー
![jQueryで簡単！フォームをリアルタイムで入力チェック [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/53261f4457e0fb42c78173601df18b35aa3e7ed4/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F4%2F2%2F0%2F3%2F2%2F7%2Ftopimg_large.png)
Best JQuery Retina Display Plugins » CSS Author
Best jQuery Retina Display Plugins High-resolution displays are common these days. Most of the manufacturers are completely switched to HD Displays. The term Retina Display introduced by Apple, all apple products are running high-resolution retina displays. High-resolution displays are a headache when it comes to website development. We were using optimised images in websites for better loading ti
A more robust equal heights library
matchHeight makes the height of all selected elements exactly equal (2014) Modern browsers This library was developed before related functionality became available in the browser. Therefore it's now strongly recommended to use more modern CSS techniques in place of this library. For some alternatives see CSS Flexbox and CSS Grid. Features match the heights for groups of elements automatically use
One grid to rule them all | basicGrid
A mobile-first, Foundation-like grid system based on the CSS3 flex display property. Customizable with up to twelve columns, written in SASS and perfect for all sorts of layouts. Mobile First Even when you don't like the mobile-first approach, it's the best approach for a grid system. Smaller breakpoints automatically apply on all larger sizes, making it super easy to build responsive sites. CSS F
ResponsiveSlides.js · Responsive jQuery Slider & Slideshow
ResponsiveSlides.js v1.55 Simple & lightweight responsive slider plugin (in 1kb) ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slider using elements inside a container. It has been used on sites like Microsoft's Build 2012 and Gridset App. ResponsiveSLides.js works with wide range of browsers including all IE versions from IE6 and up. It also adds css max-width support for
今っぽくなった！トレンドをおさえたjQuery プラグインまとめ
作成：2015/04/6 更新：2016/06/29 Web制作 > トレンドとなりつつある視覚効果や、細部にちょっとした動きを取り入れたいときに使えるjQuery プラグインをまとめました。ユーザーが使いやすくなるよう、ページにひと工夫したいときに。少し前のプラグインもありますが、今から使えそうなものもピックアップ。 エンジニア速報は Twitter の@commteで配信しています。 もくじ マイクロインタラクション １．粘性 ２．移動するプレースホルダー ３．滑らかにページ移動させる ４．パスワード強度を可視化 ５．オートコンプリート ６．テキスト入力 ７．Google Map（吹き出し・マーカー） ８．オートページャー ９．プログレス12パターン １０．ノーティフィケーション レタリング １１．１文字ごとに指定 フルスクリーン １２．モーダルウィンドウ（全画面） １３．フォーム（全
イベントメソッドで提供されないイベントを処理するには？（on）
← 前回 連載 INDEX 次回 → 別稿の表「jQuery標準で利用可能なイベント」を見ても分かるように、jQueryはよく利用するJavaScriptのイベントに広く対応しています。が、もちろん全てのイベントに対応しているわけではありません。jQueryが標準で対応していない（＝イベントメソッドとして提供されない）イベントにアクセスするには、onメソッドを利用しなければなりません。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ALL | Navnav
skrollr - parallax scrolling for the masses
http://www.webtoolnavi.com/jquery-matchheight/
jQuery 便利なonを使おう（on click) - Qiita
