2017-07-21
<style>
.div1{
	background: url('/post_inc/bg_img/bg1.jpg') 50% 0 no-repeat fixed;
	width:100%;
	height:300px;
}

.div2{
	color:white;
	font-size:70px;
	text-align:center;
	padding:50px;
	line-height:120%;
	/*text-shadow: 7px 7px 10px #000;*/
}
</style>

<div class="div3"></div>
<div class="div1">
	<div class="div2">Welcome to b1ix blog!</div>
</div>
Welcome to b1ix blog!
간단한 parallax 스크롤을 만들어 보았다.
요점은 background를 fixed로 만드는 것이다.

참고로 이런 방식은 사파리에선 제대로 동작 안하니 참고 바란다.


//--------- 추가 2018.01.04

위에 설명된 parallax 스크롤 효과는 단순히 background를 fixed로 만드는걸로 낸 효과이고, 그러다보니, 단순히 창 넘어로 고정된 배경을 바라보는 느낌이다.
제대로된 parallax라면, 뒷배경이 완전한 fixed가 아닌, 스크롤을 내림에 따라서 뒷배경도 조금씩 내려와야 한다.
스크롤로 100px을 내려올때, 배경 이미지도 10px을 내려와야 원근감이 느껴지기 때문이다.
이런 효과를 쉽게 구현하기 위해서는, jquery 기반의 parallax.js를 사용 하면 편하다.

링크: http://pixelcog.github.io/parallax.js/

아래는 간단한 예제이다.
<script type="text/javascript" src="/post_inc/jquerys/parallax.min.js"></script>
<style>
.parallax_window_div1 {
	min-height: 400px;
	background: transparent;
	width:100%;
}
.div3{
	height:500px;
}
</style>

<div class="parallax_window_div1" data-parallax="scroll" data-image-src=""></div>
<div class="div3"></div>

<script>
$('.parallax_window_div1').parallax({imageSrc: '/post_inc/bg_img/bg1.jpg'});
</script>