1. Jarallax
오늘 소개해드릴 Jarallax 플러그인입니다.
프로젝트에서 패럴랙스 효과를 낼 때 사용하는 플러그인입니다.
css로 하는 방법이 마음에 안든다고 하여 새롭게 적용하였습니다.
패럴랙스 효과는 기본적으로 css로 background-attachment: fixed
만 사용하여도 그냥저냥의 패럴랙스를 구현할 수 있습니다.
하지만 조금더 다른 효과를 사용하고 싶을 때는 플러그인 또는
자체 제작으로 효과를 구현하여야 합니다~
2. HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery Example</title>
<!-- Demo Styles -->
<link href="./style.css" rel="stylesheet" />
<!-- Jarallax CSS -->
<link href="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax.css" rel="stylesheet" />
<style type="text/css">
/**
* These styles are used for DEMO purpose only.
*/
*,
:after,
:before {
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: 20px;
margin: 0;
-webkit-font-smoothing: antialiased;
}
.section {
height: 60vh;
display: flex;
align-items: center;
justify-content: center;
}
.jarallax {
height: 80vh;
}
</style>
</head>
<body>
<div class="section"><h1>jQuery Example</h1></div>
<div class="jarallax">
<img class="jarallax-img" src="https://jarallax.nkdev.info/images/image1.jpg" alt="" />
</div>
<div class="jarallax" data-video-src="https://youtu.be/mru3Q5m4lkY"></div>
<div class="section"></div>
<!-- jQuery -->
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
<!-- Jarallax JS -->
<script src="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax-video.min.js"></script>
<!-- Init Jarallax -->
<script type="text/javascript">
$(".jarallax").jarallax();
</script>
</body>
</html>
위에 HTML을 복사해서 그대로 다운받아서 실행하면
위와 같은 패럴랙스 효과가 기본으로 장착되어 있습니다.
예전에 사용하던 패럴럭스가 ios에 작동이 안돼서
서치를 하다가 발견한 패럴럭스 플러그인은 ios에서도 잘 작동되어서
이렇게 올려 봅니다.
세부적인 옵션과 예제는 위에 사이트에 자세히 나와있습니다.
패럴랙스 때문에 고통받는 분이 없기를 기원하면서
이렇게 올려봅니다.
'웹 개발 > jquery 플러그인' 카테고리의 다른 글
swiper 옵션 정리 properties methods event (2) | 2022.09.28 |
---|---|
swiper 옵션 정리 parameters (3) | 2022.09.27 |
fancybox 옵션 정리 (4) | 2022.09.27 |
greensock scrolltrigger 커스텀 손쉽게 쓰기 (7) | 2022.09.14 |
slick center mode 사용법 (2) | 2022.09.14 |