Vue-starwars

A vue component that scrolls images in a Star Wars-esque manner.
(Ignore the framerate in the preview. The real thing runs at a smooth 60 fps.)

Installing

yarn add vue-starwars
# or
npm install --save vue-starwars

Usage

Import the component either locally..

import StarWars from "@ziaomedia/vue-starwars";

export default {
    components: {
        StarWars
    }
}

.. or globally

import StarWars from "@ziaomedia/vue-starwars";
Vue.use(StarWars);

You can now use the <star-wars /> component. See the documentation for the supported options.
Note: When using Nuxt, you'll need to wrap the component in <no-ssr> tags.

Documentation

Option | Type | Default | Explanation --- | --- | --- | --- images (required) | array[string] | - | An array of images. The elements should be the URLs to the images you want to use. background | string | #000000 | The background color of the component as a hex code. placeholder | string | - | The location of the image to be used while the actual image is still loading width | string | 100% | The width of the component. Valid options are things like 100%, 500px, 90vw, etc. height | string | 100% | The height of the component. Valid options are things like 100%, 500px, 90vw, etc. ratio | float | 1.4 | The ratio of the tiles. A value of 1 represents a perfect square. Higher values make the tiles taller, while lower values make them wider row-min | integer | 3 | The minimum number of tiles on a row, for mobile screens row-max | integer | 9 | The maximum number of tiles on a row, for massive screens item-width | integer | 250 | The target width (in pixels) of every tile. This is used to calculate the number of tiles that will be displayed per row. speed | float | 1 | A modifier to the speed. A value of 2 makes the tiles scroll by twice as fast. spacing | integer | 3 | The spacing between tiles, in pixels. angle | float | ~0.62 | The angle, in radians, of the plane.

Todo

• ~~Keep track of the rows / columns so we don't recalculate everything when the element resizes.~~
• Negative speed to go backwards.
• ~~Take DPI into account.~~
• ~~Calculate perspective based on size instead of fixed.~~ (Instead, you are able to pass an angle now)
• ~~Get rid of the 'rows' concept?~~
• Tilt-shift blur
• Disable the gradient with a prop
• ~~Set the perspective/rotation with a prop~~

Projects using this component

I'd love to see what you make with this. Shoot me a line to have your project added!

• ...
• ...

License

This project is licensed under the MIT License - see the license.md file for details