A toolbox of frontend web development modules to add some to your website.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
packages
test
.gitignore
.npmignore
.npmrc
README.md
index.js
package.json
webpack.config.js

README.md

Web Sparkle

Cha's magic toolbox of web sparkles.

Here's some lightweight modules to add some sparkle (read: finesse) to your websites. Use each of the packages below to improve important details like website performance, code style/quality, visual polish, and animations.

Usage

You can install everything all at once (since it's quite small anyway):

$ npm install web-sparkle
const SPARKLE = require('web-sparkle')

// cross-browser-resize
SPARKLE.crossBrowserResize.addListener(myFunction)
SPARKLE.crossBrowserResize.removeListener(myFunction)

// css-scroll
SPARKLE.CSSScroll(2000, 800, document.body)

// get-prefixed-style
const transition = SPARKLE.getPrefixedStyle('transition')

// resize-scroll-handler
const handler = new SPARKLE.ResizeScrollHandler()
handler.on('resize', myFunction)

// scrolled-past
new SPARKLE.ScrolledPast(200)

// universal-gallery
new SPARKLE.UniversalGallery({
  galleryNode: document.getElementById('gallery'),
  childSelector: '.slide',
  numOfClones: 1,
  shouldAutoplay: true,
  slideSpeed: 3000,
  handleChange: myFunction
})

// vh-for-mobile
new SPARKLE.VHForMobile()

Or you can go to each link below and install them separately. Up to you.

Built with 💛 by (Christine) Cha. Pull requests welcome!


cross-browser-resize

Eliminate unnecessary resize event handling on mobile browsers.

🏋 Performance
🏆 Visual Polish


css-scroll

Forget that jittery JS-powered animated scroll. Get it buttery smooth (and super performant!) with some CSS magic.

🏆 Visual Polish
🎪 Animation


get-prefixed-style

A super simple method to grab the correct (prefixed or not) style property name for your browser.

💄 Code Style


resize-scroll-handler

No more long frames. Stop repainting the browser all the time, and only fire window events once.

🏋 Performance


scrolled-past

Implement easy-peasy CSS-based scroll-triggered animation (or whatever you want).

🏋 Performance
🏆 Visual Polish
🎪 Animation


universal-gallery

Super generic, unopinionated base gallery that can be styled to pretty much any layout & animation you'll ever need.

🏋 Performance
🏆 Visual Polish
🎪 Animation


vh-for-mobile

Using VH as a CSS unit in mobile browsers causes a lot of problems. Fix them.

🏋 Performance
🏆 Visual Polish