TYPESCRIPT_ES6_VANILLA.md

scroll-parallax-effect Typescript ES6 Vanilla

Example

Typescript

• y scroll sample
• x scroll sample

Vanilla

• y scroll sample
• x scroll sample

Usage

ES6 Typescript

import {
  ParallaxTiming,
  ParallaxSpeed,
  ParallaxFit
} from 'scroll-parallax-effect'

直接 HTML に読みたい場合は dist フォルダのファイルを使い下記の通り読み込んでください。

https://kamem.github.io/scroll-parallax-effect/dist/scroll-parallax-effect/scroll-parallax-effect.min.js

Vanilla

<script
  type="text/javascript"
  src="../js/scroll-parallax-effect.min.js"
></script>

横方向にしたい場合は下記

ES6 Typescript

import {
  updateStatus,
} from 'scroll-parallax-effect'
updateStatus({ direction: 'x' })

Vanilla

Parallax.updateStatus({ direction: 'x' })

他のScrollStatus のオプションもここで指定できます。

Timing

ES6 Typescript

import {
  ParallaxTiming,
} from 'scroll-parallax-effect'
new ParallaxTiming('#timing')

Vanilla

new Parallax.ParallaxTiming('#timing')

speed

ES6 Typescript

import {
  ParallaxSpeed,
} from 'scroll-parallax-effect'
new ParallaxSpeed('.speed', {
  style: 'top',
  speed: 3,
  contentScrollPosition: '#speed'
})

vanilla

new Parallax.ParallaxSpeed('.speed', {
  style: 'top',
  speed: 3,
  contentScrollPosition: '#speed'
})

fit

ES6 Typescript

import {
  ParallaxFit,
} from 'scroll-parallax-effect'
new ParallaxFit('.fit', {
  start: 1000,
  end: 2000,
  fromStyle: {
    opacity: 0
  },
  toStyle: {
    opacity: 1,
  },
  easing: 'easeOutBack'
})

Vanilla

new Parallax.ParallaxTiming('.fit', {
  start: 1000,
  end: 2000,
  fromStyle: {
    opacity: 0
  },
  toStyle: {
    opacity: 1,
  },
  easing: 'easeOutBack'
})

複数指定したい場合

ES6 Typescript

import { ParallaxFit } from "scroll-parallax-effect";
new ParallaxFit(".fit", [
  {
    start: 0,
    end: 1000,
    fromStyle: {
      opacity: 0,
    },
    toStyle: {
      opacity: 1,
    },
    easing: "easeOutBack",
  },
  {
    start: 1000,
    end: 2000,
    fromStyle: {
      opacity: 1,
    },
    toStyle: {
      opacity: 0,
    },
    easing: "easeOutBack",
  },
]);

Vanilla

new Parallax.ParallaxTiming('.fit', [
  {
    start: 0,
    end: 1000,
    fromStyle: {
      opacity: 0
    },
    toStyle: {
      opacity: 1,
    },
    easing: 'easeOutBack'
  },
  {
    start: 1000,
    end: 2000,
    fromStyle: {
      opacity: 1
    },
    toStyle: {
      opacity: 0,
    },
    easing: 'easeOutBack'
  }
])