Javidhb
شنبه 21 دی 1392, 23:27 عصر
یه راه راحتش اینه:
css:
#status{
position:fixed;
background-color:white;
width:50%;
height:50px;
margin-left:25%;
text-align:center;
}
div{
height:600px;
width:100%;
}
#skyblue{ background-color:skyblue; }
#skyblue h1{
width:50px;
margin:0 auto;
font-size:5em;
padding-top:100px;
}
#green{ background-color:green; }
#purple{ background-color:purple; }
#brown{ background-color:brown; }
section{
background-color:black;
width:200px;
height:200px;
}
h2{
position:relative;
left: -1000px;
top: 50%;
width:300px;
font-size:3em;
}
.firstEffect{
opacity:0.5;
width:100%;
}
.secondEffect{
padding-top:50px;
height:80%;
width:50%;
background-color:pink;
}
.thirdEffect{
left: 200px;
}
html:
p id="status">هنوز شروع نکردید</p>
<div id="skyblue">
<h1>Start</h1>
</div>
<div id="green">
<section id="greenBox"></section>
</div>
<div id="purple">
<section id="purpleBox"></section>
</div>
<div id="brown">
<h2>FINISHED</h2>
</div>
js:
var OLD_DIV_INDEX = 0; //0=> اولین دیو
var CURRENT_DIV_INDEX = 0;
var statusDiv = $('#status');
$(document).on('scroll', function(){
determineCurrentDiv();//شروع برنامه
});
//مشخص کردن دیوی که توی صفحه در حال نمایشه
function determineCurrentDiv(){
var curPos = $('body, html').scrollTop(); //مقدار اسکرول
//پیدا کردن div
var n = Math.floor(curPos / 600); //600 -> ارتفاع تمام دیوهای اصلی
var curDiv = $('div').get(n); //بدست آوردن دیوی که تو صفحه نمایش داریم میبینیم
var curDivColor = curDiv.getAttribute('id'); //گرفتن آی دی - که برابر یه رنگه
handleOldNewDivs(n); //بررسی کنیم که آیا وارد یه دیو جدید شدیم یا نه
var txt = 'distance from top: '+ curPos + '|| the div color: ' + curDivColor;
statusDiv.text(txt);
statusDiv.css({color: curDivColor}); //تغییر رنگ متناسب با رنگ دیو
}
//بررسی دیو جدید و قدیم
function handleOldNewDivs(n){
if(CURRENT_DIV_INDEX != n) //ورود به یه دیو جدید
{
CURRENT_DIV_INDEX = n; //ذخیره ایندکس دیو جدید
runEffect(CURRENT_DIV_INDEX); //اجرای افکت برای دیو جدید
//دیو قدیمی
//تخصیص ایندکس با توجه به حرکت از بالا به پایین یا برعکس
if(CURRENT_DIV_INDEX > OLD_DIV_INDEX){ //اسکرول رو به پایین
OLD_DIV_INDEX = CURRENT_DIV_INDEX-1;
}else{ //اسکرول به سمت بالا
OLD_DIV_INDEX = CURRENT_DIV_INDEX+1;
}
}
}
//اجرای افکتهای مربوط به هر دیو
function runEffect(indx){
//حذف همه افکتهایی که از طریق کلاس مربوطه بهشون اضافه کرده بودیم
$('div *').attr('class', '');
switch(indx){
case 1:
$('div').eq(1).find('section').toggleClass('firstE ffect', 2000);
break;
case 2:
$('div').eq(2).find('section').toggleClass('second Effect', 2000);
break;
case 3:
$('div').eq(3).find('h2').toggleClass('thirdEffect ', 500);
break;
}
}
البته از jqueryUi هم استفاده شده.
دمـو (http://jsfiddle.net/h4RLn/1/)