parallax plugin Jarallax ios에서도 됩니다.

2022. 10. 11. 09:13

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에서도 잘 작동되어서

이렇게 올려 봅니다.

공식 사이트 바로 가기

GitHub - nk-o/jarallax: Parallax scrolling for modern browsers

Parallax scrolling for modern browsers. Contribute to nk-o/jarallax development by creating an account on GitHub.

github.com

세부적인 옵션과 예제는 위에 사이트에 자세히 나와있습니다.

패럴랙스 때문에 고통받는 분이 없기를 기원하면서

이렇게 올려봅니다.

저작자표시 비영리 변경금지

'웹 개발 > 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

퍼블리셔 이과장