Jarallax Background 사용하기

CSS3 3D 변환 기능을 사용하여 이미지, 배경 이미지, Youtube, Vimeo, HTML5 Video 등
많은 HTML 요소에 부드러운 Parallax Effect 를 추가하는 jQuery Plugin.

 

1. 기본적으로 jQuery Plugin 이므로 jQuery 를 먼저 호출 
2. Script 호출

<!-- 상단 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax.css">


<!-- Jarallax JS -->
<script src="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax.min.js"></script>

<!-- Include it if you want to use Video parallax -->
<script src="https://cdn.jsdelivr.net/npm/jarallax@2/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 안내

NameTypeDefaultDescription

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 에서는 다소 버벅임이 있을 수 있습니다.

 

출처 : https://happycgi.com/17022