jQuery入門--様々なホバーエフェクト

様々なホバーエフェクト

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム
jquery-3.7.1.min.jsとjquery-ui.min.jsを読み込む

＜!--jquery--＞リンク先

＜script src="https://code.jquery.com/jquery-3.7.1.min.js"

integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=

" crossorigin="anonymous"＞＜/script＞

 

＜!--jquery UIは拡張型--＞リンク先

＜script src="https://code.jquery.com/ui/1.14.1/jquery-ui.min.js"

integrity="sha256-AlTido85uXPlSyyaZNsjJXeCs07eSv3r43kyCVc8ChI=

" crossorigin="anonymous"＞＜/script＞

 

【ホバーエフェクト】
ホバーエフェクトとは、ボタンや画像、リンクなどにマウスオーバー（何らかの要素の上にマウスカーソルを重ねること）したときに、色や形などに変化をもたらすテクニック

 

【ホバーエフェクトの仕様条件】
1.画面を下図の様に、全部で12個のボタンを用意する。
2.最初の1行目のボタンの機能
→マウスオーバーすると、そのボタンの背景色が徐々に変わる
→マウスアウトすると、徐々に背景は元に戻るが、文字は黒に変わる
3.2行目のボタンの機能
→マウスオーバーすると、外枠から徐々に色が現れる

→マウスアウトすると、徐々に背景は元に戻るが、文字は黒に変わる
3.3行目のボタンの機能
→マウスオーバーすると、色面が左側からスライドインして、背景色と文字の色が変わる。
→マウスアウトすると、もとに戻る。

【プログラムを書く】
C04フォルダ内に1フォルダを作り、更に「index.html」ファイルとcss・jsフォルダに作る。{}.hintrcはVScoodが勝手に作る。

【index.html】ファイルにコードを書く

このhead部で、外部からJSとCSSなどを呼び込んでいる

＜body＞部

ヘッダーを書き込んである。背景色は白色

メインはボタンを3✕4に並べる部分で、背景は緑系
spanタグは要素のグループ化を行うタグ。divとspanタグの違いは、block要素と、inline要素の違いにある。block要素は大きな塊のため、横の塊のinline要素を含む事ができる。

フッター
role属性はアクセシビリティに関するもので、読み上げる用

【CSS】
「main.css」ファイルにコード書く

/*

 * Base

 */

html {

    /*フォントの種類*/

    "Helvetica Neue", "Arial", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;

    font-size: 16px;

    line-height: 1.5;

}

body {

    background-color: #656565;

}

img {

    vertical-align: middle;

}

button {

    outline: none;

}

/*クロムでは無視されるが、ページ全体に適応される*/

::-moz-selection {

    background: #b3d4fc;

    /*テキストに影を付ける*/

    text-shadow: none;

}

/*クロムでは無視されるが、ページ全体に適応される*/

::selection {

    background: #b3d4fc;

    text-shadow: none;

}

.page-header {

    background-color: #fff;

}

.page-header h1 {

    width: 90%;

    height: 80px;

    margin: 0 auto;

    padding-left: 10px;

    font-size: 30px;

    font-weight: normal;

    line-height: 80px;

    letter-spacing: 0.1em;

    color: #e9c706f8;

}

.page-main {

    /*親要素の位置を基準に配置する*/

    position: relative;

}

/*page-mainクラス直下の子要素:divのみ*/

.page-main > div {

   padding: 50px 0 100px;

}

.page-main > div h2 {

    color: #410505;

    text-align: center;

    margin: 0 0 50px;

    /*フォントの太さ：ノーマル*/

    font-weight: normal;

    letter-spacing: 0.15em;

}

#buttons1 {

    background-color: #16ce72;

}

#buttons1 .inner {

    /*親要素の位置と同じくする。つまり、buttons1と同所*/

    position: relative;

    width: 800px;

    margin: 0 auto;

}

/*ボタン全体の設定*/

#buttons1 button {

    display: block;

    /*要素を左寄せにする。横方向レアウト用 */

    float: left;

    width: 180px;

    height: 80px;

    margin: 0 10px 20px;

    padding: 0;

    font-size: 16px;

    /*文字間隔*/

    letter-spacing: 0.15em;

    color: #e9c706f8;

    background-color: #fff;

    /*要素の境界線*/

    border: none;

    /*角を丸める*/

    border-radius: 20px;

}

.page-footer {

    background-color: #070707;

}

.page-footer small {

    display: block;

    color: #fff;

    font-size: 20px;

    text-align: right;

    width: 90%;

    margin: 0 auto;

    height: 120px;

    line-height: 120px;

    letter-spacing: 0.15em;

}

.page-footer a {

    color: #fff;

    text-decoration: none;

}

/*

 * Helpers

 */

/* Clearfix:✗✗は疑似クラスで親要素にclearfixで杭を打ち込んで高さを維持する*/

/*空のBoxをテーブル要素に使い、回り込みを防ぐ、また複数クラスを「,」で区切る*/

.clearfix:before,

.clearfix:after {

    /*疑似要素を有効化する*/

    content: " ";

    /* 要素を横並びにする*/

    display: table;

}

/*あらゆる方向のfloatを解除する*/

.clearfix:after {

    clear: both;

}

/* #button1 2行目 */

#buttons1 button {

    border: solid 0px rgba(174,94,155,1.0);

}

/* #button1 2行目 */

#buttons1 button {

    position: relative;

}

#buttons1 button .bg {

    position: absolute;

    top: 0;

    left: 0;

    width: 0;

    height: 100%;
    overflow: hidden;→要素から、はみだした部分を消す

}

#buttons1 button span span {

    display: block;

    width: 224px;

    height: 80px;

    line-height: 80px;

    color: #fff;

    background-color: #ae5e9b;

    border-radius: 20px;

}

【JS】
「main.js」ファイルにコードを書く

$(function(){

    //

    var duration = 1000;

    // buttons1 ----------------------------------------

    // buttons1  1行目 （最初から4番目まで）

    $('#buttons1 button:nth-child(-n+4)')

        .on('mouseover', function() {

            //stopメソッドはアニメの途中キャンセル----

            $(this).stop(true).animate({

                backgroundColor: '#ae5e9b',

                color: '#fff'

            }, duration);

        })

        //マウスが外された時の処理--------

        .on('mouseout', function(){

            $(this).stop(true).animate({

                backgroundColor: '#fff',

                color: '#000000'

            }, duration);

        });

    // buttons1  2行目(5番目から8番目)

    $('#buttons1 button:nth-child(n+5):nth-child(-n+8)')

        .on('mouseover', function(){

            $(this).stop(true).animate({

                borderWidth: '12px',

                color: '#ae5e9b'

            }, duration, 'easeOutSine');

        })

         //マウスが外された時の処理

        .on('mouseout', function(){

            $(this).stop(true).animate({

                borderWidth: '0px',

                color: '#000000'

            }, duration, 'easeOutSine');

        });

    // buttons1  3行目（9番目から12番目）

    $('#buttons1 button:nth-child(n+9)')

        .on('mouseover', function(){

            //find()は子孫要素から> spanを見つけ出す事

            $(this).find('> span')

                .stop(true).animate({width: '100%'}, duration

                    , 'easeOutQuad');

        })

        //マウスが外された時の処理

        .on('mouseout', function(){

            $(this).find('> span')

                .stop(true).animate({width: '0%'}, duration,

                    'easeOutQuad');

        });

});