Tag : JavaScript

- 49 Articles -

slickのカレントクラスを利用した実装サンプル

Read Article

slickのカレントクラスを利用した実装サンプル

手軽にカルーセルを実装できるjQueryプラグイン「slick」には、現在表示されているスライド(表示の仕方やオプションの指定によって付与の対象となる位置は変わります)に対して`.slick-current`というclassが付与される作りになっており、これを利用することでCSSを少し追記するだけでもいろいろな見せ方が可能です。そこで今回は手軽にできて且つ個人的にも利用することが多い実装サンプルを…

  • Tips
ボタンにユニークなホバー・クリックエフェクトを付けたいときに参考になるエフェクトサンプル 10

Read Article

ボタンにユニークなホバー・クリックエフェクトを付けたいときに参考になるエフェクトサンプル 10

近年多くのサイトで採用されているパッと見がシンプルなボタンデザインでも、ホバーやクリックぐらいは少しユニークな感じにしたいと思ったときに参考になりそうなエフェクトをCodePenにアップされているデモから紹介します。そのまま参考にさせてもらうだけでなく、さらに自分なりにアレンジを加えてみたり、あとは紹介しているものを組み合わせてみても面白いエフェクトができそうです。

  • Tips
jQuery:スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5

Read Article

jQuery:スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5

一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。

  • Tips
脱jQueryしたい時に参考になるドキュメントやエントリーまとめ

Read Article

脱jQueryしたい時に参考になるドキュメントやエントリーまとめ

jQueryはデザイナーなど普段はあまりコードを書かない人でも実装ができる手軽さ、各種ブラウザの互換性、様々なスニペット・プラグインが公開されているなどの理由で多くの方が利用していると思いますし、中には「JavaScriptを使う = jQueryを使う」という人も少なくないと思います。ただ、少し前からは古いIEのサポート終了やちょっとした動きならCSSで実現できるようになったことなどをきっかけに…

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

Read Article

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

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

  • Tips

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