مشکل با css animate

[mtkzz]

سلام
وقتی من کلاس مورد نظرم رو به بخش دلخواه میدم وقتی صفحه رو اسکرول میکنم تا به بخش مورد نظر برم افکت داده شده اجرا نمیشه. اما وقتی روی افکت مورد نظر باشم و f5 بزنم وقتی صفحه لود میشه و همونجا باشه افکت نمایش داده میشه. من میخوام مثل بسیاری از سایت ها هنگامی که صفحه اسکرول میخوره انیمیشن مورد نظر کار کنه . در بعضی از سایت ها دیدم که وقتی اسکرول میخوره و یک بار انیمیشن اجرا میشه مجدد که به انجا اسکرول کنی انیمیشن نمایش داده نمیشه ولی بعضی ها هر بار که اون بخش دیده بشه انیمیشن هم اجرا میشه. در کل چطور میشه اینو کنترل کرد ؟
با تشکر

- - - Updated - - -

چیزی که متوجه شدم با جی کوئری باید کلاس اضافه کرد.
مثلا باید وقتی به کلاس ... رسید کلاس ... رو اضافه کن (دلخواه: و وقتی که خارج شد کلاس ... حذف کن)
ولی نمیدونم از چی باید استفاد کرد

[mojtaba05]

با سلام٬



// به جای 400 فاصله مورد نظرتون تا بالای صفحه بر حسب پیکسل رو بنویسید
var num = 400;
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('.item').addClass('animate');
}
});


در کد بالا این قانون وضع شده که وقتی صفحه اسکرول شد و از محل اولیه‌ش 400 پیکسل فاصله گرفت٬ به کلاس item کلاس animate هم اضافه شود.

[mtkzz]

بدون در نظر گرفتن ارتفاع می خوام. شاید n تا قسمت داشته باشم که بخوام استفاده کنم. اونوقت مشکل میشه. بخصوص اگه سایت رسپانسیو هم باشه که باز مشکل بیشتر میشه...

[mojtaba05]

ممکنه یک مثال بزنید تا من دقیقا متوجه منظورتون بشم؟

[mtkzz]

ممکنه یک مثال بزنید تا من دقیقا متوجه منظورتون بشم؟
مثال : :www.theknot.com (https://www.theknot.com/)/
تغریبا وسطای صفحه (بعد از اسلایدشو و چند عکس)
هر وقت اسکرول به بخش مورد نظر میرسه و نمایش داده میشه با افکت دیده میشه. در ظاهرا یک کلاس اضافه و حذف میشه. چطور میشه اینو تعریف کرد ؟

[mojtaba05]

بله با همون روشی که گفتم می تونید عمل کنید، تعیین می کنید که وقتی یک مقدار معینی از بالا فاصله گرفتیم چه اتفاقی بیفتد.
حالا می توانید مستقیما دستور Css بدید و یا با تغییر کلاس، فرمان های لازم رو به عناصر مورد نظرتون اعمال کنید.
اتفاقا در قالبی که در حال حاضر در حال طراحی هستم (http://modernbeauty.ir/) از تکنیک مشابه در زیر اسلایدشو بهره بردم.

[iFire]

شما باید کاری کنید که انیمیشن زمانی شروع بشه که المان مربوطه تو دید کاربر هست یا اصطلاحا تو view port هست
برای راحتی کار از کتابخونه زیر استفاده کنید که قابلیت تشخیص view port رو هم داره
http://jackonthe.net/css3animateit/
موفق باشید...

[mojtaba05]

شما باید کاری کنید که انیمیشن زمانی شروع بشه که المان مربوطه تو دید کاربر هست یا اصطلاحا تو view port هست
برای راحتی کار از کتابخونه زیر استفاده کنید که قابلیت تشخیص view port رو هم داره
http://jackonthe.net/css3animateit/
موفق باشید...

سلام، از این پلاگینی که آدرس دادید من نتونستم استفاده کنم، یه پلاگین مشابه بود که برای من کار کرد:
https://github.com/protonet/jquery.inview

و یک روش هم بدون استفاده از پلاگین و با آزمون و خطا تونستم درست کنم:


$(document).ready(function(){

$(window).on('scroll', function(){

//اول مقدار اسکرول از بالا را در یک متغیر ذخیره می کنیم

var scrollTop = $(window).scrollTop(),
//بعد مقدار فاصله عنصر از بالای پرونده (و نه صفحه نمایش) رو در یک متغیر ذخیره می کنیم

elementOffset = $('.element').offset().top,
// دو متغیر قبل رو از هم کم می کنیم که حاصلش مساوی است با فاصله عنصر ما از بالای صفحه یا همون ویوپورت

distance = (elementOffset - scrollTop),
//ارتفاع صفحه نمایش یا همون ویوپورت رو در یک متغیر ذخیره می کنیم

height = $(window).height();

// حالا شرط می کنیم که اگر فاصله بالای عنصر ما تا بالای ویوپورت کمتر از ارتفاع ویوپورت شد، کار دلخواه ما رو انجام بده

if(distance < height){

// کاری انجام بده

}
});
});

یه دموی آنلاین ساختم می تونید ببینید:
http://jsfiddle.net/sabeti05/3qc7ujx0/