이미지를 클릭하면 색상이 랜덤하게 변경

1. 이미지 색상 변경 기능의 결과물

 

표시된 티셔츠 이미지를 클릭할 때마다 티셔츠의 표면색상이 랜덤하게 변경되는 기능을 구현했습니다.
동영상을 확인하면 기능의 결과물을 확인할 수 있습니다.

 

2. 필요한 이미지

 

주로 의류 쇼핑몰에서 사용자가 의류의 색상을 변경해 가면서 확인할 수 있는 기능으로 응용해 보면 좋을 것 같습니다.

의류제품을 아래와 같이 찍어서 준비했다고 가정합시다.

 

3. HTML 구조

 

HTML 태그 구조는 IMG 태그와 배경요소가 되는 div 태그 2개로만 구성된 심플한 구조입니다.

<link rel="stylesheet" href="./css/image_color_change.css">
<img src="./img/image_color_change.png">
<div id="background"></div>

4. CSS 스타일링

 

페이지의 전체 레이아웃을 구성하는 역할을 담당하는 스타일입니다.

(1) * 로 모든 요소를 초기화합니다.

(2) 이미지를 정중앙에 배치하기 위해서 body요소를 flex 지정을 하였습니다.

      그리고 justify-content와 align-items를 center로 화면 가운데 배치했습니다.

(3) body 태그에 user-select:none으로 설정한 것은, 빠르게 클릭했을 때 이미지가 선택된 상태를 방지하기 위해서입니다

(4) #background 요소에 mix-blend-mode:hue;로 설정한 것은 아래 레이어의 명도와 채도는 유지하면서 색조만 변경되는 속성입니다.

@charset "UTF-8";
*{
    margin:0;
    padding:0;
}
html,body{height:100%;}
body{
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:center;
}
#background{
    position:absolute;
    top:0;
    width:100%;
    height:100vh;
    mix-blend-mode:hue;
}

5. 자바스크립트(Javascript) 기능 구현

 

클릭 이벤트를 정의하고 콜백함수 안에서 #bg 객체의 배경을 랜덤하게 수정되는 내용의 코딩을 작성했습니다.

const bg = document.getElementById('background');

bg.addEventListener('click',function() {
    bg.style.backgroundColor = 'rgba('+randomColor()+','+randomColor()+','+randomColor()+')';
});

function randomColor(){
    return Math.floor(Math.random() * 255);
}