This plugin allows you to change css values by scrolling

Overview

scroll-parallax-effect

スクロールによってcssの値を変更することができるプラグインです。

This plugin allows you to change css values by scrolling.

このプラグインには3つの機能があります。

  • Timing : 指定 位置を通過したときにクラスを追加します
  • Speed : スクロール量に応じてcssを変化させる
  • Fit : 移動距離に応じてcssを変化させる

This plugin has three functions.

  • Timing : add a class when passing a specified position
  • Speed : css changes according to the amount of scrolling
  • Fit : change css according to distance traveled

Install

npm

npm install scroll-parallax-effect

yarn

yarn add scroll-parallax-effect

Document and Examples

Document and Examples

Example

Typescript

Vanilla

SVG

Development

serve

yarn serve

build

npm run build

or

yarn build

test

yarn test

Previous versions

https://github.com/kamem/scrollParallax

You might also like...
A Vue.js directive for body scroll locking without breaking scrolling of a target element.

v-scroll-lock A Vue.js directive for body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrollin

Customize the scrolling position on route navigation. Especially hash mode.

vue-scroll-behavior Customize the scrolling position on route navigation IE / Edge Firefox Chrome Safari Opera iOS Android IE9+, Edge ✓ ✓ ✓ ✓ ✓ ✓ Tabl

:beginner:A simple, seamless scrolling for Vue.js vue无缝滚动component

vue-seamless-scroll A simple, Seamless scrolling for Vue.js Features Initial configuration support Compatible with multiple platforms Multi-technology

⌨️ A Safari browser extension, use keyboard control browser jumps, scrolling, switching tabs and more. support iPadOS and macOS

Support Keyboard Key Description k Scroll up j Scroll down u Fast scroll up d Fast scroll down h Scroll left l Scroll right f Highlight shift Open lin

Starter template for parallax effects & smooth scrolling experience
Starter template for parallax effects & smooth scrolling experience

Nuxt + Locomotive Scroll Starter template for parallax effects & smooth scrolling experience. Empower your Nuxt project in no time. See it in action →

Vue component that provides content scrolling and zooming using mouse events or two fingers pinch on a mobile devices
Vue component that provides content scrolling and zooming using mouse events or two fingers pinch on a mobile devices

vue-pinch-scroll-zoom Vue component that provides content scrolling and zooming using mouse events or two fingers pinch on a mobile devices example: h

Component that customizes the scroll and inserts shadow when scrolling exists
Component that customizes the scroll and inserts shadow when scrolling exists

Vue Scroll Shadow • • Component that customizes the scroll and inserts shadow when scrolling exists Installation NPM npm i vue-scroll-shadow # or yarn

⚡️ Blazing fast scrolling for any amount of data
⚡️ Blazing fast scrolling for any amount of data

vue-virtual-scroller Blazing fast scrolling of any amount of data | Live demo | Video demo For Vue 3 support, see here 💚️ Become a Sponsor Sponsors T

A Vue.js directive for body scroll locking without breaking scrolling of a target element.

v-scroll-lock A Vue.js directive for body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrollin

Owner
kamem
kamem
Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.

vue-scrollactive This component makes it simple to highlight a menu item with an 'active' class as you scroll. Highlights items with a class as you sc

Mauricio Farias Dziedzinski 533 Nov 20, 2022
Lightweight package for highlighting menu items as you scroll the page, also scrolling to target section when item clicked. Use as a vue component/directive or in vanilla js.

navscroll-js Installation This package is available on npm. Using npm: npm install --save navscroll Using yarn: yarn add navscroll Directly include it

Honoré Nintunze 57 Mar 2, 2022
Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.

vue-scrollactive This component makes it simple to highlight a menu item with an 'active' class as you scroll. Highlights items with a class as you sc

Mauricio Farias Dziedzinski 533 Nov 20, 2022
Lightweight Vue plugin for smooth-scrolling extended from vue-smooth-scroll

Vue2 Smooth Scroll Lightweight Vue plugin for smooth-scrolling extended from vue-smooth-scroll. For simple use-cases, the native scroll-behavior CSS p

xlaoyu 118 Oct 7, 2022
Vue plugin to disable scrolling page

Vue plugin to disable scrolling page

17axaH 0 May 12, 2021
A Vue plugin which supervises binding element's scrolling and trigger target elements class

A Vue plugin which supervises binding element's scrolling and trigger target elements class

null 0 Nov 27, 2020
Lightweight Vue plugin for smooth-scrolling.

Vue Smooth Scroll Lightweight Vue plugin for smooth-scrolling. For simple use-cases, the native scroll-behavior CSS property (working draft) may be en

xlaoyu 12 Jun 7, 2022
A Vue plugin which supervises binding element's scrolling and trigger target elements class

vue-scroll-trigger A Vue plugin which supervises binding element's scrolling and trigger target elements class Sample BEHIVE-DESIGN Install with yarn

Ranlizzz 2 Nov 5, 2020
Lightweight Vue plugin for smooth-scrolling extended from vue2-smooth-scroll.

Vue3 Smooth Scroll Lightweight Vue plugin for smooth-scrolling extended from vue2-smooth-scroll. For simple use-cases, the native scroll-behavior CSS

laineus 23 Aug 16, 2022
Vue Snakke allows you to add a reading progress bar to your Vue 3 project.

Vue 3 utility that enables you to track page scrolling progress.

Vinicius Kiatkoski Neves 20 Jun 24, 2022