스크롤에 따른 배경의 움직임 표현

최신의 홈페이지를 보면 화면을 스크롤 할 때 배경의 이미지가
스크롤에 비해 더 조금씩 움직임으로써 역동적으로 보이게 하는 기술을 볼 수 있습니다.
javascript로 스크롤에 따른 CSS의 background-position을 조정하여 구현한 기능으로
기존에 jQuery를 이용한 플러그인이 있어 소개합니다.

MIT라이선스를 가지고 있습니다.

홈페이지

• https://github.com/pederan/Parallax-ImageScroll

DEMO

• http://codepen.io/pederan/full/Hheuy

Install

bower로 설치할 경우

bower install Parallax-ImageScroll

npm으로 설치할 경우

npm install parallax-imagescroll

일반 사용법

Markup

<div class="img-holder" data-image="anImage.jpg"></div>

<section><p>Content that "slides" on top of the images</p></section>

<div class="img-holder" data-image="anotherImage.jpg">[optional content to be displayed on top of the images]</div>

javascript

jQuery와 jquery.imageScroll.js를 먼저 임포트한 후 설정값을 지정해 줍니다.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../jquery.imageScroll.js"></script>
<script>
      $('.img-holder').imageScroll({
//            image: null,
//            imageAttribute: 'image',
//            container: $('body'),
//            speed: 0.2,
//            coverRatio: 0.75,
//            holderClass: 'imageHolder',
//            holderMinHeight: 200,
//            extraHeight: 0,
//            mediaWidth: 1600,
//            mediaHeight: 900,
//            parallax: true,
//            touch: false
      });
  </script>

모바일 사용법

Markup

일반이미지와 모바일이미지를 분기할 수 있게 2개를 작성

  <div class="img-holder" data-image="img/german_landscapes-1600x900.jpg" data-image-mobile="img/german_landscapes-800x450.jpg"></div>  

<section><p>Content that "slides" on top of the images</p></section>

 <div class="img-holder" data-image="img/japan_digital_nature-1680x1050.jpg" data-image-mobile="img/japan_digital_nature-800x500.jpg" data-width="1680" data-height="1050">[optional content to be displayed on top of the images]</div>

javascript

Modernizr.touch일 경우 모바일 이미지로 분기하여 로딩함

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../jquery.imageScroll.js"></script>
    <script>
        var touch = Modernizr.touch;
        $('.img-holder').imageScroll({
            imageAttribute: (touch === true) ? 'image-mobile' : 'image',
            touch: touch
        });
    </script>

​