Waypoints
Waypoints is the easiest way to trigger a function when you scroll to an element. var waypoint = new Waypoint({ element: document.getElementById('waypoint'), handler: function(direction) { console.log('Scrolled to waypoint!') } }) Builds are available for multiple DOM libraries. jQuery 1.8+ Zepto 1.1+ No Framework IE 9+ npm install waypoints or bower install waypoints or GitHub Download Get Help
Web制作に使える！オシャレなサイトに見せるためのCSSやjQueryプラグインまとめ
作成：2015/03/2 更新：2016/06/29 Web制作 > 今風のサイトの動きやエフェクトを実現するために知っておくと助かるjQueryプラグインをまとめました。トレンドをおさえた最近のものや定番化しているものまで。ちょっとした動きを取り入れてオシャレなサイトを構築したい時に。 エンジニア速報は Twitter の@commteで配信しています。 もくじ インタラクティブ １．クリック時のエフェクト ２．フォームクリック時のエフェクト ３．テキストに１１種の動きを出すエフェクト ４．分離するエフェクト フルスクリーンの見栄えをよくする ５．フルスクリーン 縦スライド３つ ６．全画面+オーバーレイ ７．フルスクリーン背景＋ローディング ８．写真から背景色を抽出 ９．background-size 対策 ドロワーメニュー １０．ドロワーメニュー３つ スクロールエフェクト １１．スクロ
エフェクトが選べるレスポンシブメニュー「Off-Canvas Menu Effects」
2015年12月15日 9種のエフェクトから選べる！レスポンシブメニュー「Off-Canvas Menu Effects」 ページの隅にあるボタンをタップorクリックすると、ナビゲーションがスライドしながら出てくるoff-canvasメニュー。Facebookでもおなじみのメニューですね。レスポンシブ対応で、画面の小さなスマホでもコンテンツを邪魔せず、必要な時にシュッと表示させることができるのでとても便利です。 今回はこのoff-canvasメニューに様々なエフェクトを付けることができるプラグインをご紹介します。 プラグインはこちら。 Off-Canvas Menu Effects デモには、9つのエフェクトが用意されています。 TOP SIDE コンテンツが右下にスライドし、画面左上にメニューが表示されます。 SIDE SLIDE メニューが左からスライドしてオーバーレイ表示。リンクテキ
【PACE】色々なローディングアニメーションのプログレスバーを簡単に実装できるjQueryプラグイン｜ホームページ制作・アプリ開発のハウツーをより実践的に。- ウェブ式 –
ウェブサイト制作でプログレスバーを実装する機会は少なからずあると思います。 そんな時にサクッと実装できて役に立つjQueryプラグインが「PACE」です。 使い方はとても簡単で、 まずpace.jsはPACEのページの「Download」の下のPACE.JSと記載されているボタンを 右クリックで必要なJSを「リンク先を別名で保存する」等でDLしてください。 ※赤枠部分からダウンロード ダウンロードしたら、 jQuery本体とダウンロードしたpace.jsを一緒に読み込みます。 HTML： あとはPACEのページ下部の14種類の中から使用したい ローディングアニメーションのプログレスバーの「DOWNLOAD」を 右クリックで必要なCSSを「リンク先を別名で保存する」等でDLしてください。 ※赤枠部分からダウンロード 例えばMinimalの場合、 CSS： .pace { -webkit-po
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
bxsliderというjQueryについて質問です。スライドショーとして、bxsliderを導入しました。①一枚ごとのスライドの時... - Yahoo!知恵袋
bxsliderというjQueryについて質問です。 スライドショーとして、bxsliderを導入しました。 ①一枚ごとのスライドの時間を4秒に設定。 bxsliderというjQueryについて質問です。 スライドショーとして、bxsliderを導入しました。 ①一枚ごとのスライドの時間を4秒に設定。 ②２秒画像を見てからページャーで他の画像に切り替え。 ③秒数はリセットされず、本来4秒待ってから次の画像に切り替わるところが、残りの2秒で画像が変わる。 ここで、ページャーで画像を切り替えた時に次の画像に切り替わるまでの秒数をリセットしたいのですが、どうすればいいでしょうか？ 本来はそうなっているべきだとおもうのですが。 よろしくお願いいたします。 ちなみに設定のコードは以下になります。 jQuery(document).ready(function(){ jQuery('.bxslider
[mixi]【JQuery】 bxスライダー(ver.4）用 まき戻 - MT備忘録 | mixiコミュニティ
MTとは全く関係ないんですが、MTの仕事で 1. bxスライダーを使用 2. 永久ループではなく、スライダーの最後まで行ったら、1枚目までまき戻ってオートスライド 3. 次へ 前へ ページャー等を押した時にスライダーが動かなくなるバグ（？）対応 3は正直付ける必要はなかったんですが、「2.」を実装する際にこれも付けておかないと 次へ 等を押してスライダーの最後に到達した際に勝手に1番目にスライドしてしまうので（笑） それをごまかす（？）ために無理やりつけました。 で、結論はこんな感じ <script> $(document).ready(function(){ obj = $('.bxslider').bxSlider({ pager: true, auto: true, pause: 4000, infiniteLoop: false, onSliderLoad: function ()
![[mixi]【JQuery】 bxスライダー(ver.4）用 まき戻 - MT備忘録 | mixiコミュニティ](https://cdn-ak-scissors.b.st-hatena.com/image/square/1233d72b9d17ec8759e113648066528092b35403/height=288;version=1;width=512/https%3A%2F%2Fimg.mixi.net%2Fimg%2Fbasic%2Fcommon%2Fnoimage_comm180.gif)
bxsliderでレスポンシブ利用時に表示エリアが1枚になったときにガクンとずれるバグの対策 : 森のコーディング
8月31 bxsliderでレスポンシブ利用時に表示エリアが1枚になったときにガクンとずれるバグの対策 カテゴリ:javascriptiphone/ipadサイト Tweet スライダーライブラリのbxsliderをつかって複数画像のスライダーを作っていた。 こういうやつ 設定はこんな感じだ $('#bnrSlider').bxSlider({ mode: 'horizontal', pager:true, auto: true, slideWidth: 300, speed:1000, pause:5000, moveSlides:1, minSlides: 1, maxSlides: 3, slideMargin: 40}); 3枚のバナーをみせて、スライドするときは1枚ずつスライドさせるっていう設定だね。 bxsliderはレスポンシブに対応していて、画面サイズが短くなると表示枚数を
jquery.bxslider.jsを使ったサンプルいろいろ
jquery.bxslider.jsの設定方法を色々と試してみます。 基本的な使い方は、以前書いた記事「jquery.bxslider.jsの使い方やオプションなどのまとめ」をご確認ください。 特にオプション設定をしない場合 HTML <ul id="sample"> <li><img src="img/img01.jpg" /></li> <li><img src="img/img02.jpg" /></li> <li><img src="img/img03.jpg" /></li> <li><img src="img/img04.jpg" /></li> <li><img src="img/img05.jpg" /></li> </ul> JavaScript $(function() { $('#sample').bxSlider(); }); 特にオプション設定をしない場合のデモペ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
bxsliderがおかしな動きをしたからなんとかしてみた | 開発マトリョーシカ | 株式会社JBN | 長野市のWebサイト制作、ホームページ制作、インターネット戦略構築
【bxslider】ページャータップで丸が点灯しっ放し。スライドを進行時にpause時間が不安定。2つのバグを解消した。