Before & After 기능 만들기

프로젝트의 목표는 사용자가 원하는 한 이미지의 배경을 도시와 숲 두가지의 배경으로 자유롭게 변환하는 기능을 만드는 것이었습니다. 이 기능을 구현하기 위해서, 사용자는 화면 중앙의 막대를 조절하여 변환 영역을 조절할 수 있도록 설계하였습니다.

이미 실사이트에는 기존에 있는 코드를 활용하여 이를 구현할 수 있었어요. 이 코드는 화면 영역 내에서 마우스를 움직이는 것만으로도 기능을 실행할 수 있게 해줬습니다.

그런데, 프로젝트를 마친 뒤에 든 생각이 있었는데요. "사용자가 막대를 클릭했을 때에만 변환이 실행되면 어떨까?"라는 생각이었습니다. 저는 이런 방식이 실제로 사용되는 경우가 더 많지 않을까 생각했어요. 그래서, 클릭 시에만 움직일 수 있는 기능을 직접 구현해보기로 결정했습니다.

처음 페이지가 펼쳐지면 나오는 화면입니다.
중앙에 하얀 선이 양쪽 두 개의 이미지 영역을 조절하는 막대이구요

각각 막대를 오른쪽, 왼쪽으로 옮겼을때 영역입니다.

사용 기술

별도의 라이브러리를 사용하지 않고 바닐라 자바스크립트와 HTML, CSS를 같이 구성해주었습니다.

효과 만들기

기능 원리 파악하기
before after 기능에서 중앙에 있는 구분되는 표시로 양쪽에 이미지를 한 눈에 볼 수 있도록 하는것이 목적이기때문에 before나 after의 이미지 중 하나의 이미지를 아래쪽에 펼치고 나머지 하나의 이미지를 위에 올려 올라간 이미지의 영역을 조절하면 되는 구조라 생각하고 바로 해당 구조로 코드를 짰습니다.

es6
개인적으로 공부하고 있는 최근 떠오르고 있는 es6를 손에 익히기 위해 기능중 하나인 es6에 있는 화살표 함수를 적용해보았습니다.
하지만 화살표 함수를 사용하고 브라우저에서 확인을 했을때 문제점이 발생했죠
mousedown과 mouseup에 따로 스크립트를주어 가운데에 있는 막대를 누르고 있는 동안에만 영역이 움직이도록 설정해주었고 마우스를 떼거나 다른 영역을 클릭할 시에는 해당 기능이 발생하지 않도록 만들었습니다.

빠지면 섭섭한 IE
IE 11버전에서 확인을 했을때 스크립트가 작동하지 않는 문제가 발생했습니다.
IE가 업데이트가 된지 오래 됐기 때문에 화살표 함수를 지원하지 않는 문제였는데 이 문제를 해결할 가장 간단한 방법은 화살표함수를 다시 function을 넣어주어 기존 스크립트를 작성할 때 처럼 만들어주는거였습니다.
하지만!!
es6기능중 화살표함수 딱 하나를 넣었는데 이걸 없애버리면 es6를 이용한것이 아니게 되기 때문에 다른 방법을 찾기로 했습니다.

babel!!!!!!!
구글에서 es6를 ie에서 인식할 수 있는지 검색을 하니 바로 나오더군요
babel에 대해 간략하게 설명하면
ECMAScript 2015+ 코드를 이전 JavaScript 엔진에서 실행할 수있는 이전 버전과 호환되는 JavaScript 버전으로 변환하는 데 주로 사용되는 무료 오픈 소스 JavaScript 트랜스 컴파일라고 나와있습니다. - 위키백과 (영문) 번역 https://en.wikipedia.org/wiki/Babel_(transcompiler)
babel에서 오픈소스로 나와있는 browser.js를 걸고 스크립트가 들어가는 태그에 type="text/babel"을 적어주니 스크립트가 아주 잘 먹혔습니다!!

실제 코드

HTML

<body>
    <div class="swipe-box" id='swipebox'>
        <div class="bg-before"> <!-- 뒤에서 움직이지 않는 이미지 -->
            <div class="bg_img"></div>
            <img src="../asset/images/city_img.png" alt="img" height="100%" draggable="false">
        </div>
        <div class="bg-after" id="afterBg"><!-- 변경바와 함께 너비가 변하는 이미지 -->
            <div class="bg_img"></div>
            <img src="../asset/images/outdoor_img.png" alt="img" height="100%" draggable="false">
        </div>
        <div class="control-bar" id="control_bar"> <!-- 배경 위치 조정 막대 -->
            <div class="control-color"></div>
        </div>
    </div>
</body>

CSS

<style type="text/css">
        body {
            -ms-user-select: none;
            -moz-user-select: -moz-none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            user-select: none;
        }

        .swipe-box {
            width: 100%;
            height: 50vh;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: #eddaba;
        }

        .bg-before {
            height: 100%;
            width: 100%;
            position: absolute;
        }

        .bg-before .bg_img {
            width: 100vw;
            height: 100%;
            background: #000000 url("../asset/images/city_img.png") center/cover no-repeat;
        }

        .bg-after {
            height: 100%;
            width: 50%;
            position: absolute;
            overflow: hidden;
        }

        .bg-after .bg_img{
            width: 100vw;
            height: 100%;
            background: #000000 url("../asset/images/outdoor_img.png") bottom/cover no-repeat;
        }

        .bg-before img,
        .bg-after img {
            width: 100vw;
            height: 100%;
            object-fit: contain;
            opacity: 0;
        }

        .control-bar {
            height: 100%;
            width: 20px;
            background-color: #ffffff;
            position: absolute;
            left: 50%;
        }
</style>

JavaScript

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>
<script type = "text/babel">
let controlBar = document.getElementById('control_bar'),
    swipeBox = document.getElementById('swipebox'),
    afterBg = document.getElementById('afterBg'),
    swipeVal = false

// controlBar.addEventListener('mousedown', function(e) {
//     swipeVal = true
//     swipe(e)
// })

controlBar.addEventListener('mousedown', (e) => {
    swipeVal = true
    swipe(e)
})


controlBar.addEventListener('mouseup', (e) => {
    swipeVal = false
})

function swipe(e) {
    swipeBox.addEventListener('mousemove', (e) => {
        if (swipeVal) {
            controlBar.style.left = (e.clientX - (controlBar.offsetWidth / 2)) + 'px'
            afterBg.style.width = (e.clientX - (controlBar.offsetWidth / 2)) + 'px'
        }
    })
}
</script>

만들고 나며..

보유하고있는 맥이 없어 사파리에서 어떻게 표시되며 어떤 식으로 움직이게될지 확인을 못한 부분이 아쉬웠던것 같아요
크롬에서 실행할때는 매끄럽게 잘 움직였지만 IE에서나 엣지는 약간의 버벅임이 있는 문제도 살짝 아쉬웠습니다

이런 부분에 대한 디테일한 부분까지 잡아주고 싶었는데 아직 많이 부족했던 경험이었지만 자주 볼 수 있는 효과를 직접 만들어보니 이런 효과에 대한 작동 원리와 구조를 어느정도 이해할 수 있는 경험이 된 것 같습니다!

저작자표시 비영리 동일조건

'Develop Log > 효과 만들어보기' 카테고리의 다른 글

효과 만들기 - 1. 로딩 효과 만들기 (0)	2023.08.10
텍스트 자동 롤링효과 만들기 (0)	2023.07.15

잡초같은 개발일지

Before & After 기능 만들기