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

JavaScriptでiPhone14の画像切替実装

SHARE

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

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

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');
        })
    }
})

前の記事

【初心者向け】CSSとJavaScriptで基本的なアニメーシ…

次の記事

GSAPでカウントアップを実装【トリガー位置の調整も簡単】