[email protected]
mobile logo

3D CUBE DOCUMENTATION

Adsolutions / Documentation  / 3D CUBE DOCUMENTATION

3D CUBE DOCUMENTATION

The Cube template is a little more involved than most. But there’s an alternative available:

Send four images or three images (600x500px) and a video to [email protected] and we’ll build it for you.

The template consists of the following assets:

  • index.html
  • main.js
  • main.css

index.html
The head of the html contains the ad size and links to the core library and other two template assets.

<!DOCTYPE html>
<html>
	<head>		
		<meta charset="utf-8">
		<meta name="ad.size" content="width=300,height=250">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=0">
    <script type="text/javascript" src="http://onecreative.aol.com/ads/jsapi/ADTECH.js"></script>
    <link href="main.css" rel="stylesheet" type="text/css">
    <script src="main.js"></script>
  </head>

The body contains the four sides. (face front,face left, face right, face back) Each contains either an image or a video. If you add your own sources in each of the faces you’re done.

<body>
	<div class="mpu">
		<div class="viewport">
			<div class="cube">
				<div class="face front focused">
					<div class="design front-design">
						<img src="1_600x500.jpg" draggable="false">
					</div>
				</div>
				<div class="face right">
					<div class="design right-design">
						<img src="2_600x500.jpg" draggable="false">
					</div>
				</div>
				<div class="face left">
					<div class="design left-design">
						<img src="3_600x500.jpg" draggable="false">
					</div>
				</div>
				<div class="face back">
					<div class="design back-design">
						<div id="video"></div>
						<script>

						</script>
					</div>
				</div>
				<div class="face top">top</div>
				<div class="face bottom">bottom</div>
			</div>
		</div>
		<div class="arrow left"></div>
		<div class="arrow right"></div>
	</div>
</body>

main.js

The main.js together with the main.css takes care of the logic and rotation. If you want to animate your faces you can do so by adding your own divs and style in the html.

The main.js file is also the spot where the click is implemented. (line 260 to 270) You can change the URL in this file. Or designate it to a different element or add multiple clickable elements.

for(var i=0;i<faces.length;i++){
		faces[i].onclick = function(e){
			if(this.classList.contains('left')){
				ADTECH.click('left','http://www.adsolutions.com');
			}else if(this.classList.contains('right')){
				ADTECH.click('right','http://www.adsolutions.com');
			}else if(this.classList.contains('front')){
				ADTECH.click('front','http://www.adsolutions.com');
			}
		}
	}

The click is syntax is like so: ADTECH.click(‘Click Name‘, ‘your CLICK URL‘);

Click Name is used in the reports to distinguish which click through button was clicked on. You don’t have to enter the URL if you don’t know it yet. We can handle it for you if you send the URL or redirect later on.

SUPPORT
During the design phase we can provide you with a preview URL so you can see the work in action and make changes to your design accordingly. Send us the source files and fonts to [email protected] (WeTransfer preferred)

Final creative or requests for a preview can be send to [email protected]

Also read the GENERAL DOCUMENTATION fur further reference on building HTML5 ads.