일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- #쇼핑몰
- #이미지
- #웹솔루션
- 게시판
- jquery
- 웹솔루션
- 해피CGI
- #해피CGI
- #cgimall
- #jQuery
- #홈페이지제작
- happycgi
- 홈페이지
- #동영상
- javascript
- 홈페이지제작
- CGIMALL
- php
- #뉴스
- 솔루션
- #CSS
- CSS
- #업종별
- #happycgi
- 사이트제작
- 해피씨지아이
- #솔루션
- #image
- #홈페이지
- 쇼핑몰
- Today
- Total
웹솔루션개발 22년 노하우! 해피CGI의 모든것
[해피CGI][cgimall] jQuery 를 이용한 Parallax Effect 플러그인 본문
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 에서는 다소 버벅임이 있을 수 있습니다.
'웹프로그램밍 자료실 > JAVA 자료' 카테고리의 다른 글
[해피CGI][cgimall] AutoCompleteJS Ver 0.3.0 (0) | 2020.09.03 |
---|---|
[해피CGI][cgimall] jQuery 를 이용한 Table 을 Excel 로 다운로드하는 플러그인 입니다. (0) | 2020.08.26 |
[해피CGI][cgimall] jQuery Plugin For Interactive Image Notes - Interactive Image (0) | 2020.08.24 |
[해피CGI][cgimall] jquery, Infinitely Scrollable Vertical Menu (0) | 2020.08.20 |
[해피CGI][cgimall] jquery, Menu Hover Image Animation (0) | 2020.08.14 |
Comments