opacity를 이용하여 스크롤을 내리면 서서히 나타나는 애니메이션 탑버튼 소스를 공유하겠습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<script>
$(document).ready(function() {
$(".btn_shop").hide();
$(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('.btn_shop').fadeIn();
} else {
$('.btn_shop').fadeOut();
}
});
});
});
</script>
|
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
body {
margin: 0;
padding: 0;
background-color: #181818;
}
.wrap {
height: 1200px;
}
.wrap>.btn_shop {
right: 30px;
bottom: 30px;
position: fixed;
}
|
cs |
|
1
2
3
4
5
|
<div class="wrap">
<a class="btn_shop" href="">
</a>
</div>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4f; text-decoration:none">Colored by Color Scripter
|
cs |
스크롤을 내리면 서서히 나타나는 제이쿼리 애니메이션 탑버튼 소스입니다 :) 경험을 공유하는 디자이너입니다. 앞으로도 실무에 도움되는 소스를 공유하겠습니다!
댓글