• WebSite/Tistory

  • 패럴랙스(Parallax plugin) 플러그인 Jarallax 사용방법

  • _위키 _위키 · ·

패럴랙스(Parallax plugin)

패럴랙스(Parallax) 플러그인은 웹 디자인에서 사용되는 동적 효과 중 하나입니다. 이 효과는 여러 개의 요소가 서로 다른 속도로 스크롤되어 웹 페이지의 깊이와 입체감을 더해줍니다. 주로 배경 이미지나 텍스트 요소에 적용되며, 사용자가 페이지를 스크롤할 때마다 요소들이 서로 다른 속도로 움직이는 시각적 효과를 제공합니다.

패럴랙스 효과는 사용자의 시선을 끌고 웹 페이지를 더욱 흥미롭게 만들어줍니다. 일반적으로 패럴랙스 플러그인은 JavaScript나 CSS를 사용하여 구현되며, 다양한 옵션을 제공하여 사용자가 원하는 효과를 설정할 수 있습니다. 이를 통해 디자이너는 페이지를 더 동적이고 시각적으로 매력적으로 만들 수 있습니다.

패럴랙스 효과를 사용하면 웹 페이지의 디자인에 새로운 차원을 더할 수 있으며, 사용자에게 더욱 재미있는 경험을 제공할 수 있습니다.

자랄랙스(Jarallax)

자랄랙스(Jarallax)는 패럴랙스 효과를 쉽게 구현할 수 있도록 도와주는 JavaScript 라이브러리입니다. Jarallax는 간단한 설정만으로도 다양한 패럴랙스 효과를 웹 페이지에 적용할 수 있어 웹 개발자들 사이에서 인기가 있습니다.

Jarallax를 사용하면 배경 이미지, 텍스트, 그래픽 요소 등을 다양한 속도로 스크롤할 수 있습니다. 이를 통해 웹 페이지에 입체적인 느낌을 부여하고 사용자의 시선을 끌어냅니다. Jarallax는 스크롤 속도, 이동 방향, 요소의 크기와 위치 등 다양한 설정을 제공하여 사용자가 자신의 웹 페이지에 적합한 패럴랙스 효과를 구현할 수 있도록 도와줍니다.

또한 Jarallax는 반응형 웹 디자인을 지원하여 다양한 화면 크기와 장치에서 일관된 사용자 경험을 제공합니다. 이러한 특징들로 인해 Jarallax는 웹 개발자들이 멋진 패럴랙스 효과를 손쉽게 구현할 수 있는 강력한 도구로 자리매김하고 있습니다.

스크립트

Css

  body, html {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  .jarallax {
    height: 100vh;
    background-size: cover;
    background-position: center;
  }
  .jarallax > h1 {
    font-size: 48px;
    color: white;
    text-align: center;
    padding-top: 20%;
  }

해당 CSS 코드는 Jarallax 효과를 적용할 요소에 대한 스타일을 정의합니다. 각 부분을 설명해 드리겠습니다.

  1. body, html: HTML 문서의 <body>와 <html> 요소에 대한 스타일을 정의합니다.
    • margin: 0;: 페이지의 외부 여백을 없애기 위해 바디와 HTML 요소의 마진을 0으로 설정합니다.
    • padding: 0;: 페이지의 내부 여백을 없애기 위해 바디와 HTML 요소의 패딩을 0으로 설정합니다.
    • height: 100%;: 바디와 HTML 요소의 높이를 화면의 전체 높이(100%)로 설정합니다.
  2. jarallax: Jarallax 효과를 적용할 요소에 대한 스타일을 정의합니다.
    • height: 100vh;: Jarallax 요소의 높이를 화면의 전체 높이(100vh)로 설정합니다. 이를 통해 요소가 화면 전체를 채우도록 합니다.
    • background-size: cover;: 배경 이미지의 크기를 요소에 맞게 조절하여 화면 전체를 채우도록 합니다.
    • background-position: center;: 배경 이미지를 가운데 정렬하여 화면에 가운데 위치하도록 합니다.
  3. jarallax > h1: Jarallax 요소 내의 <h1> 요소에 대한 스타일을 정의합니다.
    • font-size: 48px;: 텍스트의 크기를 48픽셀로 설정합니다.
    • color: white;: 텍스트의 색상을 흰색으로 설정합니다.
    • text-align: center;: 텍스트를 가운데 정렬합니다.
    • padding-top: 20%;: Jarallax 요소의 상단 여백을 화면의 세로 길이의 20%로 설정하여 텍스트가 화면 중앙에 위치하도록 합니다.

이렇게 함으로써 Jarallax 요소와 해당 요소 내의 텍스트가 원하는 스타일로 표시될 수 있습니다.

JavaScript

<script src="https://cdnjs.cloudflare.com/ajax/libs/jarallax/1.11.0/jarallax.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    jarallax(document.querySelectorAll('.jarallax'), {
      speed: 0.5
    });
  });
</script>

제공된 스크립트는 Jarallax 라이브러리를 사용하여 Jarallax 효과를 적용하는 JavaScript 코드입니다.

  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jarallax/1.11.0/jarallax.min.js"><script>: Jarallax 라이브러리를 로드하는 스크립트입니다. 이 코드를 통해 웹 페이지에 Jarallax 라이브러리를 가져와 사용할 수 있습니다.
  2. <script> 태그 내부:
    • document.addEventListener('DOMContentLoaded', function () { ... });: 문서가 완전히 로드되면 실행되는 함수를 정의합니다. 즉, HTML 문서의 모든 요소가 로드된 후에 자바스크립트 코드가 실행됩니다.
    • jarallax(document.querySelectorAll('.jarallax'), { speed: 0.5 });: Jarallax 효과를 적용할 요소를 선택하고, Jarallax 라이브러리의 jarallax() 함수를 호출하여 해당 요소에 효과를 적용합니다. 이때 { speed: 0.5 } 옵션은 Jarallax 효과의 속도를 설정하는 부분으로, 0.5로 설정되어 있어 요소가 스크롤될 때 배경 이미지가 부드럽게 움직이도록 합니다.

이렇게 함으로써 웹 페이지에서 Jarallax 효과가 적용된 요소들이 원하는 설정대로 작동할 수 있습니다.

사용방법

<div class="jarallax" data-jarallax data-speed="0.5" style="background-image: url('your-image.jpg');">
  <h1>Hello, Jarallax!</h1>
</div>

위 html 코드는 효과를 지정하는 부분입니다. 배경으로 사용될 이미지 url경로를 입력하시고 원하는 위치에 배치하여 사용하시면 되겠습니다. 전체적인 적용 방법확인을 위해 아래 전체 스크립트 내용을 구성하여 보여드리도록 하겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jarallax Example</title>
<link rel="stylesheet" href="styles.css"> <!-- 외부 CSS 파일 링크 -->
<style>
/* 내부 CSS 코드 */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}
.jarallax {
    height: 100vh;
    background-size: cover;
    background-position: center;
}
.jarallax > h1 {
    font-size: 48px;
    color: white;
    text-align: center;
    padding-top: 20%;
}
</style>
</head>
<body>

<div class="jarallax" data-jarallax data-speed="0.5" style="background-image: url('your-image.jpg');">
  <h1>Hello, Jarallax!</h1>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jarallax/1.11.0/jarallax.min.js"></script> <!-- Jarallax 라이브러리 스크립트 링크 -->
<script>
document.addEventListener('DOMContentLoaded', function () {
    jarallax(document.querySelectorAll('.jarallax'), { speed: 0.5 });
});
</script>

</body>
</html>

위 코드를 복사여 테스트해 보시면 어떻게 만들어야겠다 어떻게 수정해야겠다 하는 생각이 드실 것이라 생각합니다. 좀 더 많은 정보를 찾고 싶으시다면 깃허브 공식 웹페이지에 방문하셔서 확인하셔도 좋습니다. 링크 남겨 놓도록 하겠습니다.

 

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

위 공식 사이트에서 세부적인 구성과 예제도 확인하실 수 있습니다.

comment
100%

티스토리툴바