【JavaScript】数行で画像切り替えを実装 – iPhone14 Proの商品紹介ページ再現

今回はJavaScriptを使用して、iPhone14 Proの商品紹介Webページに使用されている画像切り替えを再現してみました。

コピペしてすぐに実装できるようにCodePenによるデモを用意しています。そこまで難易度としては難しい実装ではございません。ぜひ最後までご覧いただけると嬉しいです。

目次非表示

1.実装イメージ
2.HTML
3.CSS
4.JavaScript

1.実装イメージ

実装イメージは以下の通りです。

See the Pen iPhone14 colors by りょーすけ (@s_ryosuke_1242) on CodePen.

画像横のタブを押すことで選択した色に応じて画像が切り替わるようになっています。

2.HTML

HTMLはコチラの通りになっています。特段変わったところはなくcontainer要素の中に画像リストとタブが含まれています。

<div class="spacer"></div>
<div class="container">
    <ul class="list-images">
        <li class="gallery-item is-active"><img src="https://www.apple.com/jp/iphone-14-pro/images/overview/colors/gallery_deep_purple__eog5f5067tw2_large.jpg"></li>
        <li class="gallery-item"><img src="https://www.apple.com/jp/iphone-14-pro/images/overview/colors/gallery_gold__gctbxs1dpb6m_large.jpg"></li>
        <li class="gallery-item"><img src="https://www.apple.com/jp/iphone-14-pro/images/overview/colors/gallery_silver__e5nps2bqzt26_large.jpg"></li>
        <li class="gallery-item"><img src="https://www.apple.com/jp/iphone-14-pro/images/overview/colors/gallery_space_black__dnuzmbh1d7ki_large.jpg"></li>
    </ul>
    <ul class="tab-lists">
        <li class="tab is-active">ディープパープル</li>
        <li class="tab">ゴールド</li>
        <li class="tab">シルバー</li>
        <li class="tab">スペースブラック</li>
    </ul>
</div>
<div class="spacer"></div>

3.CSS

次にCSSです。container要素にdisplay:flex;を充てることで画像とタブを横並びにしています。

予め画像を囲む.gallery-itemは予めopacity:0;で透明にしておきます。is-activeクラスが付与された時にopacity:1;にすることでタブ切り替えを実現しています。

同様にタブの.tabの文字色はデフォルトでグレー(#424245)にしておきます。

またtransitionでアニメーションの速度を指定しておきましょう。

本家Appleのサイトの動きを再現するためにgallery-itemにtransition-delay:.2s;を充てているのが重要なポイントとなっています。ぜひ秒数を変えて違いを楽しんでみてください✨

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,body,main{
    width: 100%;
    height: 100%;
    background-color: #000;
    font-family: 'Noto Sans JP', sans-serif;
}
li{
    list-style: none;
}
.spacer{
    width: 100%;
    height: 40vh;
}
.container{
    display: flex;
    align-items: center;
    justify-content: center;
}
.list-images{
    width: 100%;
    height: 1022px;
    max-width: 406px;
    max-height: 1022px;
    padding: 0 20px;
    position: relative;
}
.gallery-item{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition:opacity .4s;
    transition-delay: .2s;
}
.gallery-item.is-active{
    opacity: 1;
}
.gallery-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tab-lists{
    width: fit-content;
    height: 100%;
    margin-left: 60px;
}
.tab-lists .tab{
    margin-right: auto;
    color: white;
    font-weight: 700;
    color: #424245;
    font-size: 22px;
    cursor: pointer;
    transition:color .3s;
    transition-delay: .1s;
}
.tab + .tab{
    margin-top: 10px;
}
.tab.is-active{
    color: #cecece;
}

4.JavaScript

最後にJavaScriptです。
2、3行目で画像リストとタブリストの各要素を取得しています。

5～13行目でクリックした要素に応じてクラス「is-active」の付け替えを行っています。

2、3行目において要素を配列で取得しているためタブを押した際にインデックス番号[i]を取得することが可能となっています。

例えば3番目のタブ（i=2）を押した際は全要素のis-activeクラスを外し、tabs[2]、items[2]にis-activeクラスを付与するといった処理になっています。

window.addEventListener('load',function(){
    var items = document.querySelectorAll('.gallery-item');
    var tabs = document.querySelectorAll('.tab');

    for (let i = 0; i < tabs.length; i++) {
        tabs[i].addEventListener('click',function(){
            for (let j = 0; j < tabs.length; j++) {
                tabs[j].classList.remove('is-active');
                items[j].classList.remove('is-active');
            }
            items[i].classList.add('is-active');
            tabs[i].classList.add('is-active');
        })
    }
})

今だけ無料プレゼント企画開催中！

現在Twitterにて実務で使ったGSAPの実装事例集を無料プレゼントしています！
・アニメーションナンモワカラン
・何から手つけたらいいのかワカラン
・毎日ツイートしてたWebアニメーションはどうやって実装していたの？
そういった方々の疑問や悩みを解決できるかもしれません

https://twitter.com/e__WebAnimation/status/1629405850275299328

GSAPを使うメリット

・簡単にアニメーション作成が可能
・導入方法が簡単
・プラグインが豊富で特に『ScrollTrigger』が高機能

などなどのメリットがあります！

アニメーション案件等、単価の高い案件ほど使われているライブラリとなります

ぜひ企画に参加して一味レベルが違うコーダーを目指しましょう！