[html, css, javascript] 심심해서 만들어본 메인 화면 효과

멋진 홈페이지들을 탐색하던 중 괜찮아 보이는 효과를 발견해서 직접 구현해 보았습니다.

 

구현된 화면

다음과 같은 효과를 구현하기 위한 구조와 방식은 다양하겠지만, 

저는 단순하게 구현하였습니다. 

 

div 안에 inner_div를 두고 

첫번째줄의 inner_div에게는 left -100% 를 두번째 줄의 inner_div에게는 left 100%를 주어,

동시에 left: 0이 될때 다음과 같은 액션이 일어나도록 하였습니다. 

 

class하나로 컨트롤 했기 때문에 javascript은 단순히 class만 추가해 주면 됩니다. 

 

html 구조

1. html

<div class="wrapper" >
    <button class="button">Click Me</button>
    <div class="container" style="background-image:url('./bg.jpg')">
    </div>

    <!-- divider s -->
    <div class="divider">
        <div class="row to_left">
            <div class="block"><div class="inner-block"></div></div>
            <div class="block"><div class="inner-block"></div></div>
            <div class="block"><div class="inner-block"></div></div>
            <div class="block"><div class="inner-block"></div></div>
        </div>
        <div class="row to_right">
            <div class="block"><div class="inner-block"></div></div>
            <div class="block"><div class="inner-block"></div></div>
            <div class="block"><div class="inner-block"></div></div>
            <div class="block"><div class="inner-block"></div></div>
        </div>
    </div>
    <!-- divider e -->
</div>

2. css

html,body{
    width:100%;
    height:100%;
}

* {
    padding:0;
    margin:0;
}

.wrapper{
    position: relative;
    width:100%;
    height:100%;
}

.container{
    width:100%;
    height:100%;
    background-size: cover;
}

.button{
    position: fixed;
    top:20px;
    right:20px;
    z-index:100;
    padding:20px;
    font-size: 15px;
}

.divider{
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    height:100%;
    z-index:10;
    background:rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;    
}

.divider .row{
    flex: 1;
    display:flex;
}

.divider .row:first-child{
    border-bottom: 1px solid rgba(0,0,0,0.4);
}

.divider .row .block{
    position: relative;
    overflow:hidden;
    border-right:1px solid rgba(0,0,0,0.4);
}


.divider .row .block:nth-child(1),
.divider .row .block:nth-child(4){
    flex: 1;
}

.divider .row .block:nth-child(2),
.divider .row .block:nth-child(3){
    flex: 2;

}

.divider .row .inner-block{
    position: absolute;
    top:0;
    left:0;
    z-index: 1;
    width:100%;
    height: 100%;
    background-color:lightgrey;
    transition: left 0.3s;
}

.divider .row.to_left .inner-block{  /* 첫 번째 줄 left -> right */
    left:-100%;
}

.divider .row.to_right .inner-block{ /* 두 번째 줄 right -> left */
    left:100%;
}

.divider .row.to_right.active .inner-block,
.divider .row.to_left.active .inner-block{
    left:0;
}

3. script

var btn = document.querySelector('.button');
var rows = document.querySelectorAll('.row');

btn.addEventListener('click', function(){
if(rows[0].classList.contains('active')){
    for(var i=0; i< rows.length; i++){
        rows[i].classList.remove('active');            
    }    
} else {
    for(var i=0; i< rows.length; i++){
        rows[i].classList.add('active');            
    }    
}
});

 

심심해서 만들어 본 화면이지만 어디에 쓸 데가 있는지 모르겠네요. 😂