Showcase “Fly-over-background Tile ... or Fx.Scroll”

One of the oldest showcases to present the fly-over-background behaviour known from Flash-based websites, but now also possible with Javascript + MooTools: smooth effect, simple code and an accessible result.

The Action Happens Here

Jump to: The Blue Sky | Last Grass | The Tree | The Lonesome Tree

The Blue Sky

Last Grass

The Tree

The Lonesome Tree

You can find this as Fx.Scroll demo also in the MooTools demos.

JavaScript & MooTools

window.addEvent('domready', function() {
 
	var scroll = new Fx.Scroll('demo-tile', {
		link: 'cancel',
		duration: 2500,
		offset: {'x': -200, 'y': -50}, // some padding
		transition: Fx.Transitions.Quad.easeInOut
	});
 
	$$('#content a[href^="#"]').addEvent('click', function() {
		var target = document.getElement(this.get('href'));
		if (target) scroll.toElement(target);
		return false;
	});
 
});

XHTML Markup

<p>
	<strong>Jump to:</strong>
	<a href="#content1">The Blue Sky</a> |
	<a href="#content2">Last Grass</a> |
	<a href="#content3">The Tree</a> |
	<a href="#content4">The Lonesome Tree</a>
</p>
 
<div id="demo-tile">
	<div id="demo-tile-inner">
		<div id="content1" class="demo-content" style="left: 250px; top: 100px;">
			<h1>The Blue Sky</h1>
		</div>
		<div id="content2" class="demo-content" style="left: 800px; top: 1350px;">
			<h1>Last Grass</h1>
		</div>
 
		<div id="content3" class="demo-content" style="left: 1200px; top: 550px;">
			<h1>The Tree</h1>
		</div>
		<div id="content4" class="demo-content" style="left: 1700px; top: 1300px;">
			<h1>The Lonesome Tree</h1>
		</div>
	</div>
</div>
 
<div class="notice clear">
	You can find this as Fx.Scroll demo also in the <a href="http://demos.mootools.net/Fx.Scroll">MooTools demos</a>.
</div>
 

CSS Stylesheet

#demo-tile
{
	height:					400px;
	width:					650px;
	margin:					1em 0;
	overflow:				hidden;
	float:					left;
	position:				relative;
}
 
#demo-tile-inner
{
	width:					2270px;
	height:					1704px;
	background-image:		url(tile.jpg);
	position:				relative;
}
 
.demo-content
{
	background-color:		#fff;
	position:				absolute;
	padding:				15px 30px;
}
 

This example and the accompanying sources/assets are © 2008-2009 by Harald Kirschner and available under The MIT License. For debugging and profiling the scripts and their markup download Firefox and use addons like Firebug and Web Developer Toolbar.

Share it: Stumble it!Digg This!del.icio.us (No Posts)

discussion by DISQUS No Comments

Please use the support forums for discussing the project, asking questions or posting bug-fixes!

Sort:
No Comments
  • First
  • ‹ Prev
  • Next ›
  • Last
No Comments
  • First
  • ‹ Prev
  • Next ›
  • Last

Post your comment

Please use the support forums for discussing the project, asking questions or posting bug-fixes!


Internet Consultant & Contractor

I'm available to combine forces with you and your team to find the most simple, elegant and convenient web solutions . I await your call.

If you just like my work and want to say Thank You, donate via PayPal or Amazon Wish List.

Developer Resources & Tools