js-scroll-effect-module

KO | EN

gitlite — search

#ai #llm #go #golang #rust #linux #nodejs #awesome #cli #vue #awesome-list #security #pytorch #ios

js-scroll-effect-module

(★ 20)

[v0.13.6] Add effect at scroll.

js-scroll-effect-module 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# SCROLL EFFECT MODULE

[![](https://img.shields.io/github/release/yama-dev/js-scroll-effect-module.svg)](https://github.com/yama-dev/js-scroll-effect-module/releases/latest)

<br>

## Feature

Add effect according to scroll.  
By using pre-prepared CSS, it is surprisingly easy to add effects that match the scrolling.

<br>

## Demo

- Document -> [https://yama-dev.github.io/js-scroll-effect-module-docs/](https://yama-dev.github.io/js-scroll-effect-module-docs/)

<br>

## Installation,Download

- npm -> [https://www.npmjs.com/package/js-scroll-effect-module](https://www.npmjs.com/package/js-scroll-effect-module)

- Standalone(CDN) -> [https://cdn.jsdelivr.net/gh/yama-dev/js-scroll-effect-module@0.13.6/dist/js-scroll-effect-module.js](https://cdn.jsdelivr.net/gh/yama-dev/js-scroll-effect-module@0.13.6/dist/js-scroll-effect-module.js)

- Zip -> [yama-dev/js-scroll-effect-module](https://github.com/yama-dev/js-scroll-effect-module/releases/latest)

<br>

## Using

### NPM Usage

``` bash
# install npm.
npm install --save-dev js-scroll-effect-module
```

``` javascript
// import.
import SCROLL_EFFECT_MODULE from 'js-scroll-effect-module';
```

### Basic Use

``` html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/yama-dev/js-scroll-effect-module@0.13.6/examples/scroll-effect-module.css">
<script src="https://cdn.jsdelivr.net/gh/yama-dev/js-scroll-effect-module@0.13.6/dist/js-scroll-effect-module.js"></script>

### Advanced Use

``` html
<script src="https://cdn.jsdelivr.net/gh/yama-dev/js-scroll-effect-module@0.13.6/dist/js-scroll-effect-module.js"></script>

ratio              : 0.8,   // 判定する比率を指定（ウィンドウ高さを1として指定）
  reverse            : false, // スクロールを戻した時にクラスを削除するかどうか

ratioReverse       : null, // 戻る際の判定比率を指定（ウィンドウ高さを1として指定）

firstDelay         : 100, // 初回動作までの遅延時間（ms）

autoStart          : true, // 自動でスタートするかどうか
  autoStartType      : 'ready', // ready, load, scroll

updateResizeAuto   : true, // window resize 時に自動で情報更新するかどうか

throttleInterval   : 5,

customVarNameRatio : '--scroll-ratio', // 指定時のみ CSS 変数へ比率を設定

on: {
    Change: function(obj, index, name){
      console.log('Change', obj, index, name);
    },
    In: function(obj, index, name){
      console.log('In', obj, index, name);
    },
    Out: function(obj, index, name){
      console.log('Out', obj, index, name);
    },
    Scroll: function(_y){
      console.log('Scroll', _y);
    },
  }
});
</script>
```

## Methods

### Start

監視を開始

ex. `ScrollEffectModule.Start();`

### Stop

監視を停止

ex. `ScrollEffectModule.Stop();`

### Update

各要素の情報更新

ex. `ScrollEffectModule.Update();`

<br>

## Dependencies

[@yama-dev/js-dom](https://github.com/yama-dev/js-dom)

## Release Flow

```bash
npm run changeset
npm run version-packages
npm run release
```

`npm run changeset` で変更内容を記録し、`npm run version-packages` で `package.json` / `CHANGELOG.md` を更新、`npm run release` でビルド後に npm 公開します。

---

## Licence

[MIT](https://github.com/yama-dev/js-scroll-effect-module/blob/master/LICENSE)

<br>

## Author

[yama-dev](https://github.com/yama-dev)

js-scroll-effect-module

js-scroll-effect-module 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

js-scroll-effect-module

js-scroll-effect-module 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README