[B! jQuery] helio73のブックマーク

ユニークな見せ方や動きを実装したい時に使えそうなスクリプト 10 - NxWorld

他ではあまり見かけることのないユニークな見せ方や動きを実装したいとき、遊び心あるイースターエッグを仕込んでおきたいときなどに個人的に使えそうだなと思ったスクリプトをまとめてみました。ブラウザやデバイスによっては実装できないものも幾つかあるのでその点は注意が必要ですが、いずれもそこまで難しい記述などもなく実装することができます。窓に水滴がついていく様子を表現できる「rainyday.js」とにかく実際に動いているデモを見てほしいのですが、雨が降って窓に水滴が徐々についていく様子をリアルに表現することができるスクリプトです。水滴のサイズやついていくスピード、ぼかしや不透明度具合を調整することができます。水面に滴が落ちているような感じを表現できる「Raindrops.js」コンテンツやセクションの区切りなどを水面に見立て、そこに滴が落ちてきたようなエフェクトを実装できるjQueryプ

helio73 2015/08/21

リンク

爆速でわかるjQuery.Deferred超入門

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)です。これまで、JavaScriptで非同期処理を書く上での問題として、コールバック地獄やエラー処理に例外が使えないことなどを解説してきました。これらの問題に対処するライブラリの1つであるjQuery.Deferredに関して、もう少し丁寧に解説いたします。なお、jQueryのバージョンは記事執筆時点の最新である、1.9.1を想定しています。 jQuery.Deferredとは jQuery.DeferredとはjQueryのバージョン1.5から導入された、非同期処理をうまく扱うための標準モジュールです。使いこなすことで、以下のような効果が見込めます。非同期処理を連結

helio73 2015/08/03

リンク

jQuery WebGL Ripples

Background images are often boring. Use this effect to make your static CSS background images more interactive! It's as easy as: $('body').ripples({ resolution: 512, dropRadius: 20, perturbance: 0.04, }); You can add drops programmatically by doing $('body').ripples("drop", x, y, radius, strength) And you can change its state: $('body').ripples("pause") $('body').ripples("play") Download or fork t

helio73 2015/07/21

リンク

jQueryのanimateで自由にアニメーションできるようになろう

jQueryのanimateで自由にアニメーションできるようになろう jQueryにはアニメーションをするための機能がいろいろとありますが、ここでは「animate」メソッドの扱い方をご紹介いたします。投稿日2011年12月27日更新日2011年12月27日動かす前の準備 jQueryの前に動かす要素をhtml&cssで作成しておきましょう。 html <div id="box"></div> css #box { width: 100px; height: 100px; background: #3399FF; } jQueryコードを書くときの基本的な形は次のようになります。 javascript <script type="text/javascript" src="http://ajax.google apis.com/ajax/libs/jquery/1.7/jquery.m

helio73 2015/07/21

リンク

今風になった！Web制作で使える最近のjQueryプラグインまとめ

作成：2014/10/14 更新：2014/11/01 Web制作 > 比較的最近のプラグインで、今風の動きをするものなど、制作前に知っておくと助かるjQueryプラグインをまとめました。国内のサイトであまり取り入れてないようなものや、定番のものまで。ページにちょっとした工夫を凝らしたいときや、少しめずらしい仕掛けでキャンペーンサイトを作りたいときに。エンジニア速報は Twitter の@commteで配信しています。もくじ動き１．ジオメトリック背景２．フルスクリーンでスライドさせる３．ドロアー風ライトボックス４．動画を再生するタイプ３つスクロール５．スクロールでクロスフェード６．スクロールで奥行きを表現７．スクロールで分割画像８．APNG ９．Google 画像検索風ライトボックス１０．トイカメラ風のフィルターポップアップ１１．おしゃれなアラート１２．

helio73 2015/07/21

リンク

アニメーション最強のVelocity.jsの使い方 - Qiita

はじめに今話題のVelocity.jsについて初歩の初歩だけまとめました。 ※追記：↓対抗馬のanime.jsについて記事書きました※ アニメーションライブラリ決定版か!?anime.jsで軽量・軽快に実装！ Velocity.jsとは jQueryのプラグイン。 $.animateと互換性を持ち、さらに高機能で非常に軽快なアニメーションをする。アニメーション技術補足 jQuery Animation 便利だが重い。コマ落ちし過ぎ。 CSS Transition, CSS Animation 軽いが、アニメーションを繋ぐなどが出来なかったりなど使い勝手が悪い。結局、JavaScriptを頼らないと使い物にならないことが多い。 Transit.js 有名なアニメーションライブラリのひとつであるjQueryプラグイン。 CSS Animationを制御しているため、軽快。そして、3d-

helio73 2015/07/21

リンク

jQuery：ページトップへの動きに使えるエフェクト 5 - NxWorld

閲覧ページの先頭まで移動できるように設置しているところも多い「ページトップ」や「ページの先頭へ」といったページ内リンクで、移動する際の動きにjQueryを使ってエフェクトをつけたサンプルです。よく見かける単純なスムーススクロールを含めた全5種類で、少しいじればその他の場所へのページ内リンクの動きとしても実装できます。紹介している方法はいずれもjQueryを使用しており、サンプルによってはjQuery Easingも使用しているので予め読み込ませてください。 jQueryの記述はいずれもセレクタにa要素を指定しているため、特定の要素にのみ適用させたい場合などはidやclassを用いるなどして指定してください。使用するHTML・デモサンプルで使用しているHTMLは下記のようなa要素のhrefには#を記述したシンプルなものになっています。

helio73 2015/07/10

リンク

jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー

最近、下にスクロールすれば消えて、上にスクロールすれば現れる固定メニューを設置しているサイトを２つくらい（サイト名は忘れてしまいました。。）見かけて、これは流行っているのではないかということで作ってみました。メニュー自体はいたって普通のものですが、一応ソースを載せておきます。まずはHTMLです。 <nav id="menu-wrap"> <ul id="menu"> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> </ul> </nav> 続いてCSSです。 #menu-wrap { position: fixed; z-inde

helio73 2015/06/23

リンク

[JS]エフェクトの美しさがスゴイ！Webページを水面にし、波紋を生み出すスクリプト -jQuery Ripple

Googleの新UX「Material Design」のアナウンス以降、波紋のエフェクトを数多く紹介してきました。例えばこれとかRiiple Click EffectとかWavesとか。それらとは一味違い、WebGLでリアルな波紋を描くjQueryのプラグインを紹介します。 jQuery Ripples Plugin -GitHub ↑ファイルサイズを軽減してます。実際はもっと本物の水面です。 jQuery Rippleのデモ jQuery Rippleの使い方 jQuery RippleのデモデモはChrome, Safari, Firefox, Opera, IEは11+で、OpenGL 2.0対応のビデオカード内蔵のPCでご覧ください。ページ上をクリックすると、そこから波紋がどんどん増えます。 jQuery Rippleの使い方 Step 1: 外部ファイル当スクリプトとjq

helio73 2015/06/03

リンク

少しのコードで実装可能な20のjQuery小技集

2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ ↑私が10年以上利用している会計ソフト！追記：この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です！詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます

helio73 2015/03/19

リンク

jQueryを良くする25のTIPS

jQueryを良くする25のTIPS ネタ元：Improve your jQuery - 25 excellent tips ちょっと多いですが、かなり良いTIPSがまとまっています。 Google AJAX Libraries APIを利用しよう Google AJAX Libraries APIを活用すればすばやくライブラリを読み込むことが出来ます。 <script src="http://www.google.com/jsapi"></script> <script type="text/javascript"> // Load jQuery google.load("jquery", "1.2.6"); google.setOnLoadCallback(function() { // Your code goes here. }); </script> 直接読み込むことも出来ます。

helio73 2015/01/06

jQuery

リンク

jQuery を高速に使う CSS セレクタの書き方

jQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを５つに絞って紹介します。何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある ※ この記事は jQuery 1.2.6 のソースコードを元に記述しています 1. 何度も同じセレクタを実行しない改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){alert

helio73 2015/01/06

jQuery

リンク

finefinefine.jp

This domain may be for sale!

helio73 2015/01/05

リンク

jQuery高速化！処理速度を10倍上げるテクニック20選

Aircraft manuevers during an airpower deomonstration. / Official U.S. Navy Imagery Javascriputを簡単に書けるようにしてくれるライブラリのjQueryですが、使い方をちょっと変えるだけで、パフォーマンスに大きく差がでます。ハイスペックPCでは分かりづらいかもしれませんが、スペックの低いPCやモバイルではWebページの表示速度が遅くすぐに閉じられるかもしれません。 Webページがたった1秒高速化するだけでECサイトなんか、売上が10％向上した事例もあります。そこで、jQuery高速化のポイントや方法をここにまとめておきます。 jQueryの最新バージョンを使う図1 jQueryのバージョンによる速度 https://jsperf.com/speed-comparison-of-jquery-vers

helio73 2014/11/28

jQuery

リンク

jQuery Content Slider | Responsive jQuery Slider | bxSlider

We value your experience and would love to hear your thoughts. Could you spare just two minutes to fill out a quick survey? Your feedback helps us make bxSlider even better! Thank you for your support 🤗

helio73 2014/10/07

リンク

スクロールするだけでコンテンツを読み込むプラグイン「jQuery.autopager」 | PLUS

よく見かけるページングの処理で、下の方にスクロールすると自動的に次ページを読み込ませる処理をかんたんに実現してくれるjQuery.autopagerが便利でした。jQueryプラグインです。導入がかんたんで分かりやすく、オプションも必要最低限のものがバッチリ揃っています。例えば、スクロールで下部までいったら自動的に次コンテンツを表示させるか、それともボタンをクリックして読み込むか、読み込み後にコールバックで関数を読み込ませるか、などなど。 jQuery.autopagerの導入方法まず、jQuery本体とダウンロードしたjQuery.autopagerを読み込んでおきます。そして、スクロールで自動表示させるなら下記だけでOK。 <script type="text/javascript"> $(function() { $.autopager(); }); </script> <

helio73 2012/12/18

jQuery

リンク

jQueryでスクロールすると表示する系いろいろ

jQueryでスクロールすると表示する系いろいろ最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。投稿日2012年03月08日更新日2019年12月19日ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration

helio73 2012/12/18

jQuery

リンク

[JS]jQueryのプラグイン100選 -2012年総集編

2012年に紹介したものを中心としたjQueryのプラグイン100+α選です。今年目立ったのは、やはりレスポンシブ、そしてCSS3アニメーションでしょうか。スライダーやギャラリー系もレスポンシブ・アニメーション対応、ナビゲーションやPinterst風のレイアウトなど、多くのプラグインにそれら二つの要素が組み合わさっています。動画関連画像ギャラリー関連画像拡大関連画像配置・キャプション関連背景画像関連コンテンツスライダー・カルーセル関連ナビゲーション関連レイアウト関連レスポンシブ関連パネル・ボックス関連ツールチップ・ティッカー関連アニメーション関連エフェクト関連スクロール操作・スクロールコンテンツ関連リスト関連テーブル関連フォーム関連テキスト関連見出し抽出関連ローディング関連エレメント・コンテンツ生成その他動画関連

helio73 2012/12/17