본문 바로가기
프로그래밍/HTML, CSS, JavaScript

CSS를 이용한 DIV 슬라이드 효과 주기

by [바가지] 2018. 3. 13.

DIV 슬라이드 효과 만드는 방법

 

슬라이드 효과 버튼

 

3단계로 나누어서 슬라이드 효과 만드는 방법에 대하여 알아 보겠습니다.

그리고 4단계에서는 적요 된 모습을 확인 해 보도록 하겠습니다. 적용 된 모습을 먼저 알고 싶다면 Step4 부분을 확인하시면 됩니다.

 

Step1

먼저 div를 이용하여 효과를 적용 할 버튼 모양을 만들어 보도록 하겠습니다.

단순하게 사각형 모양의 중앙에는 '슬라이드 효과 버튼' 이라는 텍스트를 입력 하였습니다. 

초기화면

<div>
    <div class="divBase divSlide">
        <div>슬라이드 효과 버튼</div>
    </div>
</div>

 

<style>
.divBase {

    position: relative;
    top:100;
    width: 200px;
    height: 50px;

    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;

    cursor: default;

    font-size: 18px;
    text-align: center;
}

.divBase:hover {
    cursor: pointer;
}

 

.divSlide {
    overflow: hidden;
    border: #000000 solid 1px;
}

.divSlide div {
    position: absolute;
    text-align: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 15px;
}

</style>

 

※ CSS 속성 참고

 -webkit- : 크롬, 사파리에서 적용

 -moz- : 모질라(FireFox)에 적용

 -ms- : 마이크로소프트사의 인터넷익스플로러 에 적용

 -o- : 오페라 웹 브라우저에 적용

 box-sizing : border-box

   → border-box값으로 설정을 하면 width 또는 height 값이 padding, border 값에 영향을 받지 않습니다. 

 

 

Step2

슬라이드 효과를 주기 위해 div를 추가 합니다.

이 div의 핵심 속성은 transition(트랜지션) 입니다. transition 는 액션을 설정 시간동안 동작하도록 하는 역할을 합니다.

추가한 div 위치를 top -50으로 주면 문구가 들어 있는 div 위로 추가 div가 위치하게 됩니다.

이 div 위로 마우스가 위치 하면 0.2s 동안 top 0 까지 이동 시킵니다.

다시 마우스가 위치하지 않게 되면 0.1s 동안 top -50 까지 이동 됩니다.

이 부분이 슬라이드 효과의 핵시 부분입니다.

슬라이드 적용

<div>
    <div class="divBase divSlide">
        <div>슬라이드 효과 버튼</div>
        <div></div>
    </div>
</div>

 

<style>

.divSlide div:nth-child(1) {
    color: #000000;
    background-color: #ffffff;
}

.divSlide div:nth-child(2) {

    top: -50px;
    transition: top 0.1s ease;
    -webkit-transition: top 0.1s ease;
    -moz-transition: top 0.1s ease;

    background-color: #000000;
   }

.divSlide:hover div:nth-child(2) {
    top: 0px;
    transition: top 0.2s ease;
    -webkit-transition: top 0.2s ease;
    -moz-transition: top 0.2s ease;

 

</style>

 

※ CSS 속성 참고

 transition: top 0.2s ease;

   ease 천천히 시작후 변환효과가 빠르다가 다시 천천히 끝납니다.(기본설정입니다)
   ease-in 효과 시작 부분이 천천히 시작합니다.  
   ease-out 효과 끝 부분이 천천히 동작합니다.
   linear 동일한 속도로 적용 됩니다.

 

 

 

 

Step3

처음 추가한 문구를 포함하고 있는 div를 하나 더 추가 합니다.

다른 부분은 글씨 색이 흰색이라는 것 입니다. 그리고 opacity(불투명) 설정을 0으로 하여 보이지 않도록 초기 설정 해 둡니다.

슬라이드 div가 검정색으로 텍스트가 보이지 않도록 되기 때문에, 슬라이드 효과가 일어나는 동시에 추가한 div의 투명도를 1로 바뀌게 함으로 추가한 흰색 문구의 div가 보여지게 하는 것입니다.

슬라이드 된 모습

<div>
    <div class="divBase divSlide">
        <div>슬라이드 효과 버튼</div>
        <div></div>
        <div>슬라이드 효과 버튼</div>
    </div>
</div>

 

 

<style>

.divSlide div:nth-child(3) {
    color: #ffffff;
    opacity: 0;
    transition: opacity 0.1s ease;
    -webkit-transition: opacity 0.1s ease;
    -moz-transition: opacity 0.1s ease;
}


.divSlide:hover div:nth-child(3) {
    opacity: 1;
    transition: opacity 0.1s ease;
    -webkit-transition: opacity 0.2s ease;
    -moz-transition: opacity 0.2s ease;

</style>

 

 

Step4

구현 된 모습 입니다. 마우스를 올려 보세요.

슬라이드 효과 버튼
슬라이드 효과 버튼

 

이것으로 CSS속성으로 DIV 슬라이드 효과 구현 하는 것이 끝이 났습니다. 

 

반응형

댓글12