Fx.Scroll
Fx.Scroll allow to scroll to position and elements
docs referencesjs code | html code | css code
References to Documentation
var scroll = new Fx.Scroll('demo-wrapper', { wait: false, duration: 2500, offset: {'x': -200, 'y': -50}, transition: Fx.Transitions.Quad.easeInOut }); $('link1').addEvent('click', function(event) { event = new Event(event).stop(); scroll.toElement('content1'); }); $('link2').addEvent('click', function(event) { event = new Event(event).stop(); scroll.toElement('content2'); }); $('link3').addEvent('click', function(event) { event = new Event(event).stop(); scroll.toElement('content3'); }); $('link4').addEvent('click', function(event) { event = new Event(event).stop(); scroll.toElement('content4'); });
<h3>Fx.Scroll</h3> <p><strong>Fly-Over-Background</strong></p> <p><strong>Note</strong>: Background image is 257kb, it may requires a bit of time to load.</p> <p>You can find original Fly-Over-Background on <a href="http://dev.digitarald.de/tile.html" title="digitarald's Fly-Over-Background">digitarald's website</a></p> <div id="demo-bar"> <a id="link1" href="#">The Blue Sky</a> | <a id="link2" href="#">Last Grass</a> | <a id="link3" href="#">The Naked Tree</a> | <a id="link4" href="#">The Lonesome Tree</a> </div> <div id="demo-wrapper"> <div id="demo-inner"> <div id="content1" class="scrolling-content"> <h1>The Blue Sky</h1> </div> <div id="content2" class="scrolling-content"> <h1>Last Grass</h1> </div> <div id="content3" class="scrolling-content"> <h1>The Naked Tree</h1> </div> <div id="content4" class="scrolling-content"> <h1>The Lonesome Tree</h1> </div> </div> </div>
#demo-bar { margin: 5px auto; padding: 5px 0; width: 600px; border-bottom: 1px solid #B3D4EF; background: #EFF8FF; text-align: center; } #demo-wrapper { margin: 5px auto; overflow: hidden; height: 400px; width: 600px; border: 1px solid #ddd; position: relative; } #demo-inner { width: 2270px; height: 1704px; background-image: url(mountains.jpg); position: relative; } .scrolling-content { background: transparent url(bubble.png) top left no-repeat; width: 139px; height: 73px; text-align: center; position: absolute; } .scrolling-content h1 { color: #fff; padding: 25px 0; font-size: 12px; } #content1 { left: 250px; top: 100px; } #content2 { left: 800px; top: 1350px; } #content3 { left: 1200px; top: 550px; } #content4 { left: 1700px; top: 1300px; }
Fx.Scroll
Fly-Over-Background
Note: Background image is 257kb, it may requires a bit of time to load.
You can find original Fly-Over-Background on digitarald's website