ページのアクセス時にモーダル（フロート）を表示するjQuery.layerBoard.js | FEVDES BLOG
「セール情報」や「重要なお知らせ」を、 モーダル（フロート）で目立たせたいという要望があったので、 ページのアクセス時にモーダル（フロート）を表示するjQueryプラグインを制作しました。 「jquery.layerBoard.js」は商用利用・改変・再配布可能です。 デモ トップページのアクセス時にモーダルを表示させるプラグイン。 ダウンロード：layerboard.zip【111KB】 デモをみる 次にアクセスしても指定した時間までひらきません。 デフォルトでは1分で、再びひらくようになっています。 再びひらくまでの時間は分単位で指定できます。 必要なファイル 必要なのは jQuery jquery.cookie.js jquery.layerBoard.js jQueryとjquery.cookie.jsはサイトからダウンロードしてください。 jquery.layerBoard.js
クールでカッコイイいろんな機能満載のスライダー「Slider Pro」jqueryプラグイン | スターフィールド株式会社
jQueryプラグインのスライダーの紹介は久しぶりになります。 いつもbxsliderを使っているのですが、それに勝るかもしれないプラグインを発見いたしましたので、 ご紹介させていただきます。 その名も「Slider Pro」公式サイトはこちらSlider Pro サイト自体もけっこうかっこいいですね！ 一応僕が試してみたDEMOもあります。 DEMO 簡単ですが、特徴としては、 ・レスポンシブ対応 ・スワイプ対応 ・ブレークポイントの設定(画像自体を変更、サムネイルのサイズを変更等) ・高さ自動対応 ・サムネイルの設定(縦横サイズ、位置、スワイプ設定)ができる ・フルスクリーンモードにできる ・上記からいろんなレイアウトに簡単に変更できる！ 「Slider Pro」の使い方 まずは公式サイトからダウンロードをお願いします！ まずCSSを読み込み、
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
jQueryプラグイン - もっとみるを簡単に実装 - Show More
もっとみるをjQueryで簡単に実装できるプラグイン「Show More」を紹介します。 jQueryプラグイン「Show More」今回紹介するプラグインは、もっとみるを簡単に実装できるプラグイン。その名も「Show More」です。しかも、ふわっとしたアニメーション付きなので、いいね！ デモのページにある「» もっとみる」をクリックすると隠れた段落が表示され、「» もっとみる」は非表示になり、代わりに「» もっとみない」が表示されます。これをクリックすると「» もっとみる」をクリックして表示された部分が非表示になり元に戻ります。 「Show More」のデモ デモのソース（HTML + jQuery）<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content="Show Mo
【まとめ】簡単にパララックスサイトが作れるjQueryプラグイン16選
だいぶイマサラ感はありますが、やっぱパララックスサイトはかっこ良いですしまだ需要もあるはずなので、簡単にイケてるパララックスサイトが作れるjQueryプラグインのまとめをさせてください。 イマサラですがまとめておきたいのです。 では早速いきます。 プログラミングやWordPressを習得するのに一番近道な方法とは？ おすすめパララックスjQueryプラグイン18選 ① Nikebetterworld Parallax Effect サイトURL http://ianlunn.co.uk/articles/recreate-nikebetterworld-parallax/ デモページ http://ianlunn.co.uk/plugins/jquery-parallax/ 使い方参考ページ parallax.jsをいじってパララックスのデモ作ってみた。 | キリンブログ ナイキのパララッ
[JS]テーブルを手軽にソートできるjQueryプラグイン「Stupid jQuery Table Sort」｜jQueryプラグイン・ライブラリ｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」
Stupid jQuery Table Sort のダウンロード 以下のサイトより Stupid jQuery Table Sort のファイルをダウンロードします。 Stupid jQuery Table Sort の設置 jquery ファイルと一緒に stupidtable.js ファイルをhead 内に設置します。 <script type="text/javascript" src="./jquery.min.js"></script> <script type="text/javascript" src="./stupidtable.js"></script> <script> $(function(){ $("table").stupidtable(); }); </script> 基本的な動き tableタグ内の th に data-sort="int" data-sort
![[JS]テーブルを手軽にソートできるjQueryプラグイン「Stupid jQuery Table Sort」｜jQueryプラグイン・ライブラリ｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」](https://cdn-ak-scissors.b.st-hatena.com/image/square/dac3dc8674b0e75733d805514625735f9af975c2/height=288;version=1;width=512/https%3A%2F%2Fwww.webantena.net%2Fwp-content%2Fuploads%2F2013%2F06%2Fstupidtable.png)
クールでカッコイイいろんな機能満載のスライダー「Slider Pro」jqueryプラグイン | スターフィールド株式会社
jQueryプラグインのスライダーの紹介は久しぶりになります。 いつもbxsliderを使っているのですが、それに勝るかもしれないプラグインを発見いたしましたので、 ご紹介させていただきます。 その名も「Slider Pro」公式サイトはこちらSlider Pro サイト自体もけっこうかっこいいですね！ 一応僕が試してみたDEMOもあります。 DEMO 簡単ですが、特徴としては、 ・レスポンシブ対応 ・スワイプ対応 ・ブレークポイントの設定(画像自体を変更、サムネイルのサイズを変更等) ・高さ自動対応 ・サムネイルの設定(縦横サイズ、位置、スワイプ設定)ができる ・フルスクリーンモードにできる ・上記からいろんなレイアウトに簡単に変更できる！ 「Slider Pro」の使い方 まずは公式サイトからダウンロードをお願いします！ まずCSSを読み込み、
パララックス/スクロールでアニメーションさせるjQueryプラグインなど
こんにちは、工藤です。 今回はパララックス効果を表現できるjQueryプラグイン・スクロールでアニメーションさせるjQueryプラグインについてやそれに関する記事を集めました。 ここ最近はパララックスが１番流行っていた時期の物より、アニメーションの表現がさりげないものが主流なのかなという印象を受けます。 Nikebetterworld Parallax Effect Demo [配布サイト][DEMO] パララックスのプラグインでも代表的なものの1つ、というイメージです。 スクロールで背景が動く、右にナビゲーションがある…などパララックスに必要な基本的な物が備わっている感じです。 Skrollr [配布サイト][DEMO] こちらも代表的なものの1つというイメージ。 さまざまなアニメーションを表現することができます。 Cool Kitten [配布サイト][DEMO] レスポンシブにも対応
日本地図を表示するjQuery プラグイン Japan Mapは簡単便利 | ゆーそうとITブログ〜WordPress・Xserver・アイキャッチ画像作成ツール〜(旧:ゆうそうとITブログ)
jQueryについてちょっと別の事で検索をしていたのですが、偶然「日本地図を表示するjQuery プラグイン Japan Map」を見つけました。日本地図を表示したりクリックしてページに遷移したりできそうな面白いものだったので、どんな風に使えるかを試してみました。 日本地図を表示するjQuery プラグイン Japan Map とは？ http://takemaru-hirai.github.io/japan-map/ Takemaru Hiraiさんが作られて公開しているjQueryプラグインです。このページにこのプラグインの使い方やサンプルコードが載っています。このjQueryを使うだけで日本地図が表示出来ちゃう！というのはとても簡単で楽しそうです。 ライセンスも MITライセンス なので色々なことに使えそうです。 ファイルをダウンロードして動かしてみる http://takemaru
スクロールするとコンテンツが浮遊してくるようなエフェクトが作れるjQueryプラグイン「Flow Up」:phpspot開発日誌
Flow Up スクロールするとコンテンツが浮遊してくるようなエフェクトが作れるjQueryプラグイン「Flow Up」 ページをスクロールすると下からどんどんコンテンツが湧いてくる、ようなエフェクトが作れます。 単にコンテンツを並べるだけよりもオシャレでより流行りな感じを作れます 関連エントリ ダイナミックなタイル状レイアウトを実現できるjQueryプラグイン「Freewall」 レスポンシブでPinterest風レイアウトのギャラリーが作れるjQueryプラグイン「Galereya」 画像のレイアウトに使えるjQueryプラグイン「jQuery Photoset Grid」 ドラッグ＆ドロップで再編成できるPinterest風レイアウト作成プラグイン「jQuery.Shapeshift」 エレメントを45度傾けてカッコよくレイアウトできる「jquery.diamonds.js」
HTML5のvideoタグを使って背景に動画を設定するjQueryプラグイン・videoBG - かちびと.net
HTML5から使えるvideoタグで背景への動画設定を簡単に行えるというスクリプトです。対応していないブラウザには静画が表示されるようになっているみたい。 動画を背景に、というスクリプト。 動画のパスを指定して表示するみたいです。楽でいいかも。尚、HTML5未対応のブラウザには普通の画像を別途用意して指定しておくことで表示を切り替えるみたいです。 コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script> <script type="text/javascript" src="jquery.videoBG.js"></script> コアとプラグインを読み込み。 $('.foo').videoBG({ position:"
yane-ni-kabochano.com
yane-ni-kabochano.com This domain is expired. The domain owner has to renew it from the admin setting if you continue using it. 2018 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain o
[JS]レスポンシブにも対応した使いやすいカルーセルを探す時はこのスクリプトがオススメ！ -slick | コリス
画像やコンテンツを配置したパネルを次々に水平・垂直にスライドして表示するカルーセルのスクリプトを紹介します。 自由度の高いカルーセルってなかなか無いのですが、「ラスト カルーセル」とサブタイトルがついてるくらい探し回って最後にたどり着くのはこれという出来です。 slick slick -GitHub slickの特徴 slickのデモ slickの使い方 slickの特徴 「the last carousel」とあるだけあって、カルーセルとしての機能は全て備えています。 レスポンシブ対応 CSS3はサポートブラウザ時に動作 オートプレイ対応 ナビゲーションはドット・アローの選択が可能 矢印キーでのキーボード操作に対応 ドラッグ・スワイプ操作に対応 無限ループ対応 slickのデモ デモでは、さまざまなカルーセルの動きを試せます。
アイテムを浮遊させられるjQueryプラグイン「jqFloat」:phpspot開発日誌
jqFloat.js ? A Floating Effect with jQuery! アイテムを浮遊させられるjQueryプラグイン「jqFloat」。 雲なんかの画像をプカプカページ内で浮かせることができたりします。 ページ内にアニメーションを設置して、楽しげな雰囲気を出す場合なんかに使えそうですね。 jqueryのanimateは本当に簡単に要素をアニメーションできるようにしましたがこれをうまく応用してますね 使い過ぎは嫌われるような気もしますが、適度に使えばよい効果が作れそうです 関連エントリ faviconをアニメーションさせたりテキストを付与できるjQueryプラグイン「jQuery Favicon」 アニメーションするクールな円形メニューが実装できるjQueryプラグイン「MobilyBlocks」 複数アニメーションを組み合わせられるスライダーを実装できるjQueryプラグ
Xlune::Blog
可変グリッドレイアウトjQueryプラグイン(jquery.vgrid.js) なんだか可変グリッドレイアウトがまた流行ってる（？）ようなので、jQueryプラグイン書いてみた。 一通りブラウザで表示確認ぐらいはしたけど、テストは十分じゃありません。 Demo Demo Index 利用方法はデモのソースを確認してください。(ウィンドウリサイズして動きも確認してね) Download github zip file 利用には、jQuery本体とjquery.easingプラグインが必要です。別途読み込んでください。 更新情報 v0.1.8 (20120421) display属性で、グリッド要素の表示/非表示を切り替えれるように修正しました。 demo009を追加 v0.1.7 (20111110) 複数の可変ボックスを指定すると、開始位置がおかしくなるバグを修正しました。 demo008
[JS]変更時のアニメーションが気持ちいい、レスポンシブ対応のかっこいいグリッドを生成するスクリプト -Grid—A—Licious
Masonryはかっこいいけどパネル移動のアニメーションがちょっとな、という人にぴったりな、レスポンシブ対応でレイアウト変更時のアニメーションもスムーズでかっこいいグリッドを生成するjQueryのプラグインを紹介します。 Grid—A—Licious Grid—A—Licious -GitHub Grid—A—Liciousのデモ Grid—A—Liciousの使い方 Grid—A—Liciousの実装例 Grid—A—Liciousのデモ まずは、Grid—A—Liciousのベーシックな動作が確認できるデモからご紹介。 アレンジは、下記のGrid—A—Liciousの実装例で。 ページいっぱいに高さの異なるパネルが同じ間隔で配置されています。 デモページ：スマフォサイズ Grid—A—Liciousの使い方 Grid—A—Liciousは2008年にリリースされた当時は単にグリッド状に
[M]WordPress×jQuery：次のページを自動で読み込む「jQuery.autopager」でローディング短縮！ | miMemo(ミメモ)
[M]WordPress×jQuery：次のページを自動で読み込む「jQuery.autopager」でローディング短縮！ こんにちは！みう(@miu0512)です。スマホページは読み込むスピードが命！ということで、噂のAutoPagerを、jQueryを使ってスマホで実装してみました。自動で表示させるのもアリですが、私はワンクリックで表示させるようにしています。 導入の仕方はカンタン３STEP STEP１：＜head＞の中に以下を追加する [HTML] <!--jQuery読み込み--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <!--jQueryプラグイン「jQuery.autopager」の読み込み-->
![[M]WordPress×jQuery：次のページを自動で読み込む「jQuery.autopager」でローディング短縮！ | miMemo(ミメモ)](https://cdn-ak-scissors.b.st-hatena.com/image/square/ede4c1c32b56c0e18fb196e305fc2e63f1de26e4/height=288;version=1;width=512/https%3A%2F%2Fweb-mimemo.com%2Fwp-content%2Fuploads%2F2013%2F09%2F20130919103207.png)
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ページを開く
http://infinityforest.net/home/archives/3055
[jQuery/Javascript]虫っぽい動きやふわふわ漂うようなアニメーションを実装するjQueryプラグイン | Wood-Roots:blog