very lightweight CanvMov object to create a beautiful moved blocks in your html
The library is not dependant on any external library like jQuery.
To start using the library you will have to include the source code in your page's head or in any place under script tags
<script src="{base_url}/js/canvmov.js" />
// or
<script src="{base_url}/js/canvmov.min.js" />
To initialize the canvmov you will have to prepare the markup for it
<div style="width: 100%; height: 400px">
<canvas id="testCanvas1" />
</div>
The width and height styles for the parent element are to be set, in order to manage the block's size. When the html ready, you need to initialize the js object.
<script>
var testCanv1 = CanvMov.getInstance();
// About options read further
testCanv1.init({ `options` })
</script>
The CanvMov object need options to be initialized. The options contain the urls to the images, their positioning etc...
Here is the initial options object that needs to be extended
options : {
width: window.innerWidth,
height: window.innerHeight,
relativeToWindow: false,
images: {},
centerX: '',
centerY: '',
canvasId: '',
bgImage: {,
url: '',
fIndex: 0
},
}
'images' parameter should be an array and each array object should contain following params
images : [
{
url: "{url to the image}",
fIndex: 0
fIndexY: 0
positionFromLeft: 0
positionFromTop: 0
}
]
Not all of these options need to be overwritten though.
| Option Name | Option details |
|---|---|
| width | No need to extend, calculated based on parent's size |
| height | No need to extend, calculated based on parent's size |
| relativeToWindow | Defines if the movement is done anytime when mouse is moved or only when the mouse moves inside canvas's area |
| centerX | No need to extend, calculated based on parent's size |
| centerY | No need to extend, calculated based on parent's size |
| canvasId | The id of the canvas element where the images will be rendered |
| bgImage | The object containing the background image object |
| bgImage => url | url to the background image |
| bgImage => fIndex | The sensitivity of the background image to the mouse movement. In other words, the speed of the movement. |
| images | An array containing the images information |
| images => url | url to the image |
| images => fIndex | The sensitivity of the background image to the mouse movement. In other words, the speed of the movement in horizontal perspective. |
| images => fIndexY | The sensitivity of the background image to the mouse movement. In other words, the speed of the movement in vertical perspective. |
| images => positionFromLeft | Position from the left edge of the canvas. Note: The position should be number representing the percentage. i.e: positionFromLeft: 50 // The image will be rendered from the center of the canvas |
| images => positionFromTop | Position from the top edge of the canvas. Note: The position should be number representing the percentage. i.e: positionFromLeft: 50 // The image will be rendered from the center of the canvas |
See the examples of the extended options in the samples section
Relative to window
Relative to the canvas
var flyingSanta = CanvMov.getInstance();
flyingSanta.init({
canvasId: 'flying_santa',
relativeToWindow: false,
bgImage: {
url: "img/flyingsanta/flying-bg.svg",
fIndex: 2
},
images: [
{
url: "img/flyingsanta/cloud.svg",
fIndex: -0.4,
fIndexY: 0,
positionFromLeft: 60,
positionFromTop: 7
},
{
url: "img/flyingsanta/cloud.svg",
fIndex: -0.8,
fIndexY: 0,
positionFromLeft: 25,
positionFromTop: 13
},
{
url: "img/flyingsanta/cloud.svg",
fIndex: -0.6,
fIndexY: 0,
positionFromLeft: 40,
positionFromTop: 10
},
{
url: "img/flyingsanta/snowflake.svg",
fIndex: 0.5,
fIndexY: -0.2,
positionFromLeft: 80,
positionFromTop: 28
},
{
url: "img/flyingsanta/snowflake.svg",
fIndex: 0.5,
fIndexY: -0.2,
positionFromLeft: -5,
positionFromTop: 10
},
{
url: "img/flyingsanta/snowflake.svg",
fIndex: 0.5,
fIndexY: -0.2,
positionFromLeft: -5,
positionFromTop: 10
},
{
url: "img/flyingsanta/snowflake.svg",
fIndex: 0.5,
fIndexY: -0.2,
positionFromLeft: 35,
positionFromTop: 6
},
{
url: "img/flyingsanta/snowflake.svg",
fIndex: 0.5,
fIndexY: -0.2,
positionFromLeft: 55,
positionFromTop: 11
},
{
url: "img/flyingsanta/snowflake.svg",
fIndex: 0.5,
fIndexY: -0.2,
positionFromLeft: 10,
positionFromTop: 25
},
{
url: "img/flyingsanta/snowflake-blur.svg",
fIndex: 0.1,
fIndexY: -0.1,
positionFromLeft: -7,
positionFromTop: 25
},
{
url: "img/flyingsanta/snowflake-blur.svg",
fIndex: 0.1,
fIndexY: -0.1,
positionFromLeft: 65,
positionFromTop: -45
},
{
url: "img/flyingsanta/snowflake-blur.svg",
fIndex: 0.1,
fIndexY: -0.1,
positionFromLeft: 15,
positionFromTop: -55
},
{
url: "img/flyingsanta/santa.svg",
fIndex: -2,
fIndexY: -0.5,
positionFromLeft: 50,
positionFromTop: 50
}
]
});
var testCanv = CanvMov.getInstance();
testCanv.init({
relativeToWindow: false,
canvasId: 'rocket',
bgImage: {
url: 'img/rocket/rocket-bg.png',
fIndex: -1,
},
images: [
{
url: 'img/rocket/deer.png',
fIndex: 0.5,
fIndexY: 0.1,
positionFromLeft: -5,
positionFromTop: 79
},
{
url: 'img/rocket/dog.png',
fIndex: -0.3,
fIndexY: 0,
positionFromLeft: 60,
positionFromTop: 85
},
{
url: 'img/rocket/giraffe.png',
fIndex: 0.3,
fIndexY: 0.2,
positionFromLeft: -2,
positionFromTop: 10
},
{
url: 'img/rocket/rocket.png',
fIndex: -1.2,
fIndexY: -2,
positionFromLeft: 40,
positionFromTop: 50
}
]
});
var testCanv2 = CanvMov.getInstance();
testCanv2.init({
relativeToWindow: true,
canvasId: 'aquarium',
bgImage: {
url: 'https://i.imgur.com/NyLnFY1.png',
fIndex: -1,
},
images: [
{
url: 'https://i.imgur.com/gtYkiUv.png',
fIndex: 2,
fIndexY: -0.5,
positionFromLeft: 80,
positionFromTop: 50
},
{
url: 'https://i.imgur.com/yhWv5wZ.png',
fIndex: -1.5,
fIndexY: -0.5,
positionFromLeft: -10,
positionFromTop: 18
},
{
url: 'https://i.imgur.com/RVUzdm0.png',
fIndex: -0.5,
fIndexY: -0.2,
positionFromLeft: 25,
positionFromTop: 56
},
{
url: 'https://i.imgur.com/Kinr59Q.png',
fIndex: -1.5,
fIndexY: -0.2,
positionFromLeft: 50,
positionFromTop: 70
},
{
url: 'https://i.imgur.com/0hK7gOj.png',
fIndex: -0.2,
fIndexY: -0.2,
positionFromLeft: 30,
positionFromTop: 10
},
{
url: 'https://i.imgur.com/b2IcofY.png',
fIndex: 0.9,
fIndexY: -1.2,
positionFromLeft: 50,
positionFromTop: 50
},
{
url: 'https://i.imgur.com/2SXW8AL.png',
fIndex: 0.5,
fIndexY: -0.6,
positionFromLeft: 15,
positionFromTop: 15
}
]
});