< Pete Goodman Web developer >

Labs - Javascript tweening boxes

Tuesday 19th February 2008, 21:51

I don't know if this will ever come in useful, but i created this a year or so ago as a proof-of-concept. It uses a parent html element in a similar way to a Photoshop or Flash mask, shifting the position of the 'stage' below to move and display child elements based on user interaction.

I used the javascript tween library to handle the movement, and wrote this javascript file to handle the logic.

Give it a go! Click on one of the links in the box below...

The html is pretty simple, just a number of div elements with a class of 'box', within a parent container.

<div id="stagecontainer">
	<div id="stage">
		<div class="box" id="boxlinks">
			<h3>box links</h3>
			<ul>
				<li><a href="#box1">box 1</a></li&
                                 ...
                                <li><a href="#box9">box 9</a></li>
			</ul>
		</div>
		<div class="box" id="box1">
			<h3>box 1</h3>
			<p>Lorem ipsum ...</p>
			<p><a class="back" href="#boxlinks">« back</a></p>
		</div>
		...
		<div class="box" id="box9">
			<h3>box 9</h3>
			<p>Lorem ipsum ...</p>
			<p><a class="back" href="#boxlinks">« back</a></p>
		</div>
	</div>
</div>		
	

The CSS is used to set a fixed size for the main container, and to style each box within this container. This allows the content to be displayed in a nice way if javascript is not available. The only difference is in this case, each box would be displayed one below the next, rather than having a different arrangement.

#stage {
	width : 400px;
	height : 250px;
	overflow : hidden;
}

.box {
	width : 300px;
	height : 150px;
}
	

The javascript loops through each box, adding a few extra CSS styles that allow it to be positioned. It also sets listeners on the 'box' and 'back' links, and when they are pressed, the stage 'scrolls' to this position.

It is possible to tweak quite a few styles easily. To change the tween type, and time it takes to complete a tween, just change the two values you use when initialising the javascript:

// initialise the stage scroller, set default values
stageScroller.init(Tween.elasticEaseOut, 3)
	

If you want to change the positioning of the boxes, just change the following two lines (90 & 91) in the main stageScroller javascript file. At the moment, it places them at various points around a circle, but there's no reason why they can't be positioned completely randomly.

this.boxes[x].top = Math.round(Math.cos((2 * Math.PI * x)/this.boxes.length) * 480);
this.boxes[x].left = Math.round(Math.sin((2 * Math.PI * x)/this.boxes.length) * 480);
	

• Back to labs

• Add a comment

Add this

If you like this lab, please feel free to bookmark or share it.

About

Hello!

I am a freelance web developer and teacher based in Brighton, UK.

On this site you will find a selection of my latest projects in my portfolio, and some of my latest web experiments in the labs section.

If you have any comments / compliments / complaints about anything you see on this site please feel free to get in touch…

Pete

Latest updates

Subscribe to the latest updates via an RSS feed

• Responsive Astronomy Picture of the Day
  A responsive (mobile-optimised) version of the Astronomy Picture of the Day web page
  Lab added: Sunday 15th January 2012
• Wrrds
  Allow people to add messages to be displayed on a screen
  Lab added: Sunday 11th December 2011
• Mac PHP/JS Spotify Remote Control - Spotimote
  Control Spotify remotely from a phone or browser
  Lab added: Wednesday 31st August 2011
• Tweet Munger - Custom Translations
  Translate (mung) tweets from a specific user account through a custom set of translations, then re-tweet from a new account.
  Lab added: Friday 22nd July 2011
• Tweet Munger
  Translate (mung) tweets from a specific user account through several languages and back, then re-tweet from a new account.
  Lab added: Sunday 17th July 2011