Apple iPhone14 clone 1탄

Apple iPhone14 clone

틈틈히 들어가는 애플 공식 홈페이지에서 iPhone 14 페이지의 모션들이 흥미로워 한 부분을 클론 코딩 해보았다!
이전 모션들은 스크롤 모션에 중점을 두어 gsap 라이브러리를 많이 활용했는데 이번 모션은 클릭 이벤트들이라 jQuery, JavaScript를 이용해 구현했다.

⚡️ 결과 화면

---

1. 먼저 모션을 구현하기 전에 아이폰 이미지들에 `mask`를 씌어주고 위치값을 정해주어야 했다.

⬜️ HTML

<section class="sc-main">
    <div class="group-title">
        <h2 class="title">놀라움 한가득.</h2>
    </div>
    <div class="grouo-color">
        <div class="color-txt">
            <span class="txt">미드나이트</span>
            <span class="txt">스타라이트</span>
            <span class="txt">레드</span>
            <span class="txt">블루</span>
            <span class="txt">퍼플</span>
            <span class="txt">옐로</span>
        </div>
        <ul class="color-list">
            <li class="color-item"><a href="" class="color-link midnight-btn"></a></li>
            <li class="color-item"><a href="" class="color-link starlight-btn"></a></li>
            <li class="color-item"><a href="" class="color-link red-btn"></a></li>
            <li class="color-item"><a href="" class="color-link blue-btn on"></a></li>
            <li class="color-item"><a href="" class="color-link purple-btn"></a></li>
            <li class="color-item"><a href="" class="color-link yellow-btn"></a></li>
        </ul>
    </div>
    <div class="group-phone">
        <div class="inner">
            <figure class="ph midnight"></figure>
            <figure class="ph starlight"></figure>
            <figure class="ph red"></figure>
            <figure class="ph blue on"></figure>
            <figure class="ph purple"></figure>
            <figure class="ph yellow"></figure>
        </div>
    </div>
</section>

⬜️ CSS

.group-phone .inner {
    position: relative;
    top: 110px;
    left: 50%;
    transform: translateX(-50%);
    width: 1144px;
    height: 574px;
    margin: auto 0;
    transform-origin: 50% 50%;
    transform: matrix(1.60574, 0.269279, -0.269279, 1.60574, -510.662, 196.845);
    transition: transform 1s cubic-bezier(0.645,0.045,0.355,1);
}
.group-phone .inner.on {
    transform: matrix(1.04327, -0.464493, 0.464493, 1.04327, -768.586, 130.872);
}
.group-phone .ph {
    transform-origin: 0 0;
    transition: transform 1s cubic-bezier(0.645,0.045,0.355,1);
}
.group-phone .midnight {
    position: absolute;
    transform: scale(0.51);
    top: 233px;
    left: 8px;
    width: 532px;
    height: 562px;
    background-image: url(../img/midnight.jpg);
    background-size: 532px 562px;
    background-repeat: no-repeat;
    mask-image: url(../img/mask_midnight.png);
    -webkit-mask-image: url(../img/mask_midnight.png);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 532px 562px;
    -webkit-mask-size: 532px 562px;
}
.group-phone .starlight {
    position: absolute;
    transform: scale(0.52);
    top: 118px;
    left: 111px;
    width: 518px;
    height: 582px;
    background-image: url(../img/starlight.jpg);
    background-size: 518px 582px;
    background-repeat: no-repeat;
    mask-image: url(../img/mask_midnight.png);
    -webkit-mask-image: url(../img/mask_starlight.png);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size:  518px 582px;
    -webkit-mask-size:  518px 582px;
}
/*...생략*/

마크업은 크게 아이폰 컬러 버튼을 눌러줄 영역과 아이폰 이미지가 나올 영역으로 나누었고 컬러 버튼을 눌러줄 영역은 텍스트, 컬러 리스트로 다시 한번 나누어 주었다.(텍스트 위치값을 따로 잡기 위해 분리)
ㅤ
css에서 아이폰 이미지에 mask를 씌어준 후 size와 repeat까지 설정해주었다. transform-origin, transform 속성을 이용해 초기 위치를 잡아주었고 (이때 matrix값은 애플 사이트의 절대값을 이용했다.)

◻ mask속성과 transform을 적용한 결과

2. 원하는 아이폰 컬러를 누루면 해당 컬러박스에 border가 생기는 부분을 foreach 반복문으로 구현했다.

⬜️ JS

const colorLink = document.querySelectorAll('.color-link');

colorLink.forEach(function(event) {

	event.addEventListener('click', function() {
        colorLink.forEach(function(e) {
            e.classList.remove('on')
        });
        event.classList.add('on')
	});
});

⬜️ CSS

.grouo-color .color-link {
    display: block;
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #f5f5f7 50%;
}
.grouo-color .color-link.on::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 28px;
    height: 28px;
    border: 2px solid #0071e3;
    border-radius: 50%;
    box-sizing: border-box;
} 
.color-link.midnight-btn {
    background-color: #31353a;
}
.color-link.starlight-btn {
    background-color: #f0ece8;
}
.color-link.red-btn {
    background-color: #e11c2a;
}
.color-link.blue-btn {
    background-color: #c0cfec;
}
.color-link.purple-btn {
    background-color: #e7d7e9;
}
.color-link.yellow-btn {
    background-color: #f5e488;
}

컬러 링크에 파란색 border가 생긴는 on클래스를 미리 만들어 준 후, 자바스크립에서 classList함수를 이용해 on클래스를 가져와주는데 이때 foreach문을 사용했다. 원하는 컬러를 누루면 해당 컬러에 border가 생기고 나머지 컬러 버튼은 border가 사라지는 것을 반복시켰다.

const colorLink = document.querySelectorAll('.color-link');
ㅤ
colorLink.forEach(function(event) {
ㅤ
	event.classList.add('on')
});

처음 js코드이다. 단순히 반복문 안에 클래스만 넣어주면 될거라 생각했다가 구현되지 않아 구글링을 하며 반복문 사용해 대한 이해를 높여 다시 코드를 짜 결과물을 만들었다.

3. 컬러 버튼을 누루면 아이폰 이미지를 감싸고 있는 박스의 transform을 변경 시키고, 함께 각 이미지의 스케일과 transform도 바꾸어 주었다.

$('.midnight-btn').click(function(){
    $('.group-phone .inner').css("transform","matrix(1.24651, 1.43395, -1.43395, 1.24651, -109.06, 498.232)");
    $('.midnight').addClass('on').siblings().removeClass('on');
})
$('.starlight-btn').click(function(){
    $('.group-phone .inner').css("transform","matrix(1.50347, 1.10184, -1.10184, 1.50347, -224.817, 414.932)")
    $('.starlight').addClass('on').siblings().removeClass('on');
})
$('.red-btn').click(function(){
    $('.group-phone .inner').css("transform","matrix(1.64561, 0.755092, -0.755092, 1.64561, -364.436, 307.051)")
    $('.red').addClass('on').siblings().removeClass('on');
})
$('.blue-btn').click(function(){
    $('.group-phone .inner').css("transform","matrix(1.60574, 0.269279, -0.269279, 1.60574, -510.662, 196.845)")
    $('.blue').addClass('on').siblings().removeClass('on');
})
$('.purple-btn').click(function(){
    $('.group-phone .inner').css("transform","matrix(1.3532, -0.192071, 0.192071, 1.3532, -649.839, 140.245)")
    $('.purple').addClass('on').siblings().removeClass('on');
})
$('.yellow-btn').click(function(){
    $('.group-phone .inner').css("transform","matrix(1.04327, -0.464493, 0.464493, 1.04327, -768.586, 130.872)")
    $('.yellow').addClass('on').siblings().removeClass('on');
})

제이쿼리로 click이벤트에서 css속성 변화와 addclass() 형제 선택자 siblings() 등을 사용했다. 컬러 버튼을 누루면 해당 컬러 이미지의 transform이 변경되고, 함께 컬러의 텍스트와 위 코드에서 설정해 주었던 파란색 border가 입혀지도록 했다.
해당 컬러 외에 다른 버튼의 on클래스를 삭제해주기 위해 removeclass를 추가해주었다.

자바스크립트로만 동적으로 버튼과 이미지들이 함께 움직일 수 있도록 구현하고 싶었지만 막히는 부분들이 있어 아쉬웠다. 작업마다 여유가 있다면 순수 자바스크립트로만 구현하려고 계속 공부하고 있으며, 다음번엔 자바스크립트도 이런 모션을 구현해 볼수 있도록 해야겠다.😸