Tag : JavaScript

- 51 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

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