DIV 슬라이드 효과 만드는 방법
3단계로 나누어서 슬라이드 효과 만드는 방법에 대하여 알아 보겠습니다.
그리고 4단계에서는 적요 된 모습을 확인 해 보도록 하겠습니다. 적용 된 모습을 먼저 알고 싶다면 Step4 부분을 확인하시면 됩니다.
Step1
먼저 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 class="divBase divSlide">
<div>슬라이드 효과 버튼</div>
<div></div>
</div>
</div>
.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 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 슬라이드 효과 구현 하는 것이 끝이 났습니다.
'프로그래밍 > HTML, CSS, JavaScript' 카테고리의 다른 글
[CSS] position:relative 속성 예제 (6) | 2018.03.24 |
---|---|
CSS Position 속성 이해하기 (1) | 2018.03.22 |
jQuery를 이용한 스크롤 이동하기 구현 방법 (2) | 2018.02.24 |
CSS를 이용한 레이어 그림자 효과 주기 (2) | 2018.02.22 |
티스토리 폴더 형식의 카테고리 달기 (4) | 2018.02.21 |