slick - the last carousel you'll ever need
Features Fully responsive. Scales with its container. Separate settings per breakpoint Uses CSS3 when available. Fully functional when not. Swipe enabled. Or disabled, if you prefer. Desktop mouse dragging Infinite looping. Fully accessible with arrow key navigation Add, remove, filter & unfilter slides Autoplay, dots, arrows, callbacks, etc... Single Item
たった10秒でローディング画面を実装出来るjQueryプラグインPACE.js！ | SEO対策なら株式会社ペコプラ
WEBサイトの読み込み時間に表示されるローディング画面。 ユーザーにストレスを与えず待ってもらう為にも気持ちの良いローディング画面を作りたいものです。 今回は本当にコピペするのみ！たった10秒で実装出来てしまうJqueryプラグインのPACE.jsの使い方と、 ローディングアニメーションを作成するのに便利なライブラリをいくつかまとめたのでご紹介します！ jsとcssを読み込むだけ！PACE.jsの使い方 早速ですがPACE.jsの使い方です。 1.CDNでpace.jsと使いたいテーマのcssをheadに記述CDNはこちら <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%
背景画像をスライドショーやフェードで切り替える【jQuery.BgSwitcher】
先日、とある案件で、背景画像をスライドさせて切り替える必要が発生しました。そこでそれを可能にするjQueryプラグインを探していたところ、大変使い勝手の良いjQueryプラグインを発見したのでご紹介させていただきます。 「jQuery.BgSwitcher」は背景画像を簡単に切り替えられるjQueryプラグインです。使い方も設定方法も簡単で、動作も軽いのでお勧めです。 背景画像を全画面表示で切り替えるDEMOを用意したので、動作をご確認ください。 DEMO（当サイトのTOP） DEMO（デフォルト） DEMO（カスタマイズ） ダウンロード jQuery.BgSwitcherのサイトからjquery.bgswitcher.jsをダウンロードすることができます。 使い方（デフォルト設定）
jQueryでURLとパラメータを取得する方法：location
jQueryで現在表示中のページのURLとそのパラメータを取得する方法を説明します。 if文を使うことで、URLやそのパラメータによって表示を切り替えることができるので頻繁に見る処理です。 locationを使用した方法 jQueryでも、JavaScriptでデフォルトで用意されているLocationオブジェクトを利用できます。 Locationオブジェクトでは、「location.プロパティ」のようにプロパティ（パラメータなど）を指定することで、簡単にURLとその情報を取得できます。 JavaScriptにおけるlocationのサンプル たとえば以下のURLが表示中だとします。 「http://www.example.com:8080/page.html?page=2#pagetop」 URLやドメイン、パラメータを取得する例は以下のようになります。 URLを取得する URLの全体を
The Final Countdown - jQuery.countdown
All countdown styles in one Take control of your DOM, register yours callbacks and start counting! The Final Countdown is a plugin tailored to be used in any layout, without any CSS/HTML dependency. The goal was to fit and mimic differents countdown styles as you see out there in coupons and auction sites. There are few ways to get started, the simplest example is as shown here, but we support man
jQuery Text Rotator
Domena ht2.pl została zarejestrowana w serwisie AfterMarket.pl. Zainteresowany tą domeną? Jeśli chcesz skontaktować się z abonentem domeny ht2.pl, naciśnij poniższy przycisk aby wysłać wiadomość: Kontakt z abonentem domeny » Czym jest AfterMarket.pl? To: Jeden z największych rejestratorów domen w Polsce. Dla naszych 100000 klientów utrzymujemy ponad 300000 domen. — Zarejestruj swoją domenę » Najni
コピペで動く。bootstrap-daterangepickerの導入と日本語化 - Qiita
※ 2016/3/10に更新しました。 日付を範囲で選択する場合に便利なbootstrap向け、日付のピッカーです。ライセンスはMITです。 使い方とオプションの説明はこちらをご確認下さい。 この導入と日本語化を行ったのでそのメモ書きです。 jqueryとbootstrapに依存しているので、これらを先に読み込みます。bootswatchになっている箇所は環境に合わせて置き換えてください。 <!-- jquery --> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> <!-- bootstrap
【Javascript】商用利用が可能な、グラフを描画するjQueryプラグイン6選 | Wood-Roots:blog
グラフを表示させないといけないという案件が出てきたので、グラフを描画するjQueryプラグインについて調べてみました。 グラフ描画用のjQueryプラグインはたくさん見つかりましたが、グラフの描画は難易度の高い処理のためか商用利用は有償というライセンスが多いようでした。 しかし商用利用可能なオープンソースライセンス（BSD、MITライセンスなど）のプラグインでも、充分に高機能なものもありましたので、私個人がいいと思ったプラグインを6つ紹介します。 ・商用利用可能なライセンス ・1つのプラグインでいくつかの種類のグラフが表示できる という2点を満たすものを選んでいます。
HTML5で学会タイマー
※ いくつかアップデートしました (2015/10/03) ・URLに設定が反映されるようになりました． ブックマークすることで現在の設定を保存できます． （Chromeでローカルファイルからの実行の場合セキュリティ上の理由でアプリからURLを更新することができません．左上のロゴが現在の設定を含んだURLへのリンクになっていますので，こちらをご利用ください．） ・画面サイズに適応した表示の調整を強力にしました． ※ いくつかアップデートしました (2015/09/01) ・ 時間表示下部のコメントを編集可能にしました． ・ iOS対応しました． ・ ダウンロード先などをGitHubに統一しました． 第40回制御理論シンポジウム で初めて学会の司会をする機会がありました． この学会では司会者がタイムキーパーを兼ねるのですが， 緊張でベルを忘れる気がしたのでタイムキーパー業務を自動化することに
より分かりやすいバルーン実装ができる「jquery.mb.balloon」:phpspot開発日誌
jquery.mb.balloon より分かりやすいバルーン実装ができる「jquery.mb.balloon」 要素の他の部分をグレーにオーバーレイ表示しつつツールチップを出すみたいな事ができます。 要素を強調しつつツールチップをだすことでよりヒントとして分かりやすい物を表示できます 関連エントリ 軽量・レスポンシブなツールチップ実装「tipso」 数値設定用のオシャレなデザインのスライダー「addSlider」
これからは今まで以上に、jQueryが必要なくなるかもしれない
3, 4年前あたりから、jQuery無しでこう記述するとか、jQueryの一部の機能を代替する軽量スクリプトなどが出始めました。 2017年も半年が過ぎ、その状況はさらに変わり始めています。 (Now More Than Ever) You Might Not Need jQuery 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 現在のブラウザ事情 jQueryに替わる、JavaScriptの選択肢 マイクロライブラリの台頭 IE9への対応はポリフィルで NodeListの反復 jQueryは遅いのか？ jQueryについて私が嫌いなもの $なしでは生きていけない？ 現在のブラウザ事情 jQueryが2006年にリリースされてから、DOMとブラウザのAPIは飛躍的に向上しています。2013年に「You Might Not Ne
paroller.js
paroller.js paroller.js is a lightweight jQuery plugin that enables parallax scrolling effect on selected elements. You can use it on elements with background property or on any other element. While scrolling elements can move: vertical, horizontal. Manipulated through html data-* attributes or jQuery options. Mobile ready. Easy to use. GitHub Download | Previous versions Before closing </body> el
2016年総まとめ、JavaScriptのライブラリやjQueryのプラグイン100+α選
毎年恒例のJavaScriptのライブラリやjQueryのプラグインの総まとめを紹介します。 今年リリースされたものから、アップデートされたものまで、これからのWebページやスマホページの制作に役立つJavaScriptを100+αまとめました。 KUTE.js クロスブラウザ対応のさまざまなアニメーション、2Dと3Dの変形、SVGの変形、CSSのプロパティ値の変化、SVGのモーフィング、SVGの描画などネイティブのJavaScriptでアニメーションを実現する軽量スクリプト。 デモページ Choreographer-js 「choreographer」は振り付けという意味、CSSアニメーションのさまざまな動き・振る舞いを簡単に設定できます。 デモページ Barba.js 通常のリンクのアクションによるハードリフレッシュをなくし、HTTPリクエストと描画を最小限に抑え、更にエフェクトを加え
Auto-Hiding Navigation in CSS and jQuery | CodyHouse
Auto-Hiding Navigation A simple navigation that auto-hides when the user scrolls down, and becomes visible when the user scrolls up. Auto-hiding navigations have been around for quite some time now, in particular on mobile devices. The idea behind this UX pattern is simple yet efficient: we want the navigation to be easy to reach all the time, so we stick it on top. However, we auto-hide it when t
軽量、レスポンシブでエレガントなモーダルウィンドウを実装出来るjQueryプラグイン・「iziModal」
iziModalはRWD対応で軽量、エレガントなモーダルウィンドウの為のjQueryプラグインです。任意のコンテンツは勿論、iframeや通知などにも対応可能で、タイトルや空＾設定など、細かい設定項目が用意されています。ファイルサイズは圧縮版で10kbほど。サイズ自体は軽くは無いかもしれませんが、この機能にしては軽量、という事でしょうか。完成された形なので使い所は限られますが、手軽に導入出来る点は魅力ですね。ライセンスはApache2.0とのこと。 iziModal
jQueryの.hover()メソッドを.on()で使うためには？
jQueryを使って、ちょっとしたhoverの機能を使いたいときは、.hover()メソッドを使っているのですが、これを.on()（.bind()）で使うのはどうやるんだろう？とかわかるようでわからなかったので、ちょっと調べてみた。 .hover()を利用してみる とりあえず、.hover()の使い方からおさらいしてみたいと思います。 .hover()メソッドは、マウスを乗せた時とはずした時の２つの処理を入れておくことで、実現できます。 $('#demo1 p').hover(function(){ $(this).fadeTo('fast',.3); },function(){ $(this).fadeTo('fast',1); }); マウスを乗せると、少し透明になり、はずすともとに戻るという機能です。 以前は乗せた時とはずした時の２つの処理を入れておかなければエラーだったのですが、現
アニメーションに便利なJavaScriptライブラリTweenMaxを使ってみる（その1） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、CTOのづやです。 今日はアニメーションさせるときに便利なTweenMaxの使い方について書きたいと思います。 こちらのスピードテストのページを見るとわかるように、かなりハイパフォーマンスなアニメーションが可能です。 というわけで、基本的な使い方を書いていきたいと思います。 とりあえず要素を動かしてみよう まずは公式ページからダウンロードしましょう。 慣れないうちはTweenMax.jsを、とりあえず以下のように読み込んでおきましょう。 <script src="js/TweenMax.min.js"></script> 基本的によく使うクラスとして、以下の4つがあります。 TweenLite TweenMax TimelineLite TimelineMax Tween系とTImelite系の2種類がありまして、それぞれMaxが高機能版だと考えてよいかと思います。 単純に要素
16行 で pushState popState - Qiita
2013/12/27 追記：初回アクセス時に popState イベントが発生しリロードしてしまう問題への対策を記載しました。（この追記により、タイトルが 15行 → 16行 に変更になりました^^） pushState popState とは Ajax を使ったスムーズな画面遷移でも、URL を書き換え履歴に追加し、ブラウザバックに対応することができる仕組みです。SEO への影響を出すこと無く操作性を向上させることができます。 現在、pushState/popState を使ったクライアントサイドルーティングを実現するライブラリがいくつか作られていますが、今回は jQuery だけで行うシンプルな方法を紹介します。 参考: Googleに続いてBingもAjaxにはpushStateを推奨 本題 jQuery だけで、15行程度でできる pushState popState を使った A
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ECサイトなどに使える画像のカーソル部分ズームjQueryプラグイン「xZoom」:phpspot開発日誌
背景をボカしてオシャレにできるモーダル実装jQueryプラグイン「bluroverlay.js」:phpspot開発日誌