Scenic

Getting Started

Scenic - is a simple script that automatically animates layers of still imagery during scrolling for creating an illusion of 3D. It pans and zooms a photo to achieve a parallax effect.

You can also use any html elements as layers like div with text or buttons.

Preparing layers

For creating 3D photos you need to break your photo into layers. You can do it easily in editors like Adobe Photoshop. When you purchase our script you also get a video tutorial about creating layers in Photoshop. We also can create images for you for the reasonable price. If you need it contact us by email support@bukza.com.

Constructor

In the archive you will also get a visual constructor for creating your own photos. It is simple to use and will show you a result of your work and the code that is ready to be pasted into your webpage.

To run a constructor just open constructor\index.html file from the pack.

Manual setup

Basically you will need to add this minimal code to your page and script will start to work:

<html>
   <body>
        <div id="scenicElement">
			<div>
				<img src="1.jpg"/>
				<img src="2.png"/>
				<img src="3.png"/>
			</div>
		</div>
		<script src="js\scenic.min.js"></script>
		<script>
			document.addEventListener('DOMContentLoaded',
				function () {
					new Scenic(document.getElementById('scenicElement'));
				});
		</script>
   </body>
</html>

To get a more sophisticated configuration use a build-in constructor and read next sections of the documentation.

Including files →