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.
Keywords:
16 Comments
Please use the support forums for discussing the project, asking questions or posting bug-fixes!
Comments 1 – 16 of 16:
- First
- ‹ Prev
- Next ›
- Last
-
I gave up trying to make it work. I wrote my own javascript that is about 125 lines of code vs approx 10K lines for MooTools and MooToolsMore. It's not as slow at the end of the scroll, and IE and Firefox are slightly different speeds, but who cares?
http://netsperience.org/content/blog/fob-fly-ov...
I would say it depends on whether you are using MooTools for other effects, and how much customization you need.
@Nokao, whichever you use you can position elements with CSS - my script is for four equal panes, and the dimensions are set via javascript after page load. -
the js function is broken: need to move test for "#content" $$('#content a[href^="#"]') into function:
$$('a[href^="#"]').addEvent('click', function() {
var target = document.getElement(this.get('href'));
tstring = target.toString();
if (target && tstring.indexOf('#content')) scroll.toElement(target);
return false;
}); -
Actually, I arrived here:
http://www.alvisenicoletti.com/last-works/
I would like to have the FIRST LINK (and not the second) as starting position.
Indeed, the starting position is " 0:0 "
Maybe a solution could be to force a scroll.toElement(target); at body load, but I suck with javascript.
Can someone help me to do that? -
@Nokao
I do not see any scrolling on the link you provided
try:
function init() {
scroll.toElement('elementID');
}
onload = init;
where elementID is the CSS ID of the starting element
you can contact me at rgoya at yahoo dot com -
It doesnt FN work! >_<
-
You must read carefuly:
NOTE: All demos EXCEPT DomReadyVS.Load are wrapped inside a "domready" which is not included in the js code you see. (You can see it by viewing at page's actual source code). This means the following is the actual content of the page:
window.addEvent('domready', function() {
// HERE IS WHAT YOU READ IN JS CODE
}); -
Mihael, what does it mean ? You have to copy this one more code somewhere ? What are we suposed to do with the "window.addEvant('domready,function) thing ? Can you explain ?
thanks -
I have no idea what you are talking about.
I have tried this script tonnes of times and it never works. I would love to use it. -
why would this not work on my computer after making a clone of the site, and it does on the server??
-
Why can I not get this updated superior script to work, even after resorting to ripping the entire site it fails to work? There are no JS errors using FF error console.
-
Hello! I think it's good script, but it is not so effective...
-
And i think is so good, and so effective, look at this site for example:
http://www.zhytlobud.com/en/buildings/kiev/ -
dsf dsf sf fddd
-
Is there a way that multiple links on a page can target the same anchor? I've modified this code to work on my page (and it's great), but I need to have many links going back to a particular source (say the menu from all over the site). The first link in the page works well, but any link after it to the same target doesn't work. Is it an issue with the id?
-
good work thX
Comments 1 – 16 of 16:
- First
- ‹ Prev
- Next ›
- Last
Post your comment
Please use the support forums for discussing the project, asking questions or posting bug-fixes!
How do I set the starting position of the image?
Otherwise, is there a way to force a on one of the items after the page load?