README
Vue Zoom Scroll
Vue Zoom Scroll is an awesome lightweight scroll to zoom component that is easy to drop into any project. This plugin makes it easy to add a fun interactive element to any project.
View an example and full documentation here.
Tested In
Chrome, Firefox, Safari, Edge
Getting Started
Installation
npm install --save vue-zoom-scroll
Here is a usage example:
<script>
import ZoomScroll from "vue-zoom-scroll"
export default {
components: {
ZoomScroll
}
}
</script>
<template>
<ZoomScroll
initialScale="1"
maxScale="5"
zoomIntensity="50">
<p>You can put any html here like this</p>
</ZoomScroll>
</template>
Options
Here are all of the props you can pass in. Their default values and types are listed below.
initialScale
Default Value: 1
Type: Number
The starting scale value for your scroll animation. If you are zooming in, this value is the contents smallest point. If you are zooming out, this value is the contents largest point.
zoomDirection
Default Value: in
Type: String
Can be set to "in" or "out".
zoomIntensity
Default Value: 50
Type: Number
How fast and how much the content is zoomed. A lower number will result in a faster more extreme animation.
maxScale
Default Value: 10
Type: Number
The max scale value for the content when zoomDirection is set to "in".
minScale
Default Value: 0
Type: Number
The minimum scale for the content when the zoomDirection is set to "out".
zoomOrigin
Default Value: 50% 50%
Type: String
Controls the CSS transform-origin
property for the content that is scaled.
scrollDistance
Default Value: 2000
Type: Number
Controls how tall the scroll area is in pixels. No need to append "px" to the value.
backgroundImage
Default Value: Some random picture of a computer
Type: String
Provide a url to any background image you want to use. If you don't want a background image, set this to an empty string.
backgroundPosition
Default Value: center
Type: String
Controls the CSS background-position
property for the provided background image.
backgroundSize
Default Value: cover
Type: String
Controls the CSS background-size
property for the provided background image.