ユニークな見せ方や動きを実装したい時に使えそうなスクリプト 10 - NxWorld
他ではあまり見かけることのないユニークな見せ方や動きを実装したいとき、遊び心あるイースターエッグを仕込んでおきたいときなどに個人的に使えそうだなと思ったスクリプトをまとめてみました。 ブラウザやデバイスによっては実装できないものも幾つかあるのでその点は注意が必要ですが、いずれもそこまで難しい記述などもなく実装することができます。 窓に水滴がついていく様子を表現できる「rainyday.js」 とにかく実際に動いているデモを見てほしいのですが、雨が降って窓に水滴が徐々についていく様子をリアルに表現することができるスクリプトです。 水滴のサイズやついていくスピード、ぼかしや不透明度具合を調整することができます。 水面に滴が落ちているような感じを表現できる「Raindrops.js」 コンテンツやセクションの区切りなどを水面に見立て、そこに滴が落ちてきたようなエフェクトを実装できるjQueryプ
ちょっとした仕掛けや面白い表現を実装できるjQueryプラグイン - NxWorld
サイトにちょっとした仕掛けをつけたり、使い方によっては面白い表現を与えてくれるjQueryプラグインをいくつか紹介します。 案件とかだと難しいですけど、例えば個人ブログのように自分でサイトを運営しているなら、こういった遊び心を取り入れても面白いですね :) サイトにコナミコマンドを埋め込む「Cheat Code」 サイトで↑↑↓↓←→←→BAのようなコナミコマンドを入力するとメッセージを表示できるプラグイン。 使い方は「Cheat Code」よりjquery.cheat-code.jsをダウンロードし、jQueryと合わせて読み込みます。 例としてコードは下記のようになります。 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.c
フロントエンドに必要なとりあえずのjsプラグイン2020 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 2020年3月時点でまだ現役なプラグイン。 非常にお世話になっております。 雑いのでもう少しちゃんと書きたい。 jQuery もそこそこ多めです。 ▼ ユーティリティー系 bowser.js http://lancedikson.github.io/bowser/docs/bowser.js.html ブラウザ判定 [日本語解説] https://co.bsnws.net/article/231 Moment.js https://momentjs.com/ jsは Date がハマるし辛い。ので時間系を扱う時はかなり必須。 [日本語解
jQueryのプラグインが面白い！スクロール時にユーザを引きつけよう
PCでも、スマートフォンでも、画面をスクロールさせた時の各パーツ等の*「動き・挙動」*というのは、ユーザーの興味を引きつける上で非常に重要な要素です。 最近では動画以外の要素にも動きをつけて表示するホームページが増えてきました。 今回は、ページ下部へとスクロールさせるごとにユニークな動きをする、簡単に設置できるjQueryのプラグインをご紹介します。デモページと併せ、「どんな動きをするか」という具体的な説明もご覧ください。 注目！スクロール時にユーザを引きつけるjQueryプラグイン12選 1. セクションが重なるようにレイヤー表示「StickyStack.js」 配布ページ｜デモ 一つひとつのセクションをレイヤーに見立て、ページトップから積み重なるように表示するエフェクト効果を実装できます。垂直に配置した各パネルを上部に固定配置しながら、積み重なるようにスクロールすることができます。言葉
スクロールバーのデザインをカスタマイズする超多機能jQueryプラグイン「custom scrollbar」 | eturlt.net
ブラウザ標準のスクロールバーを、自分のデザインに変更するためのjQueryプラグイン「custom scrollbar」。 jQuery custom content scroller – malihu | web design jQuery custom scrollbar demo（デモページ） スクロールバーをカスタマイズするJSは色々あるけど、これが一番多機能そうなのでご紹介。 基本的に上記ドキュメントページを要約して翻訳しています。間違ってたらすみません。 導入方法 基本的にはJSを読み込んで指定をするだけです。 基本的な使い方 jQueryとmCustomScrollbarのjs, cssを読み込む ダウンロードはjQuery custom content scroller – malihu | web design のdownloadから <link href="jquery
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リクエストと描画を最小限に抑え、更にエフェクトを加え
jquery.cookie.jsの使い方と簡単なサンプルを紹介します
今さらな感じもしますが、使う機会があったので忘れないように記事にしておきます。以前使ったことがあるのですが、そのときの記憶がほとんどなかったので、こういうのは残しておいたら自分のためにもなりますね。 まず、jQueryとjquery.cookieを読み込みます。ともにCDNになっているのでこちらでいいと思います。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> jquery.cookieを自分でダウンロードされる方はこちらから。
ページの一番下までスクロールしたら自動でコンテンツを読み込んでくれる「jQuery.bottom.js」 | mororeco
Facebookやtumblr、TwitterなどのSNSサービス等でよく見られる、ページの一番下までスクロールをすると、それ以前のコンテンツを自動的に表示してくれる「jQuery.Bottom.js」をご紹介します。コンテンツが多くなるとページ送りで別ページへ遷移する構造もありますが、自動読み込みにすることでメリットのある場合には、取り込んでみるのも良いかもしれません。 1.jQuery.Bottom.jsをダウンロード jQuery.Bottom.js 2.jQueryとjquery.bottom.jsを読み込む <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascri
IEも対応！指定した要素を印刷するjQueryプラグイン「printThis」
IEも対応！指定した要素を印刷するjQueryプラグイン「printThis」 更新日: 2019/10/18 公開日: 2015/12/22カテゴリー: JavaScript 特定の要素のみを印刷したい。そんな願いを叶える魔法のjQueryプラグインを発見しました。 その名も「printThis」。IEも7、8、9、10、11まで問題なく動き、使い方も簡単です。 printThisの使い方と対応ブラウザ使い方は他のjQueryプラグイン同様、jQueryを読み込んでからprintThis.jsを読み込みます。あとはクリックイベントなどで実行させましょう。 以下はとあるクーポン画像のみを印刷する例です。クリックイベントを登録するボタン要素を用意しておいて、印刷したい要素にprintThis()を繋げて使います。 <script src="//code.jquery.com/jquery-1
jQueryスライダー Slider Pro の使い方｜Gimmick log
公開日：2015.11.20 更新日：2020.05.20 jQuery, カルーセルスライダー Slider Proは多様なオプションで痒いところに手が届くスライダーです。 ざっと概要をまとめると。。 レスポンシブ対応タッチデバイス対応Retina用画像の出し分け対応IE8以上で動作キャプションのアニメーション表示対応縦カルーセル、横カルーセル対応画面サイズによってレイアウト変更可能MITライセンス などなど。一番ありがたいのは、CSSなどを調整しなくても、オプションの付け替えでほぼ対応できるという点です。 まずはデモページをご覧ください。 Slider Pro 配布元 デモページ 必要なファイルを読み込む Slider Pro 配布元からファイルをダウンロードし、読み込みます。 今回使うのは、ダウンロードファイルの中に入ってる以下のファイルです。 slider-pro-master ├
[JS]普通のかっこいいスライドから、予想の斜め上いく3Dのアニメーションにも対応したコンテンツスライダー -Adaptor | コリス
シンプルなインターフェイスに、スライド時にさまざまなエフェクトが用意されたコンテンツスライダーを実装するjQueryのプラグインを紹介します。 下記キャプチャのエフェクトは3Dで、くるっぐい～ん、って感じです。 Adaptor, a jQuery 3D content slider Adaptorのデモ Adaptorの使い方 Adaptorのデモ コンテンツスライダーの対応ブラウザは、IE6を含むすべてのモダンブラウザです。 3DのエフェクトはFirefox, Chrome, Safariのみで、他のブラウザで表示した際はフェードのエフェクトになります。 スライドのエフェクト Adaptorの使い方 実装は3ステップです。 Step1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//code.jquery.com/jqu
[JS]スライダーのスクリプトを探しているなら絶対チェックした方がいいスクリプト -Slider Pro
デスクトップ、スマホ、タブレットの表示・操作に対応したさまざまなスライダーを実装できるjQueryのプラグインを紹介します。 今必要とされるさまざまな機能を備えています。 「Pro」がついてるから有料？って思うかもしれませんが、MITラインセンスで個人でも商用でも無料で利用できます。 Slider Pro Slider Pro -GitHub Slider Proの特徴 Slider Proのデモ Slider Proの使い方 Slider Proの特徴 Slider Proはさまざまなスライダーをモジュール式に実装でき、レスポンシブ対応、タッチ操作にも対応したjQueryのプラグインです。 デフォルトの5タイプのスライダー 機能は非常に豊富です。 さまざまなデバイスのスクリーンに対応 デフォルトで完全にレスポンシブ対応（デモ全て） タッチ・スワイプ操作に対応（デモ全て） ブレイクポイント
![[JS]スライダーのスクリプトを探しているなら絶対チェックした方がいいスクリプト -Slider Pro](https://cdn-ak-scissors.b.st-hatena.com/image/square/662c60ab62c1f546c5985eed5c70eddf66814399/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014111905.png)
jQuery不要でスクロールにあわせて要素をアニメーションで表示するスクリプト -WOW.js | コリス
ページ下部にもたくさんのアニメーションが！ アニメーションはAnimate.cssを使用しているので、さまざまなものが利用できます。 どのようなアニメーションががあるのか、実装方法など、当ブログで以前紹介した記事をご覧ください。 classを加えるだけで多彩なアニメーションが簡単に使用できるスタイルシート -Animate.css WOW.jsはデモ以外にも、他のサイトで実際に使用されているさまざまな例があります。 どのサイトもアニメーションが楽しく、とても印象的です。 Stream Line Icons WOW.jsのつかいかた Step 1: 外部ファイル 当スクリプトを</body>の上、Animate.cssをhead内に外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/libs/animate.css"> </
ページが見つかりませんでした | Stronghold Archive
404 Not Found. ページが見つかりませんでした。URLが変更されたか削除された可能性があります。The page you were looking for doesn't exist. You may have mistyped the address or the page may have moved.
jqueryでyes/noチャートを作る方法 - EZ-SPARROW
August 28, 2013 Jul 24, 2018 jqueryでyes/noチャートを作る方法をご紹介する。 そもそもこのチャートの呼び名が一般的かは不明だが 「はい いいえチャート」とも呼ばれているようだ。 サンプルデモは複数の答えを想定しているため厳密にはyes/noチャートではないのだが、構造は同じ。 やりたい事は、扱うサービスや商品が多い場合に、 「ユーザに質問に直感的に答えていただき、適合するサービスへと誘導する。」 といった感じ。ノンプログラマーのためかなり強引なコードかも知れないが やりたいことが実現できたので紹介していこうと思う。 解説がいまいち分かりづらいのでまずはデモをご覧あれ。 See the Pen XBRZvd by ez-sparrow (@ez-sparrow) on CodePen. 大まかな流れ 質問と質問に対する答え(選択肢)をdivで囲う。 全
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
inview.jsでスクロールして表示されたらアニメーションを実行する-サンプル付き｜Gimmick log
jQuery ElevateZoom 虫眼é�¡ã‚„å�³æž ã�«ç”»åƒ�を拡大ã�—ã�¦ãƒ«ãƒ¼ãƒšè¡¨ç¤º | PbTimes 情報誌
https://motoshige.net/blog/archives/3040
http://wp-and.me/bxslider