Skip to content

Instantly share code, notes, and snippets.

@zackn9ne

zackn9ne/index.php

Created April 3, 2012 22:41
Show Gist options
  • Save zackn9ne/2296035 to your computer and use it in GitHub Desktop.
Save zackn9ne/2296035 to your computer and use it in GitHub Desktop.
Download ZIP
background scroll
Raw
index.php
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="bg_containers">
<div class="bg1"></div>
<div class="bg2"></div>
<div class="bg3"></div>
</div>
</body>
<!-- for background scroll http://jquery.malsup.com/cycle/lite/ -->
<!-- and.. http://www.magneticwebworks.com/jquery-rotating-page-background/ -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.cycle.lite.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#bg_containers').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
<!-- end rotating background -->
</html>
Raw
style.css
#content {position:relative;width:800px; height:600px; margin:0; z-index:999; padding:270px 0 0;}
/* classes to work with cycle plugin for BG images */
#bg_containers {width:800px; margin:0;}
#bg_containers div {width:800px; height:600px; margin:0 auto;}
#bg_containers .bg1 {background:url(1.jpg) no-repeat;}
#bg_containers .bg2 {background:url(2.jpg) no-repeat;}
#bg_containers .bg3 {background:url(3.jpg) no-repeat;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment