スクロール時に要素の表示・非表示を切り替えたり、固定配置する動きを実装できるスクリプト 10 - NxWorld
見かけることが多いスクロールしていくと途中から要素が表示されたり、一定の範囲内のみで要素が固定配置されるといった動きを実装できるスクリプトのまとめです。 中にはスクロールアップ時には〇〇して、スクロールダウン時には△△するというように、スクロールした方向によって動きを変更したり、特定の箇所まで行ったときに関数を実行するというような動きを実装できるものもあります。 紹介している中で特にシンプルな動きのものは、わざわざこういったものを使わなくとも自分で1から実装してしまう方も多いでしょうし、ググれば実装方法も沢山出てはくるものの、スクリプトが苦手な方や少しでも手っ取り早く実装したいという方にはやはり便利だと思います。 探せばもっと高機能なものや使いやすいものが沢山あるとは思いますが、ここでは自分も利用したことがあるものや目についたものを紹介します。 Headroom.js スクロールの方向（上
Mappy.js - Googleマップでマーカーを立てるのに便利なjQueryライブラリ MOONGIFT
Googleマップは地図を便利に使える存在ですが、プログラムと組み合わせようと思うと若干面倒なことがあります。そうした時にはサードパーティ製のライブラリを使うのがお勧めです。 マーカーを立てたり、検索したりと言った操作をするならばMappy.jsが便利ではないかと思います。さっそく見ていきましょう。 マーカーを立てたところです。 コードはこんな感じになります。面白いのはリファレンスとして画像をBase64エンコードし、それをそのまま配置しているところです。また、クリックでマーカー詳細を表示するかどうかはautoShowで制御できます。 $("#custom-places").mappy({ showOnLoad: [ // City Varieties { // flag that this place should have the tooltip shown when the map
スマホサイト構築に便利なドロワーメニュー・スワイプのjQueryプラグインまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのはるえです。 もうほとんどの案件でPC＋スマホ制作がセットになってきましたね。 LIGに入社したての1年前まではスマホの制作経験を聞かれてうつむき気味だった私も、おかげさまで今じゃスマホサイトを喜んで作るようになりました。 ありがとうございます！！ そこで今回は、スマホサイトで使われやすいドロワーメニューやスワイプ実装の際に必要となるプラグインをご紹介させていただきます。 【こちらもおすすめ】 ☞ 高機能なJavaScriptの人気スライダープラグイン4つを実際に使ってレビューしてみた Facebookでもおなじみのドロワーメニュー3選 今じゃ基本中の基本となっているドロワーメニュー。 Facebookなどで使われている、横からぬるっと出てぬるっと引っ込むあれです。動きが気持ちよくて、実装も簡単にできるものを中心にまとめてみました。 jQuery slimMenu
ドロップダウンをフラットでクールにするjQueryプラグイン「EasyDropDown」:phpspot開発日誌
EasyDropDown - A Drop-down Builder for Styleable Inputs and Menus ドロップダウンをフラットでクールにするjQueryプラグイン「EasyDropDown」 次のようなクールなドロップダウンを実装することが出来ます。CSSの切替えによって簡単にデザイン変更が可能 フラットデザインについては、今後しばらく盛り上がりそうです。 関連エントリ 美しいフラットなアイコンフォント「Dripicons」 フラットデザインが美しいレスポンシブなLightbox「Nivo Lightbox」 フラットだけど影で立体的に見えるフリーな汎用アイコンセット ハイクオリティなソーシャル向けのフラットアイコンセット フラットな６２種類のファイル・タイプアイコンセット「File Type Icons」 200個のフラットなフードアイコンセット
CSS3による多層グラデーションを使った背景を作れるjQueryプラグイン・SHARDS
ちょっと面白かったので備忘録。CSS3で多層グラデーションの背景を手軽に作れる、というスクリプト。jQueryに依存します。レイヤーはランダムに組まれるみたいですね。 多層グラデーションな背景を作れる、というもの。用途は限られそうですけど、なかなか素敵な感じ。 こういう背景を色を指定してランダムに作成出来ます。 以下サンプルです。 Sample リロードする度に異なったグラデーションが作られます。 コード<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script src="shards.min.js"></script>本体とプラグインを読み込む・・・のですが、1.9だと動かないっぽい？ $('#foobar').shards( [239,199,222,.
複数ページにも対応とは！ページに分かりやすいプロダクトツアーを加えるフレームワーク -Hopscotch
ページに分かりやすく、プロダクトツアーを加えるフレームワークを紹介します。 似たようなスクリプトはたくさんありますが、これはツアー移動のアニメーション、ツアーを戻る、そして複数ページにも対応しています。 1ページ内でのツアーでけではなく、複数ページを横断するツアーも作成できます。 Hopscotch Hopscotch -GitHub Hopscotchの特徴 Hopscotchのデモ Hopscotchの使い方 Hopscotchの特徴 イベントのコールバック ツアー中のさまざまなイベントのコールバックを装備。 マルチページ対応 HTML5のストレージやクッキーを利用して、複数ページにまたがるツアーも可能。 i18n対応 さまざまな言語での実装をサポート。 快適なレスポンス 一つひとつは軽量なインスタンス。 Hopscotchのデモ ページ自体がデモになっています。 中央下の「Tale
LazyLoadを実現する1KBを切るjQueryプラグイン「Unveil」:phpspot開発日誌
jQuery Unveil - A very lightweight plugin to lazy load images LazyLoadを実現する1KBを切るjQueryプラグイン「Unveil」 LazyLoadプラグインの余分な機能（エフェクト、イベント）を省いて軽量化したものです。 LazyLoadでページ表示速度をあげようとしてLazyLoadで遅くならないようにしたい場合に使えそう とにかく軽くしたい場合に検討してみてもよいプラグインですね 関連エントリ １ページ内で複数ページに分割できるjQueryプラグイン「windows」 レスポンシブに使えるタブUI実装jQueryプラグイン「Easy-Responsive-Tabs-to-Accordion」 範囲指定が可能になるUI実装jQueryプラグイン「noUiSlider」 レスポンシブに加えスマホ用のメニュー実装もできる
Flipboard風エフェクトをブラウザ上で実現するためのjQueryプラグイン「flip」:phpspot開発日誌
Jquery-flip Flipboard風エフェクトをブラウザ上で実現するためのjQueryプラグイン「flip」。 次のように、縦にも横にもページをめくる風のUIが作れます。アプリ程ではないにせよ、面白いエフェクトがブラウザ上で作れるのはいいですね 使い方次第だとは思いますが、１から作ろうとすると大変そうなので覚えておくとよさそう 関連エントリ １ページ内で複数ページに分割できるjQueryプラグイン「windows」 マスクを使ったお洒落なスライダーが作れるjQueryプラグイン「Maskify Slider」 レスポンシブなカバーフローっぽいスライドショーが作れるjQueryプラグイン「Flipster」 レスポンシブでタッチ対応な軽量なスライダー実装jQueryプラグイン「Unslider」 テーブル内容を入力値でフィルタリングできるjQueryプラグイン「FilterTable
WYSIWYGエディタを実装するjQueryプラグイン・jQuery TE - かちびと.net
WYSIWYGを実装するjQueryのプラグイン、jQuery TEのご紹介です。WYSIWYGエディタの割に軽量との事です。触って見たいけど時間無いので備忘録的にメモ。 jQueryでWYSIWYGエディタを実装する、というもの。サイズは16KBと、WYSIWYGエディタの割には軽量なのではないかと思います・・でも、他のをあまり良く知らない。 ロゴがなんとなく公式っぽい感じがしますけど・・jQueryのアカウントのGithubには無いから違うのかな。 シンプルな設計で使いやすい印象ではあります。 ライセンスはMITとGPLのデュアルライセンスです。ドキュメントも充実していますのでチェックしてみては。 jQuery TE
[JS]ブログの記事を読み終えたユーザーに、シェアなど次のアクションを促すスクリプト -jQuery Engage
WordPressで作られたブログなどでスクロールして記事を読み終えた時に、その記事をシェアするボタン、記事へのコメント入力フォーム、メールニュースなどの告知を配置したパネルを下からアニメーションで表示するjQueryのプラグイン、いやWordPressのプラグインと言った方がいいのか、を紹介します。 デモページ：記事を読み終えたとこ パネルには左から、コメント、ソーシャルメディア、メールニュースが配置されており、これはカスタマイズできます。 jQuery Engageの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 ※WordPressなのでjquery.jsは既に利用していると思いますが、無ければ追加してください。 <script src="js/dist/jquery.engage.min.js" type="text/javasc
ページ内スクロールのナビゲーションを実装出来るjQueryプラグイン・scrollNav.js
ページ内スクロールのナビゲーションをサイドカラムに自動で実装する、というスクリプトのご紹介。見出しまでスクロールすると、ナビゲーションの方も連動してくれます。ユーザビリティとしてはなかなか。
ペラペラめくれるカウンター実装jQueryプラグイン「flipCounter」:phpspot開発日誌
flipCounter 1.2 a jQuery plugin by BloggingSquared.ca ペラペラめくれるカウンター実装jQueryプラグイン「flipCounter」 中心に折り目がついててめくれる時計がありますが、アレをカウンターにしたものが登場。アニメーションさせることもでき、なかなかいい味が出せます 必要なライブラリを読込後、$("#counter").flipCounter(); と書くだけで実装できるのは素晴らしい。 各種豊富なオプションで動作をカスタマイズ可能ですし、使われている画像を変えればオリジナルのUIのカウンターが実装できます。 フォーマット指定なんかも可能 アクセスカウンターレンタルサービスなんていうのが昔はよく使っていましたが、こういうカウンターのレンタルがあったら使いたいかもしれませんね。 関連エントリ jQueryでフリップエフェクトを使った
jQueryで要素の表示・非表示を判定する方法
jQueryの要素の表示・非表示を判定する方法を紹介します。 １．基本 jQueryでは、要素の表示・非表示のためのメソッドとして、show()とhide()が提供されています。 show()は指定した要素を表示します。 $('#foo').show(); hide()は指定した要素を非表示にします。 $('#foo').hide(); が、表示・非表示を判定する方法として、isShow()やisHide()、isVisible()などは提供されていません。 ２．css('display')で判定する show()はdisplayプロパティ「block」、hide()はdisplayプロパティを「none」にするので、これを判定に利用します。 if ($('#foo').css('display') == 'block') { // 表示されている場合の処理 } else { // 非表示
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
イマドキなデザインのタブUIを実装できるjQueryプラグイン「PWS Tabs」:phpspot開発日誌
IDEA * IDEA
Pinterestライクなレンガ風のレイアウトを構築する為のライブラリ・Nested
cmmntr.com