bxSliderでポーズ設定をスライド毎に変更する方法

Read More

bxSliderでポーズ設定をスライド毎に変更する方法

使う機会あるかもなので備忘録。コンテンツスライダーを実装できるjQueryプラグイン「bxSlider」で、ポーズの設定時間をスライド毎に変える方法です。通常ポーズ時の時間指定はすべて同じものが適用されますが、例えば1枚目は5秒、2枚目は10秒といったように何らかの理由でスライド毎にポーズの設定時間を変えたいというときに使えます。

  • Posted on
  • Tips
日付・時刻入力を手助けしてくれるデートピッカー・タイムピッカーを実装できるスクリプト 15

Read More

日付・時刻入力を手助けしてくれるデートピッカー・タイムピッカーを実装できるスクリプト 15

ユーザーに日付や時刻を入力してもらう際に手助けするデートピッカー・タイムピッカーを実装できるスクリプトのまとめです。日付であればカレンダーを、時刻であれば時計を表示させるといったように選択しやすい感じの見栄えにしてくれるものもあれば、シンプルな見た目で入力・選択させるといったものもあり、使いたいデザインのテイストに合わせて選べると思います。

  • Posted on
  • Tips
ユーザーにサイトやサービスを案内するサイトツアー機能を実装できるスクリプト 10

Read More

ユーザーにサイトやサービスを案内するサイトツアー機能を実装できるスクリプト 10

初めてサイトに訪れてくれた人にどのような機能やコンテンツがあるのか紹介をしたり、ちょっとわかりづらいサービスなどでユーザーが戸惑わないよう手助けしたりするのに便利なサイトツアー機能を実装できるスクリプトのまとめです。jQueryプラグインや中にはBootstrapと組み合わせて使用する感じのものもありますが、単体で動くものもあります。大体同じような動きではありますが、単純にヒントを出していくだけのシンプルなものから、オプション・コールバックが豊富に用意されていていろいろ好みにいじれるものまで様々です。

  • Posted on
  • Tips
背景にひと手間加えたい時に便利なスクリプト 10+

Read More

背景にひと手間加えたい時に便利なスクリプト 10+

ウィンドウいっぱいの背景に画像や動画を配置したり、ランダムなパーティクルやラインを表示させるなど、主に背景周りで使えそうものや「この領域に何かもうひと手間加えたい…」という時に便利そうだと思うスクリプトを幾つかまとめてみました。jQueryプラグインが多めですが単体で動かすことができるものもあり、実装方法などに関しても容易にできるものが多いと思います。

  • Posted on
  • Tips
スクロールバーのデザインや動きを変更したい時に便利なスクリプト 8

Read More

スクロールバーのデザインや動きを変更したい時に便利なスクリプト 8

スクリプトといってもほぼjQueryプラグインになりますが、ブラウザやOSによってデザインが異なるスクロールバーデザインを統一させたい時などに便利なスクリプトのまとめです。Chromeや古いIEなどのようにブラウザによってはCSSだけでスクロールバーのデザインを変更できたりはしますが、記述がバラバラだったりしますし、ひと通りのブラウザでとなるとやはりこういったもので対応するのが無難だと思います。また、スクリプトによっては慣性スクロールを実装したり複数の領域を同時にスクロールできるようにするといったデザイン以外の部分でもカスタマイズできるものもあります。

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

Read More

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

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

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

Read More

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

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

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

Read More

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

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

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

Read More

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

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

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

Read More

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

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

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

Read More

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

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

  • Posted on
  • Tips

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。