Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>Untitled Document</title>
- <style type="text/css">
- #header {
- -o-transform-origin: 460px 150px;
- background: #000000 url("http://www.devirtuoso.com/Examples/jQuery-Animated-Header/background.jpg") repeat-y;
- height: 300px;
- width: 920px;
- }
- </style>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
- </head>
- <body>
- <script type="text/javascript">
- function bgScroller(options) {
- var settings = {
- containerID: '', //id of the scroller's containing element
- scrollSpeed: 50, //Speed in milliseconds
- step: 1, //How many pixels to move per step
- imageHeight: 0, //Background image height
- headerHeight: 0, //How tall the header is.
- autoStart: true
- };
- if(options) {
- jQuery.extend(settings, options);
- }
- var current = 0, // The current pixel row
- restartPosition = -(settings.imageHeight - settings.headerHeight), //The pixel row where to start a new loop
- interval = null,
- $container = jQuery('#' + settings.containerID),
- that = {};
- if(!$container.length || !settings.imageHeight || !settings.headerHeight) {
- return false; //nothing will work without these settings so let's not even try
- }
- function setBg() {
- $container.css("background-position", "0 " + current + "px");
- }
- function scrollBg(){
- current -= settings.step;//Go to next pixel row.
- //If at the end of the image, then go to the top.
- if (current <= restartPosition){
- current = 0;
- }
- setBg();
- }
- that.reset = function() {
- that.stop();
- current = 0;
- setBg();
- }
- that.start = function() {
- interval = setInterval(scrollBg, settings.scrollSpeed);
- };
- that.stop = function(){
- clearInterval(interval);
- };
- that.reset();
- if(settings.autoStart) {
- that.start();
- }
- return that;
- }
- var headerScroller = new bgScroller({
- containerID: "header",
- scrollSpeed: 70,
- imageHeight: 4300,
- headerHeight: 300,
- step: 2,
- autoStart: false
- });
- setTimeout(headerScroller.start, 2000);
- setTimeout(headerScroller.stop, 6000);
- setTimeout(headerScroller.reset, 8000);
-
-
- </script>
- <div id="header"></div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement