拡大縮小、フルスクリーン、スライド等フル機能のモダンなlightbox「lig... 次の記事 ≫:SVGを使ったアニメーションがクールなスライド実装サンプル
拡大縮小、フルスクリーン、スライド等フル機能のモダンなlightbox「lig... 次の記事 ≫:SVGを使ったアニメーションがクールなスライド実装サンプル
Viewerは画像の拡大や縮小、回転、上下左右の切り替えといった機能を備えたイメージギャラリーを実装できるjQueryプラグインです。画像をドラッグして位置を移動させることもできます。 Viewerのデモは以下からチェックできます。 デモ デモはレスポンシブになっているので、いろんなデバイスで見れるのがうれしいですね。 拡大や縮小などができるので画像をじっくり見たい時に便利です。オプションも、ボタン、ナビバー、タイトル、ツールバー、フルスクリーン、キーボードなどさまざまな項目が用意されています。 イメージギャラリーをカスタマイズして実装したい方にもオススメです。 というわけで、便利な機能がいろいろ付いたイメージビューアを取り入れたい時に活用されてみてはいかがでしょうか。 Viewerのダウンロードや詳しい使い方は以下からどうぞ。 Viewer
サムネイルの枚数が多くなっても、少なくなっても対応できます。Youtubeなども入れることができます。 slickのサイトよりプラグイン一式をダウンロードし、JSとCSSを読み込みます。 main.jsで動きを設定。style.cssでスタイルを調整しています。 不具合修正しました。左右の矢印、現在地表示追加。【更新:2016/04/15】 8枚に満たないい場合のスワイプに対応しました。【更新:2017/11/29】 デモページへopen_in_new JSとCSSを読み込みます <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <link rel="stylesheet" href="slick/slick.css"
jQuery Mask Plugin - A jQuery Plugin to make masks on form fields and html elements. マスクを設定して入力に制限をかけられる「jQuery Mask Plugin」 日付、電話番号等の細かなマスクを設定してValidation以前に入力を制限することが可能です。 <input type="text" name="field-name" data-mask="00/00/0000" data-mask-selectonfocus="true" /> のようにしてマスク指定が可能で、非常に簡単に扱える他、JSコードでの非常に細かなフィルタにも対応 関連エントリ クールでモダンなコンタクトフォームのデモ&サンプルスクリプト フォーム要素をフラットかつ全デバイスで統一させるjQueryプラグイン「Formplate
閲覧ページの先頭まで移動できるように設置しているところも多い「ページトップ」や「ページの先頭へ」といったページ内リンクで、移動する際の動きにjQueryを使ってエフェクトをつけたサンプルです。 よく見かける単純なスムーススクロールを含めた全5種類で、少しいじればその他の場所へのページ内リンクの動きとしても実装できます。 紹介している方法はいずれもjQueryを使用しており、サンプルによってはjQuery Easingも使用しているので予め読み込ませてください。 jQueryの記述はいずれもセレクタにa要素を指定しているため、特定の要素にのみ適用させたい場合などはidやclassを用いるなどして指定してください。 使用するHTML・デモ サンプルで使用しているHTMLは下記のようなa要素のhrefには#を記述したシンプルなものになっています。
公開日:2015.11.20 更新日:2020.05.20 jQuery, ナビゲーション 左右から開くスライドパネル、スライドメニューにアンカーリンクを使用するパターンを作成してみました。 スライドメニューのjQueryプラグインに関してはいくつかご紹介してきましたが、Andoroidの旧バージョンでも安定して動くとなると、やはりjQuery Mobileが安定してそうです。 デモページ 使い方 必要なファイルを読み込む。 jQueryライブラリとjQuery Mobileライブラリ、CSSを読み込みます。 下記はCDNを使用していますが、自分のサーバーにアップしたものを使いたい場合は、jQuery Mobileのサイトよりダウンロードして下さい。 <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jque
こんにちは、づやです。 前回ScrollMagic2系について下記の記事を書きましたが、基本的な使い方しか書けなかったので、今回はよく使う機能について書きたいと思います。 個人的にTweenMaxをよく使うので、animation.gsap.jsを読み込んでる状態での記事となります。 setClassToggle スクロールの位置によってクラスを付けかえたいときは非常によくあるかと思います。そんなときは、スクロールに応じてクラスを付けたり外したりしてくれるsetClassToggleの出番。 <ul> <li id="list1"><a href="#block1">1番目</a></li> <li id="list2"><a href="#block2">2番目</a></li> <li id="list3"><a href="#block3">3番目</a></li> </ul> <s
JavaScriptプログラミングのTOPへ さいきん5〜6年で人気のある jQueryプラグインを, 年ごとに全て把握するためのまとめ。 毎年,「今年のお勧めプラグイン」が ランキング記事として幾つか発表される。 それらの記事へのリンク集。 目を通しておくだけで,最新のjQuery事情が把握できるし, Webデザインの引き出しを増やせる。 2015年 2014年 2013年 2012年 2011年 2010年 ※↑ もくじジェネレータ で自動生成 2015年 [jQuery]WEB制作でよく使うjQueryプラグイン [2015年版] | EMiAC-Works http://emiac-works.com/coding/jquery/... 2015/04/16 WEB制作でよく使うjQueryプラグインをご紹介。色々使ってきた中で今のものに落ちついてきた。定番と呼ばれるものが多い ス
色々なWEBサイトを見ていてページをスクロールしていくと、ブラウザの画面上に表示されたタイミングで画像や要素が出現したりなど、様々なイベントを発生しているサイトを見ることがあります。 今回はある特定の要素が画面に現れたタイミングで処理を行うことができるjQueryのプラグイン「jquery.inview」をご紹介します。「jquery.inview」を使用すると要素が見えたタイミングでイベントを発生することができるので動きのあるページを作成することが可能になります。 ランディングページなどで注目させたい箇所やアピールしたい箇所に動きをつけて、閲覧者に興味を惹かせることができるかもしれませんね。 「jquery.inview」で画面に表示された時に処理を実行 今回は、指定した要素が画面に表示されたタイミングでフェードインして要素を出現させる方法を記述します。 下記のページから「jquery.
kapantzak/barIndicator GitHub デモ アニメーションするプログレスバーを実装できるjQueryプラグイン「barIndicator」。 次のようにデザインがシンプルで使いやすそうなのが特徴です 関連エントリ カラフルで新しいスクロールバーを実装できる「ScrollMenu.js」 流行りのYoutube風ローディングバー実装jQueryプラグイン スクロールを上に移動でバー表示ができるjQueryプラグイン「scroll-up-bar」 フラットデザインでレスポンシブなプログレスバー作成「ProgressBar.js」
フォトギャラリーなどでページをスクロールして、次の写真を見る際などに、クリックで続きを見るなどもあるが、ここでは特定の枚数を読み込んでスクロールした際に次の読み込みたい内容を自動的に読み込む形を作成してみます。 こうすることによってクリックすることなくサイト全体の写真を見ることなども可能となります。 ウェブページを下にスクロールし続けていくと、ページを遷移せずに次に来るべきコンテンツを自動で読み込んで同じページに表示し続け、あたかも無限にスクロールし続けるような仕組みは一般的に「無限スクロール」と呼ばれ、Twitterをはじめ、SNSのFacebookやGoogle+、画像共有サービスのPinterestなど大手ウェブサービスで導入されている。 今回はこの「無限スクロール」の仕組みを、その手軽さから多くのサイトで導入されているInfinite Scrollプラグインで実装してみよう。 今回
jQueryやCSSで、サイトの雰囲気をすこし賑やかな感じにしたいなあ。アニメーション効果を探していたところ、「こ、これは?」なCSSライブラリを見つけました。 使い方は非常に簡単。対象はなんでもOK。こんなふうに、CSSでClassにひとことふたこと付け加えるだけで、ブルブル震えてくれます。 <div class="shake shake-constant"></div> 動きはまるで「ふなっしー」 スマホの人は、スクロール中は動かないので、少しずつスクロールを止めて見てください。 なぜ、フナ? アニメーションの動きがまるで「ふなっしー」なので。本当はふなっしーのイラストや写真を例に紹介したかったのですが、版権的にヤバいかなーと思って。 動きかたには、いくつか種類があります。上のは「垂直」。CSSで指定すれば、「マウスを重ねるとストップする」、あるいはその逆、「マウスオンでブルブル震えだ
今回は、jQueryプラグイン【liScroll】を利用して、文字などをニュースティッカーを実装してみたいと思います。 ニュース系のサイトや電光掲示板なんかでもティッカーはよく見る表示方法で、少ない領域でより多くの情報をユーザーに伝えることが出来ます。 また、右から左への文字が動きますので、ユーザーの目に止まりやすいです。 ティッカーとは、 ティッカーとは、特定範囲内に文字列を流して表示させる表示方式のことである。右から左(あるいは上から下へ)文字が次々に流れてゆくのを読ませる方式であるので、限られた狭い領域で多くの情報を表示することができる。 ティッカーの代表的な例としては、新幹線の車内や看板、証券取引所などにある電光掲示板がある。Webページにおいても、左右に文字の流れるティッカー表示が用いられる場合が珍しくない。 こちらのjQueryプラグイン【liScroll】を利用して、Word
Page Scroll Effects | CodyHouse 流行りのページスクロールによるアニメーション効果が多数収録されたサンプル集がダウンロード可能です。 パララックス効果や3D効果など、クオリティの高いものばかりでかなり使えそう。最近流行りのページ作成に役立てられそうです 一昔前にここまでスクロール型ページが流行るとは思いませんでしたが、正直どうなるか分からないものですね 関連エントリ ページスクロールに応じて要素を様々にCSSアニメーションしつつ表示できる「Story Box」 スマホの傾きでページスクロール出来るようにする「Interdimensional」 スクロールを上に移動でバー表示ができるjQueryプラグイン「scroll-up-bar」 固定要素をスクロール位置によって切り替えられる「Midnight.js」
追記 : 大変申し訳ございませんが、デモサイト等の当サイトのGoogleアナリティクスコードのコピーは避けて下さい。 デモサイトのページを丸ごとコピペすると当サイトのアナリティクスコードまで貼り付けられますので、貼り付けた場合は、削除の方をよろしくお願い致します。 今回は、イベントの告知やタイムセールの告知に使えるjavasriptで作るカウントダウンタイマーの紹介です。 よくネットショップなんかで見るとは思いますが、 【ポイント10倍終了まで : 1時間15分15秒00】 デモページもご用意しましたのでご参考下さい。 デモページ みたいなのです。 最近では、楽天スーパーSALE!!があっているのでカウントダウンタイマーを使われている店舗さんも多いんじゃないんでしょうか? ネットショップなんかでは販売促進なんかによく利用されているのですが、なかなか時間も無いし・導入方法がわからない。 って
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く