タグ

cssとjqueryに関するminaseraのブックマーク (2)

  • jQuery:使い勝手の良いタブ機能の実装メモ - Qiita

    .tabs .is_active { /* 何かタブを変更する設定 */ } .tab-content { display: none; } .tab-content.is_show { display: block; } $(function() { var tabMenu = function() { /** * 変数の指定 * $tabs : tabの親要素のjQueryオブジェクト * $content : tabによって切り替わる要素のjQueryオブジェクト * TAB_ACTIVE_CLASS : tabが選択されたスタイルを変更するclass名 * CONTENT_SHOW_CLASS : contentを表示させるためのclass名 * id_arr : $contentのIDを配列に格納 */ var $tabs = $('.tabs'); var $content =

    jQuery:使い勝手の良いタブ機能の実装メモ - Qiita
  • 小さな工夫が光る、テキストリンクのHoverアニメーション参考集 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    こんにちは、デザイナーのぺちこです。 近頃はいろいろな動きを取り入れたサイトが増えていて、「Webって楽しい」というワクワクが今まで以上に感じられます。 私が最近ちょっと気になっているのは、サイト全体の大きな動きではなく、いちパーツである「テキストリンク」のHoverアニメーションです。 大きな部分の動きや同じリンクでも目につきやすいボタンリンクには、いろいろなバリエーションの動きが取り入れられています。一方でテキストリンクについては、ありきたりなエフェクトになってしまっているサイトがまだまだ多いなぁ、と思われます。 そんな中で、そういった些細な部分も手を抜かず作り込まれているサイトを見ると、思わず「おっ!」と立ち止まってしまいます。 サイトコンセプトに沿った効果的なアニメーションを入れることができれば、ワンランク上のWebサイトになっていくはず。 というわけで今回は、テキストリンクのHo

    小さな工夫が光る、テキストリンクのHoverアニメーション参考集 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • 1