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 에서는 다소 버벅임이 있을 수 있습니다.
'공부 > HTML|CSS' 카테고리의 다른 글
| HTML 코드 암호화하기 (0) | 2022.01.19 |
|---|---|
| API 없이 인스타그램 HTML (by TagName) (1) | 2020.07.15 |
| [HTML/CSS] 웹킷 활용해서 줄 바꿈 없이 말줄임표(?) 표시.. (0) | 2020.02.25 |
| WIX로 숫자 카운트 업 효과 적용하기 (1) | 2019.08.25 |
| 체크박스 / 라디오 배경 변경, 꾸미기 (0) | 2019.08.12 |
