Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/baybreezy/nuxt-rellax
Unlock the power of seamless parallax effects in your Nuxt 3 applications with our Rellax module. Explore the documentation to effortlessly integrate this module, offering composable utilities and directives for an enhanced and dynamic web experience.
https://github.com/baybreezy/nuxt-rellax
nuxt nuxt3 rellax rellaxjs ui-thing
Last synced: about 2 months ago
JSON representation
Unlock the power of seamless parallax effects in your Nuxt 3 applications with our Rellax module. Explore the documentation to effortlessly integrate this module, offering composable utilities and directives for an enhanced and dynamic web experience.
- Host: GitHub
- URL: https://github.com/baybreezy/nuxt-rellax
- Owner: BayBreezy
- Created: 2024-01-10T00:42:45.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-09-08T22:40:19.000Z (4 months ago)
- Last Synced: 2024-11-15T21:30:46.045Z (about 2 months ago)
- Topics: nuxt, nuxt3, rellax, rellaxjs, ui-thing
- Language: Vue
- Homepage: https://nuxt-rellax.behonbaker.com
- Size: 2.58 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Nuxt Rellax
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]
Unlock the power of seamless parallax effects in your Nuxt 3 applications with our Rellax module. Explore the documentation to effortlessly integrate this module, offering composable utilities and directives for an enhanced and dynamic web experience. Elevate your website's visual appeal with SEO-friendly parallax scrolling – the perfect blend of performance and aesthetics
- [✨ Release Notes](/CHANGELOG.md)
## Features
- Seamless integration with Nuxt 3
- Composable & directives for easy use
## Quick Setup
1. Add `nuxt-rellax` dependency to your project
```bash
# Using pnpm
pnpm add -D nuxt-rellax
# Using yarn
yarn add --dev nuxt-rellax
# Using npm
npm install --save-dev nuxt-rellax
```
2. Add `nuxt-rellax` to the `modules` section of `nuxt.config.ts`
```js
export default defineNuxtConfig({
modules: ["nuxt-rellax"],
});
```
That's it! You can now use Nuxt Rellax in your Nuxt app ✨
## Usage
### Add it to the elements you want to have the parallax effect
#### Directive usage
You can pass the options directly to the directive:
```html
I have rellax
```
#### Composable usage
You can pass the selector and the options to the composable
```ts
useRellax(".c-rellax", {
// will apply to all elements
wrapper: "#custom-wrapper-3",
});
```
## Development
```bash
# Install dependencies
npm install
# Generate type stubs
npm run dev:prepare
# Develop with the playground
npm run dev
# Build the playground
npm run dev:build
# Run ESLint
npm run lint
# Run Vitest
npm run test
npm run test:watch
# Release new version
npm run release
```
[npm-version-src]: https://img.shields.io/npm/v/nuxt-rellax/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/nuxt-rellax
[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-rellax.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npmjs.com/package/nuxt-rellax
[license-src]: https://img.shields.io/npm/l/nuxt-rellax.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://npmjs.com/package/nuxt-rellax
[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
[nuxt-href]: https://nuxt.com