マガジンのカバー画像

デイトラWeb制作

49
本
運営しているクリエイター
ren_k0227

DAY49.実務でよく使うアニメーションの付け方編 アコーディオン

01.slideToggle()で簡単アコーディオン実装jQuery('.accordion__head').click(function() { 　jQuery(this).next().slideToggle(); 　jQuery(this).children('.accordion__icon').toggleClass( 'is-open' ); }); jQuery(this)に対する、next()やchildren()といった 相対的な位置関係もよく使う .

ren_k0227

DAY48.実務でよく使うアニメーションの付け方編 クリックイベントの処理

01.ページ内リンクでクリックした要素に下線を引くメニューやタブをクリックしたとき、 クリックしたメニューの色が変わったり太字になったりする ユーザーにとって、どれが選択されているのかを見分けるための大事な表現 ①クリックされた時にメニューの全てのリンクの下線を削除する ②クリックされた要素に対して下線を引く addClass、removeClassを活用 02.クリック時にクラスをつけ外しアクションイベントの多くは 「◯◯したら□□のクラスをつける」 「◯◯したら□

ren_k0227

DAY47.実務でよく使うアニメーションの付け方編 スムーススクロールとフローティングアイテム

01.スムーススクロール内部リンクをクリックした時に「ぐいーん」と移動した方が ページ内を移動していることが理解できて少し親切 スムーススクロールが鉄板で使われるパーツといえば、 「トップへ戻るボタン」 1.ページ内リンクのクリックを検知する スムーススクロールは ページ内リンクをアニメーションをつけて移動させること ページ内リンクの発動キーはhrefが「#」から始まるリンクとなる // #から始まるURLがクリックされた時 jQuery('a[href^="#"]

ren_k0227