CSS3 3D 변환 기능을 사용하여 이미지, 배경 이미지, Youtube, Vimeo, HTML5 Video 등등 ...
많은 HTML 요소에 부드러운 Parallax Effect 를 추가하는 jQuery Plugin 입니다.
사용법은 생각보다 쉽습니다.
1. 기본적으로 jQuery Plugin 이므로 jQuery 를 호출해 주셔야 합니다.
2. Script 호출 해 주세요.
<!-- Jarallax -->
<script src="jarallax/dist/jarallax.min.js"></script>
<!-- Include it if you want to use Video parallax -->
<script src="jarallax/dist/jarallax-video.min.js"></script>
3. HTML 요소는 아래처럼 하시면 됩니다.
<!-- Background Image Parallax -->
<div class="jarallax">
<img class="jarallax-img" src="<background_image_url_here>" alt="">
Your content here...
</div>
<!-- Background Image Parallax with <picture> tag -->
<div class="jarallax">
<picture class="jarallax-img">
<source media="..." srcset="<alternative_background_image_url_here>">
<img src="<background_image_url_here>" alt="">
</picture>
Your content here...
</div>
<!-- Alternate: Background Image Parallax -->
<div class="jarallax" style="background-image: url('<background_image_url_here>');">
Your content here...
</div>
4. CSS 를 선언하여 변경할 일이 있다면 플러그인 호출전에 미리 선언하시거나
jarallax CSS 파일에 넣어두셔도 됩니다.
.jarallax {
position: relative;
z-index: 0;
}
.jarallax > .jarallax-img {
position: absolute;
object-fit: cover;
/* support for plugin https://github.com/bfred-it/object-fit-images */
font-family: 'object-fit: cover;';
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
5. 플러그인 호출 방식에 대해서 안내 합니다.
- data attribute (데이터 속성 설정하는 방식)
제공하는 옵션을 모두 속성으로 넣으셔도 됩니다.
( 옵션은 아래에 다시 첨부 합니다. )
<!-- Background YouTube Parallax -->
<div class="jarallax" data-jarallax-video="https://www.youtube.com/watch?v=ab0TSkLe-E0">
Your content here...
</div>
<!-- Background Vimeo Parallax -->
<div class="jarallax" data-jarallax-video="https://vimeo.com/110138539">
Your content here...
</div>
<!-- Background Self-Hosted Video Parallax -->
<div class="jarallax" data-jarallax-video="mp4:./video/local-video.mp4,webm:./video/local-video.webm,ogv:./video/local-video.ogv">
Your content here...
</div>
- JavaScript 방식
import { jarallax, jarallaxVideo } from 'jarallax';
jarallaxVideo();
jarallax(document.querySelectorAll('.jarallax'), {
speed: 0.2,
videoSrc: 'https://www.youtube.com/watch?v=ab0TSkLe-E0'
});
<div class="jarallax"></div>
6. Options 안내
| Name |
Type |
Default |
Description |
| type |
string |
scroll |
scroll, scale, opacity, scroll-opacity, scale-opacity. |
| speed |
float |
0.5 |
Parallax effect speed. Provide numbers from -1.0 to 2.0. |
| imgSrc |
path |
null |
Image url. By default used image from background. |
| imgElement |
dom / selector |
.jarallax-img |
Image tag that will be used as background. |
| imgSize |
string |
cover |
Image size. If you use <img> tag for background, you should add object-fit values, else use background-size values. |
| imgPosition |
string |
50% 50% |
Image position. If you use <img> tag for background, you should add object-position values, else use background-position values. |
| imgRepeat |
string |
no-repeat |
Image repeat. Supported only background-position values. |
| keepImg |
boolean |
false |
Keep <img> tag in it's default place after Jarallax inited. |
| elementInViewport |
dom |
null |
Use custom DOM / jQuery element to check if parallax block in viewport. More info here - Issue 13. |
| zIndex |
number |
-100 |
z-index of parallax container. |
| disableParallax |
RegExp / function |
- |
Disable parallax on specific user agents (using regular expression) or with function return value. The image will be set on the background. |
| disableVideo |
RegExp / function |
- |
Disable video load on specific user agents (using regular expression) or with function return value. The image will be set on the background. |
영상을 이용하는 경우 저사양 PC 에서는 다소 버벅임이 있을 수 있습니다.
|
