한글
Eng

Introduction

소개

Simple parallax scrolling effect with Javascript!

Works on mobile devices too!

자바스크립트를 이용한 간단한 패럴렉스 스크롤(parallax scroll) 효과입니다.

모바일 기기에서도 제대로 작동합니다.

Download Github

Installation

설치

Simply add js file that you've downloaded

간단하게 내려받은 js를 추가해주세요.

jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="./path/to/parallax-scroll.jquery.js"></script>


Vanilla JS

<script src="./path/to/parallax-scroll.js"></script>

Usage

사용법

HTML

<div class="parallax-item" data-image="./path/to/image.jpg"></div>

Javascript

jQuery

<script>
$(".parallax-item").parscroll()
</script>


Vanilla JS

<script>
parscroll(".parallax-item")
</script>


You can change the class name of ".parallax-item". But if you do so, you have to change CSS file too to make it work.

".parallax-item"이란 Class를 변경하셔도 되지만, CSS도 함께 수정해주셔야 제대로 작동합니다.

HTML Class name

HTML Class명

<div class="parallax-item full" data-image="./path/to/image.jpg"></div>

full : Lets your item fill the screen

full : 아이템이 화면에 꽉 차도록 합니다.

HTML attributes

HTML 속성(attributes)

<div class="parallax-item" data-title="Title" data-image="./path/to/image.jpg"></div>

Javascript

자바스크립트

jQuery

<script>
$(".parallax-item").parscroll({
speed: ".5"
})
</script>

Vanilla JS

<script>
parscroll(".parallax-item", ".5")
</script>

You can change the scrolling speed of your item. (default : .3)

아이템이 스크롤되는 속도를 변경하실 수 있습니다. (기본 : .3)