Before & After 기능 만들기

jsg3121·2020년 3월 25일
0
post-thumbnail

1. 만들게 된 배경

한 이미지의 배경을 도시와 숲 두가지의 배경으로 자유롭게 변환해주어야 하는 기능을 만들어야 했습니다.
가운데 영역을 조절하는 막대로 화면의 영역을 변환되는 기능으로요.

실사이트에는 기존에 있는 코드가 있어 해당 코드로 영역 내에서 마우스를 움직이기만 해도 기능이 실행되도록 만들었는데 만들고 난 뒤 막대를 클릭했을때 기능이 실행되지 않기 때문에 클릭시에만 움직이는게 더 많이 쓰이지 않을까.. 하는 생각이 들어 클릭시에만 움직일 수 있는 기능을 만들어보고 싶어 만들게 되었습니다.

2. 만들어볼 효과


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



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

3. 개발 환경

jQuery가 아닌 자바스크립트를 이용하여 코딩하였고 es6에 있는 기능중 하나인 화살표 함수를 사용해서 작성했습니다.
HTML파일에서 CSS를 같이 구성해주었습니다.

4. 화면 구성하기

** 모바일이나 태블릿화면 대응은 아직 세세하게 만지지 않아 깨질 수가 있습니다.

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>

JS

<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>

5. 만들어진 과정

1. 기능 원리 파악하기

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

2. es6

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

3. 빠지면 섭섭한 IE

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

4. babel!!!!!!!

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

babel에서 오픈소스로 나와있는 browser.js를 걸고
스크립트가 들어가는 태그에 type="text/babel"을 적어주니 스크립트가 아주 잘 먹혔습니다!!

6. 결과

크롬, IE, 엣지 모두 해당 막대를 눌러 화면이 움직이는것을 확인했습니다.
다른 영역을 클릭할 시 스크립트가 동작하지 않는것도 확인했으며 생각보다 길지 않은 스크립트에 살짝 놀랐습니다.
해당 기능을 만들어보기 전에는 복잡하고 어려워 코드도 길게 적용이 되어 있을거라고 생각이 됐기 때문입니다.
역시 직접 만들어보면서 확인하는게 가장 정확한 방법인걸 또 한번 뼈져리게 느끼게 됐네요 ㅎㅎ

7. 아쉬운점

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

8. 마치며

두번째 게시글을 올리는건데 해당 기능을 직접 이용할 수는 없더라도 코드를 작성하실 때 참고라도 됐으면 좋겠습니다.
제가 생각했던 기능들중에 큰 기능축에 속하는 거라 다른 기능들을 만들때보다 더 뿌듯함이 생기고 코드는 적더라도 코드를 짜면서 생기는 자잘한 오류들로 인해 알고있던부분도 더 자세하게 공부하고 새로운 기능도 적용해볼 수 있는 경험이였습니다.
다음에도 또 새로운 기능을 가지고 돌아오겠습니다.

긴 글 읽어주셔서 감사합니다.

profile
우린 답을 찾을것이다. 항상 그랬듯이.

관심 있을 만한 포스트

0개의 댓글