Block Options


Let's start out with some basic definitions:

iBox 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id lectus sem. Cras consequat lorem.

iBox 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id lectus sem. Cras consequat lorem.

iBox 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id lectus sem. Cras consequat lorem.

Let's start putting it together


You're allowed to have as many backdrops and sprites as you'd like. You can set the direction and speeds separately for each one. But before we go any further, let's take a look at the interface to our left.

You need to select the number of backdrops and sprites you'd like to utilize. Once you've set this, click on the "refresh" symbol, and you'll get a box for each backdrop and sprite.

By default, the height of your DepthCharge section is 400px. If you'd like to override the default height, input the height, in px, in the box labeled Block Height. Put the number only, there is no need to indicate px.

iBox 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id lectus sem. Cras consequat lorem.

iBox 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id lectus sem. Cras consequat lorem.
 

Backdrops


The first two options are pretty self explanatory. Using the uploader, upload the image that you want as the backdrop. Set the scrolling speed above it. Backdrops don't current have "slower" forward scrolling because the way the movement is calculated, it is equivalent to having a "reverse" speed.

iBox 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id lectus sem. Cras consequat lorem.

iBox 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id lectus sem. Cras consequat lorem.

There are two functions of the DepthCharge engine that are at its core. The SmartSize feature, and the dynamic creation of waypoints. Because of all the variables of proper parallax implementation, most examples of parallax are either very simple, or hand coded taking tens if not hundreds of hours of labor and calculations. We've really endeavored to bring the power of parallax straight to designers.

Our SmartSize feature will automatically calculate the travel and visible distance based on the speed and direction you set. It will then dynamically resize the image so it is big enough. But going even further, it will take into consideration the ratio of the image and compare it again the block size, even downsizing the image if it can so you preserve as much of the image as you can. And it does it all responsively as well. It's magic.

Use Centered in conjunction with SmartSize to make sure your images will be centered in your block.

 

Sprites


Sprites are objects that dance around your screen. You set their direction and speed independently, just like backdrops. Sprite positioning is relative to the block. When you choose a direction, it is from the Sprite's beginning location. By default, a Sprite's location is in the exact center of the Block that houses it. It will then move, based on your speed and direction, from that starting location. This is particularly useful for headers and other items that are viewed on the first screen.

Let's talk about two features that you can use to change that behavior.

iBox 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id lectus sem. Cras consequat lorem.

iBox 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id lectus sem. Cras consequat lorem.

This is where the magic happens. You can make images or text dance around the screen. This is where what you set for the Contained feature is really important. Do you want those Sprites visible when their path takes them outside of the Block? If not, make sure Contained is turned on!

By default, Sprite positioning starts in the middle of the block where it renders. Offsets work in both default and Slingshot. Essentially, they shift the whole path of an object vertically, or horizontally. The offset, like all numeric settings in this section are pixels. It is not necessary to add 'px'.

Slingshot mode gives you a more flexible positioning system for items you want to catch more attention with. They will travel and meet the center of the screen when the block is centered. This is also how you create the effect of a falling object!

DepthCharge currently supports two types of Sprites, SlabText and Images. We'll go over that in our final lesson of the day.

 

Images


Your Sprite can be an image or a SlabText object. Images are pretty straight forward. As you can see above, you use the uploader to add your sprite, and that's pretty much it! You're good to go. The object will now animate across the page at your behest.

SlabText


DepthCharge also has built in support for SlabText. To the right, you'll see the SlabText interface. If you are changing the Sprite type, just like above, choose the "refresh" symbol to have your Sprite morph to the other mode. Here, you'll type in the text, choose a font, with full preview, and also set the SlabText width. The width is a percentage of the Block. It is completely responsive too, just like everything, so you know you'll always get a good size! The last thing to do is to choose your text color with the built in color picker.

Now What?


Go and play!

You can now combine your logo with key marketing messages that engage the user throughout the site. Or, immerse your visitors in a story told using rolling panels. Your site is now a dynamic playground. DepthCharge is all modular and clone-able using the power of DMS. You can design your dynamic site right in front of you.

Web design was getting a bit boring anyways. Add depth, engagement or enchantment to your site with DepthCharge.