GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → fromtheoutfit → fadable

fromtheoutfit / fadable

Licence: MIT license
Fade in elements as they move into view, at both the bottom and top of the viewport.

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

npmnpm-packagefadefadesfade-infade-out

Projects that are alternatives of or similar to fadable

vue-package-template
Boilerplate for your next, ES6 Vue.js package. Ready for npm deployments
Stars: ✭ 12 (-25%)
Mutual labels:  npm-package
node-eufy-api
A simple JavaScript API to control EufyHome (Anker) smart light bulbs, switches and plugs.
Stars: ✭ 22 (+37.5%)
Mutual labels:  npm-package
js-mdict
*.mdx/*.mdd interpreter js implements
Stars: ✭ 91 (+468.75%)
Mutual labels:  npm-package
intersection-wasm
Mesh-Mesh and Triangle-Triangle Intersection tests based on the algorithm by Tomas Akenine-Möller
Stars: ✭ 17 (+6.25%)
Mutual labels:  npm-package
micro-signals
A tiny typed messaging system inspired by js-signals that uses ES2015 sets
Stars: ✭ 39 (+143.75%)
Mutual labels:  npm-package
ugql
🚀GraphQL.js over HTTP with uWebSockets.js
Stars: ✭ 27 (+68.75%)
Mutual labels:  npm-package
fireworks-js
🎆 A simple fireworks library! Ready to use components available for React, Vue 3, Svelte, Angular, Preact, Solid, and Web Components.
Stars: ✭ 550 (+3337.5%)
Mutual labels:  npm-package
djb2a
DJB2a non-cryptographic hash function
Stars: ✭ 31 (+93.75%)
Mutual labels:  npm-package
stimulus-content-loader
A Stimulus controller to asynchronously load HTML from an url.
Stars: ✭ 39 (+143.75%)
Mutual labels:  npm-package
eslint-plugin-vue-scoped-css
ESLint plugin for Scoped CSS in Vue.js
Stars: ✭ 58 (+262.5%)
Mutual labels:  npm-package
arcscord
A Discord library written in typescript
Stars: ✭ 18 (+12.5%)
Mutual labels:  npm-package
node-reactive-postgres
Reactive queries for PostgreSQL
Stars: ✭ 28 (+75%)
Mutual labels:  npm-package
eslint-plugin-todo-plz
Enforce consistent and maintainable TODO comments
Stars: ✭ 19 (+18.75%)
Mutual labels:  npm-package
ng-charts
🎨📉 A fully functional Angular 14+ Chart.js library based from ng2-charts
Stars: ✭ 14 (-12.5%)
Mutual labels:  npm-package
hydra-js
DOES NOT WORK WITH VERSIONS > 0.10.0 - A simple library to help you build node-based identity providers that work with Hydra.
Stars: ✭ 17 (+6.25%)
Mutual labels:  npm-package
React-Dark
A NPM module which allows you to add dark theme feature to your React application.
Stars: ✭ 19 (+18.75%)
Mutual labels:  npm-package
2018-package-three-webpack-plugin
[ARCHIVED] Webpack plugin to use Three.js "examples" classes
Stars: ✭ 45 (+181.25%)
Mutual labels:  npm-package
ansicolor
A JavaScript ANSI color/style management. ANSI parsing. ANSI to CSS. Small, clean, no dependencies.
Stars: ✭ 91 (+468.75%)
Mutual labels:  npm-package
npmlint
[DEPRECATED] Lint your npm package
Stars: ✭ 57 (+256.25%)
Mutual labels:  npm-package
nba-stats-client
🏀 JavaScript Client for stats from NBA.com
Stars: ✭ 29 (+81.25%)
Mutual labels:  npm-package
View All Similar Projects ➔

Fadable

Fade in elements as they move into view, at both the bottom and top of the viewport.

Demo

https://theoutfit-fadable.netlify.app/

How to Implement

  1. Install it: npm i @theoutfit/fadable --save
  2. Import it: import fadable from '@theoutfit/fadable'
  3. Call it: fadable()
  4. Class it: add a class of fadable to any element

Configuration

Property Type Default Description
initialScale number 0.95 Initial scale (from 0 - 1)
transitionDuration number 0.75 Transition speed (in seconds)
edgeDistance number 40 Transition runs at this distance from viewport edges (in pixels)

For example:

fadable({
  initialScale: 0.50,
  transitionDuration: 1.5,
  edgeDistance: 80
})

License

Fadable is available under the MIT license.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].