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

 

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

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

이렇게 올려봅니다.

 

+ Recent posts