InfiniteGrid

Class: Parallax

eg.Parallax

new eg.Parallax(root, options)

Parallax.ts, line 20

Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight. You can apply parallax by scrolling the image and speed of the item.

Parallax는 서로 다른 두 개의 시선에서 바라본 물체의 외관상 위치의 변위 또는 차이입니다. 스크롤에 따라 이미지와 아이템의 속도를 차이를 줌으로써 parallax을 적용할 수 있습니다.

  • root (default: window) optional
    Type: Element | String

    Scrolling target. If you scroll in the body, set window. 스크롤하는 대상. 만약 body에서 스크롤하면 window로 설정한다.

    Scrolling target. If you scroll in the body, set window. 스크롤하는 대상. 만약 body에서 스크롤하면 window로 설정한다.

  • options optional
    Type: Object

    The option object of eg.Parallax module

    eg.Parallax 모듈의 옵션 객체

    • horizontal (default: false) optional
      Type: Boolean

      Direction of the scroll movement (false: vertical, true: horizontal)

      스크롤 이동 방향 (false: 세로방향, true: 가로방향)

    • container (default: null) optional
      Type: Element | String

      Container wrapping items. If root and container have no gaps, do not set option.

      아이템들을 감싸고 있는 컨테이너. 만약 root와 container간의 차이가 없으면, 옵션을 설정하지 않아도 된다.

    • selector (default: "img") optional
      Type: String

      The selector of the image to apply the parallax in the item

      아이템안에 있는 parallax를 적용할 이미지의 selector

    • strength (default: 1) optional
      Type: Boolean

      Dimensions that indicate the sensitivity of parallax. The higher the strength, the faster.

      Dimensions that indicate the sensitivity of parallax. The higher the strength, the faster.

    • center (default: 0) optional
      Type: Boolean

      The middle point of parallax. The top is 1 and the bottom is -1.

      parallax가 가운데로 오는 점. 상단이 1이고 하단이 -1이다.

    • range (default: [-1, 1]) optional
      Type: Boolean

      Range to apply the parallax. The top is 1 and the bottom is -1.

      parallax가 적용되는 범위, 상단이 1이고 하단이 -1이다.

    • align (default: "start") optional
      Type: Boolean

      The alignment of the image in the item. ("start" : top or left, "center": middle)

      아이템안의 이미지의 정렬

Example
<script>
// isOverflowScroll: false
var parallax = new eg.Parallax(window, {
  container: ".container",
  selector: "img.parallax",
  strength: 0.8,
  center: 0,
  range: [-1, 1],
  align: "center",
  horizontal: true,
});

// isOverflowScroll: ture
var parallax = new eg.Parallax(".container", {
  selector: "img.parallax",
  strength: 0.8,
  center: 0,
  range: [-1, 1],
  align: "center",
  horizontal: true,
});

// item interface
var item = {
  // original size
  size: {
    width: 100,
    height: 100,
  },
  // view size
  rect: {
    top: 100,
    left: 100,
    width: 100,
    height: 100,
  }
};
</script>

Methods

refresh(items, scrollPositionStart){eg.Parallax}

Parallax.ts, line 153

Scrolls the image in the item by a parallax.

스크롤하면 아이템안의 이미지를 시차적용시킨다.

  • items (default: []) optional
    Type: Array

    Items to apply parallax. It does not apply if it is not in visible range.

    parallax를 적용할 아이템들. 가시거리에 존재하지 않으면 적용이 안된다.

  • scrollPositionStart (default: 0) optional
    Type: Number

    The scroll position.

    The scroll position.

Returns:
Type Description
eg.Parallax
An instance of a module itself

모듈 자신의 인스턴스
Example
  document.body.addEventListener("scroll", function (e) {
	parallax.refresh(items, e.scrollTop);
  });

resize(items){eg.Parallax}

Parallax.ts, line 109

As the browser is resized, the gaps between the root and the container and the size of the items are updated.

브라우저의 크기가 변경됨으로 써 root와 container의 간격과 아이템들의 크기를 갱신한다.

  • items (default: []) optional
    Type: Array

    Items to apply parallax. It does not apply if it is not in visible range.

    parallax를 적용할 아이템들. 가시거리에 존재하지 않으면 적용이 안된다.

Returns:
Type Description
eg.Parallax
An instance of a module itself

모듈 자신의 인스턴스
Example
  window.addEventListener("resize", function (e) {
	parallax.resize(items);
  });
comments powered by Disqus