It's bean o'clock
더치커피와 원두커피 전문 쇼핑몰 빈어클락입니다.
패럴랙스 스크롤링 효과는 화면을 스크롤할 때 애니메이션 효과를 주는 것으로 pc 용 사이트에서 주로 사용한다
원리 살펴보기
패럴랙스 스크롤링의 기본은 배경과 화면 각 요소의 위치나 움직이는 방향, 움직이는 시간 등을 달리해 시차를 줌으로써 애니메이션 효과를 내는 것이다
jQuery 소스를 추가해 패럴랙스 스크롤링 효과 만들기
배경이미지가 삽입된 요소에 data-type나 data-speed 속성을 추가하여 페럴랙스 효과를 만든다
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>패럴랙스 스크롤링</title>
<style>
*, html {
margin:0;
padding:0
}
#sky {
background:url('images/bg1.png') 50% 0;
position:relative;
width:100%;
height:1500px;
margin:0 auto;
}
#sky article {
position:absolute;
top:750px;
left:40%;
}
</style>
</head>
<body>
<section id="sky" data-type="background" data-speed="0.5">
<article><img src="images/balloon.png"></article>
</section>
<script src="js/jquery-2.2.4.min.js"></script>
<script>
/*jQuery로 패럴랙스 스크롤링 구현*/
$(document).ready(function(){
var wd = $(window);
$('section[data-type="background"]').each(function(){
var bg = $(this);
$(window).scroll(function(){
var yPos = -(wd.scrollTop()/bg.data('speed'));
var coords = '50%' + yPos + 'px';
bg.css({backgroundPosition:coords});
});
});
});
</script>
</body>
</html>
parallax-scroll 플러그인을 사용해 패럴랙스 스크롤링 효과 만들기
Cold brewed coffee
믿을 수 있는 고품질의 더치커피를 찾으신다면
지금 바로 주문하세요!
Roasted bean
주문 후 로스팅한 신선한 원두를
만나보고 싶다면 지금 바로 주문하세요!
$(function() {
$('.scroll').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:$(this.hash).offset().top},500);
});
$(window).resize(function(){
$('.container').width($(window).width()).height($(window).height());
$('.content').each(function(){
$(this).css('margin-left',($(this).width()/2*-1)+'px').css('margin-top',($(this).height()/2*-1)+'px');
});
});
setTimeout(function(){$(window).resize()},1000);
$('.bg-holder').parallaxScroll({
friction:0.3
});
$('.icon img').hover(function() {
$(this).attr('src', $(this).attr('src').replace('.png', '_over.png'));
}, function() {
$(this).attr('src', $(this).attr('src').replace('_over.png', '.png'));
});
});
'프론트 개발' 카테고리의 다른 글
| [ FE ] Do it! 프런트엔드 웹디자인 입문 09-2 jQuery 플러그인을 사용해 그리드 레이아웃 만들기 (0) | 2026.02.24 |
|---|---|
| [ FE ] Do it! 프런트엔드 웹디자인 입문 09-1 다단 칼럼을 사용해 그리드 레이아웃 만들기 (0) | 2026.02.23 |
| [ FE ] Do it! 프런트엔드 웹디자인 입문 08-1 원페이지 사이트 만들기 (0) | 2026.02.19 |
| [ FE ] Do it! 프런트엔드 웹디자인 입문 07-4 가변 동영상 (0) | 2026.02.18 |
| [ FE ] Do it! 프런트엔드 웹디자인 입문 07-3 가변 이미지 (0) | 2026.02.17 |