Modern responsive sprites animación JS Library-Spritz. js

Vista prévia

Descripción

Toastinette es un plugin de notificación JavaScript muy pequeño para mostrar los mensajes del brindis inspirados en material Design en la Página Web.

Funcionamiento

Toastinette es un plugin de notificación JavaScript muy pequeño para mostrar los mensajes del brindis inspirados en material Design en la Página Web.

# Yarn
yarn add spritz.js

# NPM
$ npm install spritz.js

import Spritz from 'spritz.js'

Toastinette es un plugin de notificación JavaScript muy pequeño para mostrar los mensajes del brindis inspirados en material Design en la Página Web.

<div id="sprite"></div>

Toastinette es un plugin de notificación JavaScript muy pequeño para mostrar los mensajes del brindis inspirados en material Design en la Página Web.

Spritz('#sprite', {
 picture: [
 {
 srcset: 'hd.png',
 media: '(min-width: 1200px)',
 width: 7800, height: 2829,
 objectFit: 'cover'
 },
 {
 srcset: 'lg.webp',
 width: 3900, height: 1415
 },
 {
 srcset: 'full.png',
 width: 3900, height: 1415
 objectFit: 'contain'
 }
],
})

Toastinette es un plugin de notificación JavaScript muy pequeño para mostrar los mensajes del brindis inspirados en material Design en la Página Web.

Spritz('#sprite', {


// Number of steps (or frames) composing the sprite.

steps: 1,


// Number of rows (or lines) composing the sprite.

rows: 1


})

API methods.

// Change animation speed from its default value (15).
sprite.fps(10) // Change speed to 10fps

// Play animation forward (using the current fps value).
 // A backward option can be passed as parameter.
sprite.play()
sprite.play('backward') // Alternative way to play an animation backward


// Play animation backward (using the current fps value).
sprite.playback()

// Pause the current animation.
sprite.pause()

//
 sprite.stop()

// Chainable timeout that can be used to delay stuff.
 // The delay value is to be passed as parameter, in milliseconds.
sprite.wait(1000) // Wait for 1 second

/* Usage example */
sprite

.play() // Play animation

.wait(2000) // Then wait for 2 second

.stop() // Then stop animation

// Change the current step (or frame) of the sprite. Target step to be passed as parameter.
sprite.step(5)

// Go to the next step (or frame).
sprite.next()

// Go to the previous step (or frame).
sprite.prev()

// Build and load the sprite, within its selector. Initial step can be passed as parameter.
sprite.init() // Basic usage
sprite.init(2) // Initial step is 2 (default = 1)

// Completely destroy the sprite element and behaviors. Restore the initial state.
sprite.destroy()

// The next animation will automatically pause at the value specified. Two parameters can be used:

step (required): Step/frame at which the animation should stop.
loop (optional, default 1): Loop at which the animation should stop.
sprite.until(7) // Animation will automatically stop at step/frame 7
sprite.until(3, 2) // Animation will automatically stop at step/frame 3, on the second loop

/* Usage example */
sprite

.until(7) // Stop following animation at step/frame 7

.play() // Play animation (will automatically stop at step/frame 7)


// Flip the sprite horizontally.

sprite.flip()

// Return data, then call the callback function with result. Two parameters can be used:
// data (required): Data to return. Possible values: step| picture.
// callback (optional): Callback function to be called with result as first parameter.
// console log the current step/frame
sprite.get('step', (currentStep) => {

console.log(currentStep)
})

// console log the current picture in use
sprite.get('picture', (pic) => {

console.log(pic)
})

Events.

// Sprite is ready for use (after init)
sprite.on('ready', () => { /* Do something */ })

// Sprite image has been loaded (current 'picture' loaded passed as parameter)
sprite.on('load', (picture) => { /* Do something */ })

// Sprite has been destroyed
sprite.on('destroy', () => { /* Do something */ })

// Sprite animation start ('forward' or 'backward' passed as first parameter)
sprite.on('play', (direction) => { /* Do something */ })

// Sprite animation pause
sprite.on('pause', () => { /* Do something */ })

// Sprite animation stop
sprite.on('stop', () => { /* Do something */ })

// Animation timeout delay in
progress ('delay' value passed as parameter)
sprite.on('wait', (delay) => { /* Do something */ })

// Step changed manually ('from' and 'to' passed as parameters)
sprite.on('change', (from, to) => { /* Do something */ })

// Viewport has been resized (new current 'picture' passed as parameter)
sprite.on('resize', (picture) => { /* Do something */ })

Registro de cambios

10/14/2019

• v2.2.2: Dependencies update