以下のページを確認して、jQueryを実装してください
テンプレートのファイルをダウンロードしてください
以下の処理を実装してください。
①ヘッダー内のリンクをホバーするとaタグに”is-hover”というクラスが付与され、ホバーが外れると”is-hover”というクラスは消える
②メインビジュアルのスライドショー、今回はslickというプラグインを使用します。 jsで以下のように記述してスライドを発動してください。他にも色々なオプションがあるので試してみましょう。
$('.js-main-visual').slick({ dots: true, });③サイドバーの黒い帯を、ホバーしたサイドメニューの横に移動させましょう。
サイドバーのクラス：.sidebar__links
サイドバーの黒帯のクラス：sidebar__links__bar
④「もっと詳しく見る」ボタンを押すと隠れていた要素がslideDownで表示されます。その後もっと見るボタンはフェードアウトします。
もっと詳しく見るボタンのクラス:js-more-content-trg
表示されるコンテンツのクラス：js-more-content
⑤タブで切り替わるコンテンツを実装してください。
タブを押すと押した要素のaタグに”is-current”というクラスが付与されます。その他のボタンの”is-current”はその際には消してください。
押したタブの順番を取得して、ボタンの下のコンテンツがそれぞれ表示と非表示されます。 表示していたコンテンツを消すときはフェードアウトかhideを使用して良いです。
タブのボタンを囲っているクラス名：js-tab-box-selector
タブのコンテンツを囲っているクラス：js-tab-box-content
⑥「モーダルを表示」ボタンを押すとモーダルをフェードインで表示してください。また、×ボタンや、黒い半透明の背景を押すとモーダルがフェードアウトするようにしてください。
表示するモーダルのクラス：js-modal
モーダルを発動するボタン：js-modal-trg
モーダルを消すためのクラス；js-modal-close
⑦TOPに戻るボタンを押すとページの一番上に戻るようにしてください。その際に0.5秒ほどかけてゆっくりとページ上部に戻るような挙動にしてください（スムーススクロール）
TOPに戻るボタンのクラス：.js-go-top
注意事項
- スタイルはあらかじめ用意していますが、自分で作成、編集して構いません。
- HTMLやCSSは処理実装のためにカスタムして構いません
ヒント
・タブボックスはeq()を使って実装する想定です
コメント