Read Article
slickのカレントクラスを利用した実装サンプル
手軽にカルーセルを実装できるjQueryプラグイン「slick」には、現在表示されているスライド（表示の仕方やオプションの指定によって付与の対象となる位置は変わります）に対して`.slick-current`というclassが付与される作りになっており、これを利用することでCSSを少し追記するだけでもいろいろな見せ方が可能です。そこで今回は手軽にできて且つ個人的にも利用することが多い実装サンプルを…
Tag : JavaScript
- 49 Articles -
Read Article
slickのページングにjQueryを使ってイメージを設定する方法
引き続きjQueryプラグイン「slick」に関するTipsで、ページングにイメージを設定したいときにjQueryを使ってメインスライドのイメージをそのまま使い回したり、ページング部分のHTMLを記述する手間を省いて少しでも楽して設定する方法です。
Read Article
slickでスライド総数と現在何枚目が表示されているかをカウント表示する方法
使い方次第で簡単に様々なタイプのカルーセルが実装でき、オプションやイベントも豊富に用意されているのが特徴のjQueryプラグイン「slick」で、スライド総数と現在何枚目が表示されているかをそれぞれカウント表示させるカスタマイズを紹介します。
Read Article
ボタンにユニークなホバー・クリックエフェクトを付けたいときに参考になるエフェクトサンプル 10
近年多くのサイトで採用されているパッと見がシンプルなボタンデザインでも、ホバーやクリックぐらいは少しユニークな感じにしたいと思ったときに参考になりそうなエフェクトをCodePenにアップされているデモから紹介します。そのまま参考にさせてもらうだけでなく、さらに自分なりにアレンジを加えてみたり、あとは紹介しているものを組み合わせてみても面白いエフェクトができそうです。
Read Article
jQuery Snippets #10
基礎的なものからちょっとした機能の実装方法など、jQueryに関する個人的なメモ・スニペットリストです。書いている内容に対して「もっとスマートにできる」とか「そもそも間違ってる」みたいなのがあれば、ツッコミ大歓迎なのでコメントなど通じて是非教えてください。
Read Article
jQuery Snippets #9
基礎的なものからちょっとした機能の実装方法など、jQueryに関する個人的なメモ・スニペットリストです。書いている内容に対して「もっとスマートにできる」とか「そもそも間違ってる」みたいなのがあれば、ツッコミ大歓迎なのでコメントなど通じて是非教えてください。
Read Article
jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。
Read Article
jQuery：タブ切り替えをウィンドウサイズが小さいときはselectで切り替える動きにする方法
レスポンシブなサイトでタブ切り替えを実装する際、ウィンドウサイズが大きいときは一般的な切り替え用のタブを表示して、小さいときは切り替えに`select`要素を用いるという動きを実装することがあったので備忘録です。
Read Article
jQuery：要素の追加・複製・置換・削除といったDOM操作に関する備忘録
今更感ありますが、自分用にjQueryで要素の追加・削除といったDOM操作に関するメソッドの動きをさっと確認できる一覧がほしくて作ったのでシェアします。
Read Article
jQuery Snippets #8
基礎的なものからちょっとした機能の実装方法など、jQueryに関する個人的なメモ・スニペットリストです。書いている内容に対して「もっとスマートにできる」とか「そもそも間違ってる」みたいなのがあれば、ツッコミ大歓迎なのでコメントなど通じて是非教えてください。
Read Article
脱jQueryしたい時に参考になるドキュメントやエントリーまとめ
jQueryはデザイナーなど普段はあまりコードを書かない人でも実装ができる手軽さ、各種ブラウザの互換性、様々なスニペット・プラグインが公開されているなどの理由で多くの方が利用していると思いますし、中には「JavaScriptを使う ＝ jQueryを使う」という人も少なくないと思います。ただ、少し前からは古いIEのサポート終了やちょっとした動きならCSSで実現できるようになったことなどをきっかけに…
Read Article
日付・時刻入力を手助けしてくれるデートピッカー・タイムピッカーを実装できるスクリプト 15
ユーザーに日付や時刻を入力してもらう際に手助けするデートピッカー・タイムピッカーを実装できるスクリプトのまとめです。日付であればカレンダーを、時刻であれば時計を表示させるといったように選択しやすい感じの見栄えにしてくれるものもあれば、シンプルな見た目で入力・選択させるといったものもあり、使いたいデザインのテイストに合わせて選べると思います。