Tag : jQuery

- 62 Articles -

フェード表示やタイピング風など、テキスト表示に動きをつけられるjQueryプラグイン 8

Read Article

フェード表示やタイピング風など、テキスト表示に動きをつけられるjQueryプラグイン 8

いずれもテキストがフェードや回転といったアニメーション付きで表示されたり、一文字ずつタイピングされているような見せ方を実装することができるjQueryプラグインです。同じようなプラグインが並んでいる感じですが、軽量なものやオプションが豊富に揃っているもの、日本語にもしっかり対応しているかなどそれぞれ特徴もあるので、こういったものを使いたい時に少しでも選択肢が広がるよう良さそうなものを備忘録兼ねてま…

  • Tips
jQuery:セレクタや要素指定に関する備忘録

Read Article

jQuery:セレクタや要素指定に関する備忘録

jQueryで何かしたい時にまずセレクタで該当要素を指定すると思いますが、要素にidやclassがついていなくても特定の条件を持つ要素として指定できたり、奇数・偶数・n番目の要素を指定できたりと、セレクタには様々な指定方法があります。ただ中には利用頻度が低くていざ使える場面がきても忘れしてしまっていたり、未だに使う度にググったりするものも幾つかあるので、セレクタに関しての復習兼ねた備忘録です。また…

  • Tips
手軽にselect要素の装飾やカスタマイズができるjQueryプラグイン「Select or Die」

Read Article

手軽にselect要素の装飾やカスタマイズができるjQueryプラグイン「Select or Die」

目新しいプラグインではないのですが、使わせてもらう機会が多いのでご紹介。「Select or Die」は`select`要素にちょっとした機能を付けたり、用意されているスタイルを使うことで手軽に装飾することができるjQueryプラグインです。ブラウザもIE8から対応しており、jQueryのバージョンも新しいのはもちろん、v1.8でも動作してくれます。同じようなスクリプトやプラグインは他にもあります…

  • Tips
スクロール時に要素の表示・非表示を切り替えたり、固定配置する動きを実装できるスクリプト 10

Read Article

スクロール時に要素の表示・非表示を切り替えたり、固定配置する動きを実装できるスクリプト 10

見かけることもかなり多い(多くなった)スクロールしていくと途中から要素が表示されたり、一定の範囲内のみで要素が固定配置されるといった動きを実装できるスクリプトまとめです。中にはスクロールアップ時には〇〇して、スクロールダウン時には△△するというように、スクロールした方向によって動きを変更したり、特定の箇所まで行った時に関数を実行するというような動きを実装できるものもあります。

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

Read Article

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

他ではあまり見かけることのないユニークな見せ方や動きを実装したい時、遊び心あるイースターエッグを仕込んでおきたい時などに個人的に使えそうだなと思ったスクリプトをまとめてみました。ブラウザやデバイスによっては実装できないものも幾つかあるのでその点は注意が必要ですが、いずれもそこまで難しい記述などもなく実装することができます。

  • Tips
レスポンシブ対応された様々なタイプのナビゲーションを集めたギャラリー「NavNav」

Read Article

レスポンシブ対応された様々なタイプのナビゲーションを集めたギャラリー「NavNav」

覚えておきたいと思ったので備忘録兼ねてご紹介。「NavNav」はCSS・jQuery・JavaScriptで実装され、レスポンシブ対応もされているナビゲーションを集めたギャラリーです。検索機能やタイプごとでタグ付けも用意されているので特定の動きを探すのにも容易ですし、だらだらと時間ある時に眺めるだけでも今まで見たことないような動きを見つけたりできそうですね。

  • Services & Resource
jQuery:ページトップへの動きに使えるエフェクト 5

Read Article

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

閲覧ページの先頭まで移動できるように設置しているところも多い「ページトップ」や「ページの先頭へ」といったページ内リンクで、移動する際の動きにjQueryを使ってエフェクトをつけたサンプルです。よく見かける単純なスムーススクロールを含めた全5種類で、少しいじればその他の場所へのページ内リンクの動きとしても実装できます。

  • Tips
簡単にコンテンツスライダーを実装できるjQueryプラグイン「bxSlider」の実装サンプル

Read Article

簡単にコンテンツスライダーを実装できるjQueryプラグイン「bxSlider」の実装サンプル

スライダーやカルーセルを実装できるjQueryプラグインは多数ありますが、それらの中でも豊富なオプションと実装の手軽さで見かけたことや実際に使用した人も多いと思う「bxSlider」の実装サンプルです。もっと高機能なプラグインも探せばいくらでも出てきますし、bxSliderにこだわる必要はもちろんないんですが、個人的に手軽に使えるという理由で今でも使わせてもらう機会が割と多いので、公式には載ってい…

  • Tips
レスポンシブ対応されたLightbox系プラグイン・ライブラリ 10

Read Article

レスポンシブ対応されたLightbox系プラグイン・ライブラリ 10

レスポンシブ対応されたLightbox系のプラグインやライブラリのまとめです。ほとんどがjQueryプラグインになりますが、中には単体で動くものもあります。また、対応コンテツやエフェクトが多数あるもの、オプションがひと通り揃っているもの、動きや見栄えは少し簡易的になりますがIE7・8といったブラウザまで対応しているものなどタイプも様々です。

  • Tips
使いやすくて高機能なものが多数!スライダー実装時に便利なプラグインやチュートリアルまとめ

Read Article

使いやすくて高機能なものが多数!スライダー実装時に便利なプラグインやチュートリアルまとめ

実際に使用して良かったものも含め、スライダー系のスクリプトやチュートリアルで覚えておきたいと思ってメモしてたのが溜まってきたので備忘録兼ねてまとめました。とにかく高機能なものから動きがユニークなものまで様々なタイプがあり、ほとんどが最近実装する機会が多いと思うレスポンシブやタッチ・スワイプといった動きにも対応しています。

  • Tips

Close the search window,
please press close button or esc key.