以下是 带上下箭头jQuery视差滚动特效js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<html>
<head>
<META NAME="DESCRIPTION" CONTENT="Loader Javscript Preview">
<meta name="viewport" content="minimal-ui, width=device-width, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>�����¼�ͷjQuery�Ӳ������Ч</title>
<link href="style.css" rel="stylesheet" type="text/css">
<!-- JQuery needed! -->
<script src="js/jquery-1.11.1.js" type="text/javascript"></script>
<script src="js/parallax.js" type="text/javascript"></script>
</head>
<body>
<!-- BG -->
<div id="bg">
</div>
<!-- END BG -->
<!-- FG -->
<div id="parallaxLeft">
</div>
<div id="parallaxRight">
</div>
<!-- END FG -->
<!-- NAVIGATOR -->
<div id="top" class="circles">
<a href="javascript:void(0);"><img class="circles" src="imgs/arrowUp2.png" alt="up"/></a>
</div>
<div id="graphicsPos">
</div>
<div id="bottom" class="circles">
<a href="javascript:void(0);"><img class="circles" src="imgs/arrowDown2.png" alt="down"/></a>
</div>
<!-- END NAVIGATOR -->
<!-- Divs used for boxes' text -->
<div id="hiddenContent0" class="hidden">
<div class='abs' id="abs0"><!-- I M P O R T A N T: it is necessary for the correct page view-->
<h1>Parallax Scrolling</h1><br/><br/>
<p style="text-align:center;">Features:<br/><br/>
<ul>
<li>Multi-pages <b>Parallax-scrolling</b> Layout</li>
<li><b>Cross-browser</b> Support: <b>Mozilla Firefox, Google Chrome, Safari, Opera, Internet Explorer 6+, etc...</b></li>
<li><b>Easy Customization</b> (colors, boxes templates, fading effects, ...)</li>
<li><b>JQuery</b> Efficient Animations</li>
</div>
</ul>
</p>
</div>
</div>
<div class="hidden" id="hiddenContent1">
<div class="abs" id="abs1">
<h1>Mobile support</h1>
<br/><br/>
<img src="imgs/ip1.png" alt="iphone1"/>
<img src="imgs/ip2.png" alt="iphone2"/>
</div>
</div>
<div class="hidden" id="hiddenContent2">
<div class='abs' id="abs2">
<h1 style="font-family: 'Raleway', sans-serif; font-size: 40px;">Lorem Ipsum</h1><br/><br/>
<p id="pLeft" style="font-family: 'Raleway', sans-serif; font-size: 20px; line-height: 30px;">
<b>Lorem</b> ipsum dolor sit amet, consectetur adipiscing elit. <b>Nunc</b> ullamcorper arcu ut scelerisque dapibus. <br/>Nullam tempor, ipsum vitae fermentum facilisis, nibh diam imperdiet augue, ac convallis erat sem ut tellus. Morbi ac sagittis arcu. Fusce at felis ut purus eleifend suscipit ut id neque. Sed ipsum velit, ultrices eu aliquet ac, malesuada sit amet justo. Nullam in nisl eu erat suscipit iaculis non sed elit. Nulla sagittis nisl vitae velit pretium convallis. Donec pharetra nisl ac justo vehicula, non tempus turpis scelerisque. Nulla facilisi. Quisque sit amet volutpat orci. Etiam eget mauris odio. <br/><br/>Ut imperdiet accumsan enim nec sollicitudin. Nullam dictum sed est vitae iaculis.
Donec placerat metus nec dolor tempus, <b>pulvinar</b> lacinia elit tempus. Morbi gravida nunc eget purus posuere pretium. Phasellus ut orci bibendum, interdum urna non, sollicitudin erat. Cras quis ultricies nisl. Ut tristique tincidunt sem id volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Vivamus augue felis, venenatis at lacinia nec, imperdiet eu nisl. Sed a augue odio. Nulla facilisi. Mauris enim lectus, convallis ut gravida vel, accumsan a elit. Duis dignissim tincidunt massa ut sollicitudin. Mauris bibendum suscipit diam nec bibendum. <br/>
Praesent dui odio, faucibus a sagittis sit amet, suscipit id magna. Mauris at viverra quam. <b>Vestibulum orci leo</b>, ornare id ante vitae, sodales dignissim metus. Etiam eu auctor ante. Maecenas eu sapien lobortis, malesuada risus porttitor, volutpat dui. Nunc tempor mi in tellus luctus, vitae aliquet ligula faucibus.<br/>Ut aliquam justo eget ligula accumsan, vitae adipiscing tortor molestie. Cras eu commodo sem, ut tincidunt eros. Ut cursus accumsan nisl vitae suscipit.
</p>
<div id="pRight">
<div style="text-align:center; width:100%"><img src="imgs/lorem.jpg" alt="lorem"/></div><br/>
<p style="font-family: 'Raleway', sans-serif; font-size: 20px; line-height: 30px;">
Phasellus ut orci bibendum, interdum urna non, sollicitudin erat. Cras quis ultricies nisl. Ut tristique tincidunt sem id volutpat.
</p>
</div>
</div>
</div>
<div class="hidden" id="hiddenContent3">
<div class="abs" id="abs3">
<br/><br/>
<p style="text-align:center;">Insert how many pages you want!</p>
</div>
</div>
<div class="hidden" id="hiddenContent4">
<div class="abs" id="abs4">
<h1>Author</h1>
<br/><br/>
</div>
</div>
<!-- END Divs used for boxes' text -->
<script type="text/javascript">
//Check for mobile navigator
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
$(".circles").css({"width":"10%"});
$(".circles").css({"height":$(".circles").width()+"px"});
createBoxesMobile();
}else{
$(".circles").css({"width":"4%"});
$(".circles").css({"height":$(".circles").width()+"px"});
createBoxes();
}
// I M P O R T A N T : use this function at the end of script
settingUp();
</script>
</body>
</html>JS代码(parallax.js):
var currentBox;
// Disable mouse wheel clickdocument.addEventListener("mouseup",function(e){
if(e.button == 1){
e.preventDefault();
$("html,body").animate({
scrollTop:$("#"+currentBox).offset().top}
,250);
}
}
,true);
var goTo;
// Create boxesfunction createBoxes(){
var cont=document.getElementById("bg");
var right=document.getElementById("parallaxRight");
var left=document.getElementById("parallaxLeft");
var boxes=5;
var colors=["#FF6600","#FFCC66","#99FF66","#99CCFF","#FF0066"];
var bgColors=["#FFCC00","#FF3300","#009933","#33CCCC","#990099"];
currentBox=0;
var scrollTimer=null;
var resizeTimer;
// FUNCTIONSfunction scrollDown(){
if (currentBox<(boxes-1)){
scrollTimer=null;
currentBox+=1;
if(currentBox==boxes-1){
$("#bottom").fadeOut(500);
}
else{
$('#top').fadeIn(500);
}
$('#bg').animate({
"top":(-currentBox*100)+'%'}
,500);
$('#parallaxLeft').animate({
'top':(currentBox*100)+'%'}
,500);
$('#parallaxRight').animate({
'top':(currentBox*100)+'%'}
,500);
$("#mini"+(currentBox-1)).animate({
"padding":'0'}
,500);
$("#mini"+currentBox).animate({
"padding":'10%'}
,500);
//Text fade effect$("#abs"+currentBox).fadeOut(5);
$("#abs"+currentBox).fadeIn(1000);
//-STOP- text fade effect}
}
function scrollUp(){
if (currentBox>0){
scrollTimer=null;
currentBox-=1;
if(currentBox==0){
$("#top").fadeOut(500);
}
else{
$('#bottom').fadeIn(500);
}
$('#bg').animate({
"top":(-currentBox*100)+'%'}
,500);
$('#parallaxLeft').animate({
'top':(currentBox*100)+'%'}
,500);
$('#parallaxRight').animate({
'top':(currentBox*100)+'%'}
,500);
$("#mini"+(currentBox+1)).animate({
"padding":'0'}
,500);
$("#mini"+currentBox).animate({
"padding":'10%'}
,500);
//Text fade effect$("#abs"+currentBox).fadeOut(5);
$("#abs"+currentBox).fadeIn(1000);
//-STOP- text fade effect}
}
goTo=function(number){
if(number==0){
$("#top").fadeOut(500);
$("#bottom").fadeIn(500);
}
else if(number==(boxes-1)){
$("#bottom").fadeOut(500);
$("#top").fadeIn(500);
}
else{
$('#bottom').fadeIn(500);
$('#top').fadeIn(500);
}
$('#bg').animate({
"top":(-number*100)+'%'}
,500);
$('#parallaxLeft').animate({
'top':(number*100)+'%'}
,500);
$('#parallaxRight').animate({
'top':(number*100)+'%'}
,500);
$("#mini"+(currentBox)).animate({
"padding":'0'}
,500);
$("#mini"+number).animate({
"padding":'10%'}
,500);
//Text fade effect$("#abs"+number).fadeOut(5);
$("#abs"+number).fadeIn(1000);
//-STOP- text fade effectcurrentBox=number;
}
function resizeEv(){
$("html,body").animate({
scrollTop:$("#"+currentBox).offset().top}
,250);
// Abs div regolationfor(var i=0;
i<boxes;
i++){
$("#abs"+i).css({
"left":"1%","width":"97%"}
);
}
$(".circles").css({
"width":"4%"}
);
$(".circles").css({
"height":$(".circles").width()+"px"}
);
$("#graphicsPos").css({
"width":"2%"}
);
$(".miniCircles").css({
"width":"70%"}
);
$(".miniCircles").css({
"height":$(".miniCircles").width()+"px"}
);
}
// -STOP- FUNCTIONS// CREATE Colorful boxesfor(var i=0;
i<(boxes-1);
i++){
cont.innerHTML+=("<div class='bgBoxes'></div>");
left.innerHTML+=("<div class='leftBoxes' style='height:100%;
background-color:"+colors[boxes-1-i]+"'></div>");
right.innerHTML+=("<div class='rightBoxes' style='height:100%;
background-color:"+colors[boxes-1-i]+"'></div>");
}
cont.innerHTML+=("<div id='0' class='bgBoxes' style='background-color:"+bgColors[0]+"'></div>");
left.innerHTML+=("<div class='leftBoxes' style='height:100%;
background-color:"+colors[0]+"'></div>");
right.innerHTML+=("<div class='rightBoxes' style='height:100%;
;
background-color:"+colors[0]+"'></div>");
for(var i=1;
i<(boxes);
i++){
cont.innerHTML+=("<div class='bgBoxes' id='"+i+"' style='background-color:"+bgColors[i]+"'></div>");
left.innerHTML+=("<div class='leftBoxes' style='height:100%;
'></div>");
right.innerHTML+=("<div class='rightBoxes' style='height:100%;
'></div>");
}
// -STOP- CREATE Colorful Boxes// Mousewheel events/*Firefox*/
$("body").bind('DOMMouseScroll',function(e){
if(e.originalEvent.detail > 0){
//scroll downif(scrollTimer){
clearTimeout(scrollTimer);
}
scrollTimer=setTimeout(scrollDown,250);
}
else{
//scroll upif(scrollTimer){
clearTimeout(scrollTimer);
}
scrollTimer=setTimeout(scrollUp,250);
}
//prevent page fom scrolling return false;
}
);
/*IE,Opera,Safari*/
$("body").bind('mousewheel',function(e){
if(e.originalEvent.wheelDelta < 0){
//scroll downif(scrollTimer){
clearTimeout(scrollTimer);
}
scrollTimer=setTimeout(scrollDown,250);
}
else{
//scroll upif(scrollTimer){
clearTimeout(scrollTimer);
}
scrollTimer=setTimeout(scrollUp,250);
}
//prevent page fom scrolling return false;
}
);
//insert mini circles in graphicsPosfor(var i=0;
i<boxes;
i++){
document.getElementById("graphicsPos").innerHTML+="<a href='javascript:void(0)'> <div id='mini"+i+"' class='miniCircles' onclick='goTo("+i+")'></div> </a>";
}
$('#top').click(function(e){
scrollUp();
}
);
$('#bottom').click(function(e){
scrollDown();
}
);
$(window).resize(function(){
clearTimeout(resizeTimer);
resizeTimer = setTimeout(resizeEv,100);
}
);
$("#graphicsPos").css({
"width":"2%"}
);
$(".miniCircles").css({
"width":"70%"}
);
$(".miniCircles").css({
"height":$(".miniCircles").width()+"px"}
);
// Inserting HTMLfor(var i=0;
i<boxes;
i++){
insertHtml("hiddenContent"+i,String(i));
}
}
function createBoxesMobile(){
var cont=document.getElementById("bg");
var right=document.getElementById("parallaxRight");
var left=document.getElementById("parallaxLeft");
var boxes=5;
var colors=["#FF6600","#FFCC66","#99FF66","#99CCFF","#FF0066"];
var bgColors=["#FFCC00","#FF3300","#009933","#33CCCC","#990099"];
currentBox=0;
// FUNCTIONS$(window).scroll(function(){
var height = $(window).scrollTop();
if(height == 0){
location.reload();
}
}
);
function scrollDown(){
if (currentBox<(boxes-1)){
currentBox+=1;
if(currentBox==boxes-1){
$("#bottom").fadeOut(500);
}
else{
$('#top').fadeIn(500);
}
$('#bg').animate({
"top":(-currentBox*100)+'%'}
,500);
$('#parallaxLeft').animate({
'top':(currentBox*100)+'%'}
,500);
$('#parallaxRight').animate({
'top':(currentBox*100)+'%'}
,500);
$("#mini"+(currentBox-1)).animate({
"padding":'0'}
,500);
$("#mini"+currentBox).animate({
"padding":'10%'}
,500);
//Text fade effect$("#abs"+currentBox).fadeOut(5);
$("#abs"+currentBox).fadeIn(1000);
//-STOP- text fade effect}
}
function scrollUp(){
if (currentBox>0){
currentBox-=1;
if(currentBox==0){
$("#top").fadeOut(500);
}
else{
$('#bottom').fadeIn(500);
}
$('#bg').animate({
"top":(-currentBox*100)+'%'}
,500);
$('#parallaxLeft').animate({
'top':(currentBox*100)+'%'}
,500);
$('#parallaxRight').animate({
'top':(currentBox*100)+'%'}
,500);
$("#mini"+(currentBox+1)).animate({
"padding":'0'}
,500);
$("#mini"+currentBox).animate({
"padding":'10%'}
,500);
//Text fade effect$("#abs"+currentBox).fadeOut(5);
$("#abs"+currentBox).fadeIn(1000);
//-STOP- text fade effect}
}
goTo=function(number){
if(number==0){
$("#top").fadeOut(500);
$("#bottom").fadeIn(500);
}
else if(number==(boxes-1)){
$("#bottom").fadeOut(500);
$("#top").fadeIn(500);
}
else{
$('#bottom').fadeIn(500);
$('#top').fadeIn(500);
}
$('#bg').animate({
"top":(-number*100)+'%'}
,500);
$('#parallaxLeft').animate({
'top':(number*100)+'%'}
,500);
$('#parallaxRight').animate({
'top':(number*100)+'%'}
,500);
$("#mini"+(currentBox)).animate({
"padding":'0'}
,500);
$("#mini"+number).animate({
"padding":'10%'}
,500);
//Text fade effect$("#abs"+number).fadeOut(5);
$("#abs"+number).fadeIn(1000);
//-STOP- text fade effectcurrentBox=number;
}
function adjustSizes(){
//Other Sizesif ($(".bgBoxes").width()>$(".bgBoxes").height()) //landscape{
$(".circles").css({
"width":"10%"}
);
$(".circles").css({
"height":$(".circles").width()+"px"}
);
$("#graphicsPos").css({
"width":"5%"}
);
$("#graphicsPos").css({
"top":$(".bgBoxes").height()/2-$("#graphicsPos").height()}
);
$(".miniCircles").css({
"width":"70%"}
);
$(".miniCircles").css({
"height":$(".miniCircles").width()+"px"}
);
}
else{
//portrait$(".circles").css({
"width":"20%"}
);
$(".circles").css({
"height":$(".circles").width()+"px"}
);
$("#graphicsPos").css({
"width":"10%"}
);
$("#graphicsPos").css({
"top":$(".bgBoxes").height()/2-$("#graphicsPos").height()}
);
$(".miniCircles").css({
"width":"70%"}
);
$(".miniCircles").css({
"height":$(".miniCircles").width()+"px"}
);
}
$("#parallaxLeft").css({
"width":"4%"}
);
$("#parallaxRight").css({
"width":"7%"}
);
// Abs div regolationfor(var i=0;
i<boxes;
i++){
$("#abs"+i).css({
"left":"4%","width":"89%"}
);
}
//Font Sizes$("p").css({
"font-size":$(".bgBoxes").height()/30+"px"}
);
$("ul").css({
"font-size":$(".bgBoxes").height()/30+"px"}
);
$("h1").css({
"font-size":$(".bgBoxes").height()/20+"px"}
);
}
// -STOP- FUNCTIONS// CREATE Colorful boxesfor(var i=0;
i<(boxes-1);
i++){
cont.innerHTML+=("<div class='bgBoxes'></div>");
left.innerHTML+=("<div class='leftBoxes' style='height:100%;
background-color:"+colors[boxes-1-i]+"'></div>");
right.innerHTML+=("<div class='rightBoxes' style='height:100%;
background-color:"+colors[boxes-1-i]+"'></div>");
}
cont.innerHTML+=("<div id='0' class='bgBoxes' style='background-color:"+bgColors[0]+"'></div>");
left.innerHTML+=("<div class='leftBoxes' style='height:100%;
background-color:"+colors[0]+"'></div>");
right.innerHTML+=("<div class='rightBoxes' style='height:100%;
;
background-color:"+colors[0]+"'></div>");
for(var i=1;
i<(boxes);
i++){
cont.innerHTML+=("<div class='bgBoxes' id='"+i+"' style='background-color:"+bgColors[i]+"'></div>");
left.innerHTML+=("<div class='leftBoxes' style='height:100%;
'></div>");
right.innerHTML+=("<div class='rightBoxes' style='height:100%;
'></div>");
}
// -STOP- CREATE Colorful Boxes// Disable TouchMove eventsvar lastY;
$(document).bind('touchmove',function (e){
e.preventDefault();
}
);
//insert mini circles in graphicsPosfor(var i=0;
i<boxes;
i++){
document.getElementById("graphicsPos").innerHTML+="<a href='javascript:void(0)'> <div id='mini"+i+"' class='miniCircles' onclick='goTo("+i+")'></div> </a>";
}
adjustSizes();
//Adjust sizes on orientation change$(window).bind("orientationchange",function(){
var orientation = window.orientation;
var new_orientation = (orientation) ? 0:180 + orientation;
$("html,body").animate({
scrollTop:$("#"+currentBox).offset().top}
,5);
adjustSizes();
}
);
$('#top').click(function(e){
scrollUp();
}
);
$('#bottom').click(function(e){
scrollDown();
}
);
//Inserting Html/*for(var i=0;
i<boxes;
i++){
insertHtmlMobile("hiddenContent"+i,String(i));
}
*/
insertHtmlMobile("hiddenContent0","0");
}
// -STOP- Create boxes functionsfunction insertHtml(divId,boxId){
//boxIds are numbers:0,1,2,3,4 if boxes=5document.getElementById(boxId).innerHTML+=document.getElementById(divId).innerHTML;
}
function insertHtmlMobile(divId,boxId){
//boxIds are numbers:0,1,2,3,4 if boxes=5document.getElementById(boxId).innerHTML+=document.getElementById(divId).innerHTML;
}
function settingUp(){
//Text fade effect$("#abs0").fadeOut(5);
$("#abs0").fadeIn(1000);
//-STOP- text fade effect$("#top").fadeOut(500);
$("#mini0").animate({
"padding":'10%'}
,500);
$("html,body").animate({
scrollTop:$("#0").offset().top}
,5);
}
CSS代码(style.css):
html,body{margin:0px;padding:0px;width:100%;height:100%;}
html{overflow:hidden;}
body{position:static;}
h1{/*font-family:'Raleway',sans-serif;*/
top:2%;padding:0px;margin:0px;position:relative;text-align:center;width:100%;font-family:'Indie Flower',cursive;font-size:70px;}
p{top:2%;padding:0px;margin:0px;font-family:'Indie Flower',cursive;font-size:40px;text-align:justify;position:relative;}
ul{padding:0px;margin:0px;font-family:'Indie Flower',cursive;position:relative;font-size:30px;text-align:left;left:10%;width:90%;}
img{position:relative;}
#pLeft{float:left;width:50%;left:10%;top:5%;}
#pRight{position:absolute;float:rigth;width:30%;right:5%;left:65%;}
#parallaxLeft{position:absolute;left:0px;top:0px;height:100%;width:1%;}
#parallaxRight{position:absolute;right:0px;top:0px;height:100%;width:2%;}
#bg{position:absolute;top:0px;left:0px;right:0px;width:100%;height:100%;text-align:center;}
#top{top:3%;text-align:center;}
#top img{width:100%;height:100%;}
#bottom{bottom:3%;text-align:center;}
#graphicsPos{position:fixed;top:40%;right:2%;height:10%;}
.abs{box-sizing:border-box;position:relative;width:100%;height:100%;right:0px;left:0px;}
.bgBoxes{width:100%;height:100%;top:0px;left:0px;}
.circles{position:fixed;right:1%;border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%;background-color:rgba(0,0,0,0.6);}
.miniCircles{border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%;background-color:rgba(0,0,0,0.6);}
.hidden{display:none;}
分享到QQ
分享到微博
微信扫一扫
