Canvas HTML5 - Drag image from top to bottom

JavaScript
1

Got a requirement from client to implement “Page Zipper Effect” on a webpage where user will drag a ZIP image to reveal the site content.

Below are the images to help understanding the effect to be implemented.

Zipper Initial State
enter image description here

Zipper Drag State
enter image description here

Found something similar on one of the site where CANVAS tag has been used to achieve the desired effect. This snippet is a paid thing so for now, i have used his example page code to prepare a fiddle to play around.

HTML

<div id="containerZipper">
    <canvas id="canvasback"></canvas>
    <canvas id="canvas"></canvas>
    <canvas id="overlapcanvas"></canvas>
</div>

As per requirement, we need to implement the floral image dragging when user drag the zip downwards to fill the wall with floral pattern. Being a newbie to CANVAS, nothing worked for me yet after spending 3-4 hours.

Trying to reach the developer community to check the feasibility for dragging flower pattern image i.e. Step-2.

Please provide some pointers and suggestions if this effect can be achieved by making changes into this code.

2

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.