SlickのcenterModeで中央に2枚配置する方法｜toya
スライダーを作成するためのプラグイン「slick」のcenterModeを使って、実装イメージのように中央に2枚配置し、画像の余白を不均等にすることが一筋縄ではいかなかったので、その備忘録です。 <実装イメージ> 1.問題点・centerModeでは中央に配置する枚数は奇数値推奨。 ・centerModeでは画像間の余白は均等になるようになっている。 ・中央配置された時に付与されるclass、slick-active / slick-center / slick-currentを余白の調整に活用したいが、スライドが切り替わった後に付与されるため、見た目の調整はできるがスライドがガタつく。 ※コールバック関数「beforeChange」との組み合わせもチャレンジしてみましたが、部分的にガタつく... 2.解決策と実装サンプル#2-1.centerModeを使用するための基本設定「slick」
【jQuery】アクセス時に任意のタブメニューを開いた状態にする小技 | できることからコツコツと
近頃はタブメニューもHTMLとCSSだけで再現する風潮になってきましたが、ちょっと気の利いたことをやろうとするとまだJSで対応する場面もあります。 そんなわけで、ページを読み込んだ時に、URLパラメーターによって初期表示されるタブメニューを変更する方法のメモ。 URLパラメータによって初期表示タブを切り替える ↓こういうやつ デモページ（tab2を開いた状態に遷移） jQueryで書いていく。 初期表示のために、必要な処理は以下。 URLパラメーターを取得するURLパラメーターによって開くタブを設定アクセス時に、URLパラメーターと設定したパラメーター合致したら表示タブを変更する 今回はタブの切り替え自体もJSで済ませています。 <div class="tabs"> <!--メニュー部分--> <div class="tabs__menu"> <div class="tabs__menu-
もうoutlineを消さない。クリック・タップ・キーボードのイベントを判定してくれるJSライブラリ「what-input」 ｜ Tips Note by TAM
data-whatinputとdata-whatintentが少し分かりにくいと思いますが、デモで色々な操作をして確認してみてください。data-whatintentはキーボードとクリックを完全に分離して切り替え、data-whatinputは両方同時に使って操作していく感じかなと思います。 デモではクラスが設定されていないので、data-whatclassesは確認できません。 セレクタの指定方法 具体的な指定方法です。 以下のように指定すると、クリックやタップで要素を選択したときにだけフォーカスインジゲータが出なくなります。フォーカスインジゲータをoutlineプロパティだけで指定している場合はこれだけで大丈夫かもしれません（詳細度は要確認）。 [data-whatinput="mouse"] *:focus, [data-whatinput="touch"] *:focus { ou
レスポンシブなドロップダウンメニューをつくる｜notes by SHARESL
ドロップダウンメニューって？ メニューをクリックしたりマウスを上に載せたりすることでそのメニューの下に出てくるようなメニューのことです。 ドロップダウンメニューの例 ドロップダウンメニューの実装方法はググると結構出てきます。 ただjQueryプラグインとかをこのためだけに読み込ませたりするのはなんか違う気がするし、「CSSだけでできる！」とかいうのもありますが、実際は動いてもデザインが思い通りにならなかったり、タブレットで全然使い物にならなかったり、なんてことがありますね。 僕なんかは特にそうですが、ほぼ「コーディング専業」の人は依頼されたデザインに合わせて自由自在に変えられるように、このくらいのUIはササっと書ける知識を持っておく必要があります。 今回はそういう時に使えるメモです。 言うて自分もけっこう忘れるので。w まずはデザインをhtml・cssで実装 基本的にはデザイナーから依頼さ
ページ内リンクをページ外からでもスムーズにスクロールさせる – WEBDESIGNDAY
【jQuery】ページ内リンクをページ外からでもスムーズにスクロールさせる 公開日:2018/01/14 /最終更新日:2019/06/14 jQuery・JS Technique 当サイトの目次でもやってますが、縦長のランディングページなんかを作る場合、グローバルナビゲーションはページ内リンクにして、スムーズにスクロールさせるパターンがよくあります。 ですが、特定のページを別ページにしている場合、ページの外からページ内リンクをクリックした際もスムーズにスクロールさせたいものです。 ですので今回は、ページ内リンクをページ外からクリックした際のスムーズスクロールをやっていきます。 まずはページ内リンクをスムーズスクロールさせる まずはおさらいです。ページ内リンクをスムーズスクロールさせます。 HTML <nav class="gnav"> <ul class="gnav__menu"> <l
Bootstrap 対応！マイクロインタラクションをクラス名だけで作ろう！ScrollReveal.js
2016年に入り、ますます注目を集めているマイクロインタラクションは、多くのウェブサイトなどでも積極的に採用されはじめています。しかし、どうしてもJSやjQueryの技術が必要となってくるため、なかなか手を出せないというひとも多いかもしれません。 今回はスクロールに合わせて要素をアニメーションさせるプラグイン、ScrollReveal.jsを使い、Bootstrapを使うような感覚で、クラス名をつけるだけでアニメーションが実装できるようにしました。 マイクロインタラクションだけでなく、ド派手なアニメーションにも使えるので、JSやjQueryはまだというひともぜひ、トライしてみてください。 ※ 改編はMITライセンスの下で行っています。 ダウンロードする 目次 1. プラグインサンプル 2. 動作環境 3. 使い方 1. プラグインサンプル スクロールに合わせて、アニメーション付きでコンテン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
