Block Options


Let's start out with some basic definitions:

Block

The primary container within the DepthCharge section.

Backdrops

A background that is assigned to a block. We call them backdrops to emphasize their layered nature.

Sprites

An object that sits on top of of the block. Currently, DepthCharge supports images and slabtext elements.

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.

Panel

Choose this option if you want the block to span the entire height of the window. This will override whatever is in your block height setting.

Contained

By default, sprites whose paths animate outside of the block are still shown. With contained on, the sprites will not render beyond the viewport of the block.
 

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.

SmartSize

Automatically resizes the image perfectly for the block based on the speed and direction that you've set.

Centered

This will center the backdrop in the viewport regardless of the width of the block or screen size.

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.

Offsets

Allow you to set an offset from the default position of the sprite.

Slingshot Mode

A dynamic position mode where the apex of the path is the point where the center of the block meets the center of the page.

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.