【JavaScript】ページのスクロールに合わせて要素を動かす［ScrollReveal］の使い方
ページをスクロールさせて、非表示だった特定の要素がウィンドウ内に入ってきたときに、指定したアニメーションエフェクト付きで表示させるスクリプト［ScrollReveal］を紹介します。 以下の公式配布サイトのデモを見れば何が起きているのか一目瞭然ですね。 ScrollReveal : http://scrollrevealjs.org 要素がviewportに現れたタイミングで様々な表示処理を施すことができます。 なお各エフェクトや表示のタイミングはオプション設定で詳細に指定可能です。 ［ScrollReveal］の導入方法はカンタンです。 まずはGitHubから必要なファイルをダウンロードしてきます。 https://github.com/jlmakes/scrollreveal.js 「Download ZIP」というボタンをクリックすればスグにダウンロードがはじまります。 入手したzi
【JavaScript】超軽量Lightbox風スクリプト［Luminous］の使い方
つい最近見つけたLightbox風スクリプト［Luminous］がイイ感じです。 百聞は一見に如かず。 まずはサンプルをご覧ください。 サンプル : https://on-ze.com/demo/js-luminous/ お試しいただいたとおり、任意の画像をクリックすると素早くスムーズに拡大表示されます。 読み込みにも殆ど時間がかからず、軽快にカッコ良く動作しますね。 ぜんぜん関係ありませんが「ルミナス」という名前も素敵です。 嬉しいことに jQuery 不要で実装可能。初心者の方でも比較的簡単に導入できるでしょう。 詳しい使い方は以下より。 ［Luminous］のダウンロードとインストール 最初に公式サイトからスクリプト本体ファイルをダウンロードしてきましょう。 Github : https://github.com/imgix/luminous 上記サイトより、右上にある「Downlo
Like/Dislikeの機能をサクッと実装できるjQueryプラグイン「like-dislike」:phpspot開発日誌
GitHub - uagrace/like-dislike: JQuery rating plugin Like/Dislikeの機能をサクッと実装できるjQueryプラグイン「like-dislike」 Youtube等である機能を簡単に実装できます。設定はローカルストレージに保存しつつ、サーバ側にもデータを送るというタイプのようですのでサーバ側の実装が別途必要になります。 関連エントリ 自動でCSS背景画像をスクロールさせるjQueryプラグイン「jQuery.BackgroundScroll.js」 textareaに行番号を付けられるjQueryプラグイン モダンな年・月ピッカーjQueryプラグインを実装するチュートリアル
綺麗な動きになった！Web制作前に見ておきたいjQueryプラグインまとめ
作成：2014/12/8 Web制作 > 比較的最近のjQueryプラグインやプロフェッショナルな方々が作成されたスクリプトの中から、サイト制作時に取り入れてみたいエフェクトを厳選してご紹介。今風の見え方を実現できそうなものをチョイスしました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ ファーストビュー １．スライドを立体的に切り替え ２．クリックで滑らかにページ遷移させる ３．背景にスライド、フルスクリーンで固定させる ４．横に移動するフルスクリーンスライド ５．キューブ系のスライドを表示 ６．下方向へドラッグするとページを再読み込みする ７．要素を上下にフワフワ動かす ８．外部要素をクリックで表示 ９．タイピングエフェクト 動作 １０．サーチボックスを画面全体にオーバーレイさせる １１．デイトピッカー １２．ドラッグ＆ドロップ 画像をアップロードする
ScrollMagicを使ってスクロールに応じたアニメーションをさせてみよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、CTOのづやです。 サイトを作っていると「スクロールに応じて何かをさせたい」なんてことをよく思ったりするのではないでしょうか。 0から書いてもいいのですが、簡単にできたら、というときのためのプラグイン「ScrollMagic」を試してみました。 こんな例のような動きがつけられちゃうらしいので、早速紹介していきます。 使うための準備 まずはこちらのGitHubから。 ScrollMagicはjQuery PluginなのでjQueryが必須なのはもちろん、TweenMaxといったライブラリも必要になります。 読み込むときには当然それらも必要になりますので、↓のような感じで準備しましょう。 <script src="js/TweenMax.min.js"></script> <script src="js/jquery.min.js"></script> <script src="
スクロールしてもテーブルヘッダを固定表示できる「fixed-table-header」:phpspot開発日誌
hungnq1989/fixed-table-header GitHub スクロールしてもテーブルヘッダを固定表示できる「fixed-table-header」 通常はスクロールすると消えてしまって、何のカラムだっけ？と上にスクロールするという無駄な動きを生んでしまいますが、こちらのプラグインを使ってテーブルヘッダを初期化することでテーブルを使いやすくできます 関連エントリ インライン編集できるテーブル実装用jQueryプラグイン「editable-table」 ナイスなレスポンシブなテーブル実装jQueryプラグイン「Responsive tables」 HTMLテーブルを JSON、XML、PNG、CSV、PDFなどあらゆる形式に変換できる「HTML table Export」 HTML5＋JSONでインタラクティブなテーブルを作れる「Dynatable.js」
サイト上の重要ポイント等にマークをつける「Points of interest」:phpspot開発日誌
CSS and jQuery Points of interest | CodyHouse サイト上の重要ポイント等にマークをつける「Points of interest」 次のように、サイト上の特定位置にポイントをつけ、クリックでヒント表示できます。 サイトの簡易チュートリアル的に使うとよいかも。 関連エントリ サイトの使い方をその場で表示できるjQueryプラグイン「TourBus」 サイトの使い方をその場でステップに分けてオーバーレイできるJSライブラリ「Intro.js」
Data Img - Two Blokes
Data Image Delivery Tiny jQuery plugin to deal with responsive image delivery. Think responsive.io minus the cdn. Download (0.4kb) Image Credit - Unsplash Usage <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="data-img.min.js"></script> <img class="data-img" src="http://placehold.it/1x1" data-sml="img/400x320.jpg" data-med="img/800x640.jpg" data-lrg=
Image Lightbox - レスポンシブ/タッチ操作対応のLightbox系画像ビューワー MOONGIFT
画像をクリックして拡大表示するライブラリとして有名なのはLightboxやColorboxです。どちらも便利なライブラリですが、主にデスクトップ向けというのが難点です。最近ではスマートフォンからのアクセスも多いので、レスポンシブな画像表示ライブラリが求められます。 今回紹介するImage Lightboxはまさにそのためのソフトウェアです。レスポンシブかつタッチ操作に対応した画像表示ライブラリとなっています。 表示例。画面中央に大きく表示されます。 基本的に画像以外の部分をクリックすると消えます。 背景を白くした場合。左右をクリックで別な画像に切り替わります。 ×ボタン付き。 キャプション付き。画面下に灰色の帯で表示されます。 ページネーション。ツアー表示などに使えそうですね。 これらの機能は組み合わせて利用できます。 続いてスマートフォンの場合。 浮かび上がり方が良いですね。 ×ボタン付
jQuery Panorama Viewer - jQuery製のパノラマ写真ビューワー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました せっかく撮った写真、Webブラウザで楽しみましょう！ iPhoneではパノラマ写真が撮影できるようになって、広範囲を映し出した写真が手軽に撮れるようになりました。しかしパノラマ写真は画像としてみれば単に横幅が広い写真でしかありません。むしろ写真としては見づらいでしょう。 そこで必要になるのは専用のビューワーです。今回はjQueryで作られた、WebベースのパノラマビューワーjQuery Panorama Viewerを紹介します。 jQuery Panorama Viewerの使い方 デモの写真です。マウスでドラッグして左右に移動できます。 実際に動作させているデモです。公式サイトで試用もできます。 iPhoneでパノラマ写真を撮るのは慣れるまで難しいですが、できあがった写真は迫力
MixItUp - リストやブロックを格好よくソート、フィルタリング MOONGIFT
情報のフィルタリングやカテゴライズ、並び替えをする際には都度URLを再読み込みして表示するのが一般的です。とは言えこれでは格好が悪いというケースもあるでしょう。 そこで使ってみて欲しいのがMixItUpです。パネルまたはリストの情報をフィルタリングします。その際のアニメーションがまた格好いいライブラリです。 MixItUpのデモ まずは動画でご覧ください。 ボタンを押した時のアニメーションが格好よく、洗練されています。 最初の表示です。全ての情報がランダムに並んでいます。 並び替え。数字ごとに並んでいます。 フィルタリング。青のラベルだけになっています。 表示方法としては四角いブロックの他、リストもできます。 MixItUpの使い方 まずはHTMLを次のように記述します。 <div id="Container"> <div class="mix category-1" data-myord
div、table、ulリスト等にソート、ページネーション、フィルタ機能を追加できる「jPList」:phpspot開発日誌
Overview | jPList - jQuery Data Grid Controls div、table、ulリスト等にソート、ページネーション、フィルタ機能を追加できる「jPList」。 div、table、ulなどで列挙されたデータに、次のようなインタフェースを追加して、便利にしてくれるというもの。 既存のHTMLにソートやフィルタなどの機能拡張したい場合に使えそうです。 関連エントリ アイテムをクールにアニメーションしつつフィルタ・ソートが出来るjQueryプラグイン「MixItUp」 リストやテーブル、DIV等の要素を好みにJSでソートできるjQueryプラグイン「SortedList」 テーブルに検索、ソート、ページ分け機能をつけて便利にしてくれる「Dable」
レスポンシブでモバイルフレンドリなツールチップ実装ライブラリ「Mobile-Friendly Tooltip」:phpspot開発日誌
Responsive and Mobile-Friendly Tooltip ? Osvaldas Valutis レスポンシブでモバイルフレンドリなツールチップ実装ライブラリ「Mobile-Friendly Tooltip」 ツールチップというと、どうしてもPC用でマウスオーバー表示というものが多かったのですが、レスポンシブでデザインも美しいツールチップが実装可能です。 タップすると次のように綺麗なツールチップが表示されます。 関連エントリ フラットデザインが美しいシンプルかつスモールなツールチップjQueryプラグイン「Tipr」 フラットでシンプルさがいい感じのツールチップライブラリ「Simptip」
Owl Carousel
How To Use 1. Load jQuery and include Owl Carousel plugin files To use Owl Carousel, you’ll need to make sure both the Owl and jQuery 1.7 or higher scripts are included. <!-- Important Owl stylesheet --> <link rel="stylesheet" href="owl-carousel/owl.carousel.css"> <!-- Default Theme --> <link rel="stylesheet" href="owl-carousel/owl.theme.css"> <!-- jQuery 1.7+ --> <script src="jquery-1.9.1.min.js"
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
画像を拡大しつつレントゲン風に透過させるエフェクト実装「MagnifierRentgen」:phpspot開発日誌
ユーザ入力をリアルタイムでバックアップしてフォーム内容を保持できる「Squirrel.js」:phpspot開発日誌
Fluidbox, a jQuery plugin for beautiful lightboxes
Rollerblade.js｜Webディレクター・ハラヒロシのブログ
Useful and Time-Saving Text Effect jQuery Plugins for Beautiful Typography
Loading...