مشکل با css3 animate

[mtkzzzz]

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

[mtkzzzz]

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

[H:Shojaei]

با اسکرول میتونید کار کنید مثلا وقتی اسکرول از بالا 200 شد بیا یک کلاس رو با $('#elementID').addclass('class-name'); اضافه و وقتی مثلا 400 شد با removeClass(); هم حذف کنید...

[mtkzzzz]

در صورتی که ارتفاع صفحه ثابت باشه از این شیوه میشه استفاده کرد. ضمن اینکه بخش هایی که میخوام استفاده کنم زیاده.
باتشکر.

[mtkzzzz]

عذر خواهی بابت اسپم. ولی چون زمان خورد مجدد پیگیری میکنم. کسی هست کار کرده باشه ؟

[AmirHz.ir]

ابتدا opacity بخشی که میخواید با اسکرول لود بشه رو 0 بدین و بعد مثلا کلاسی بنویسید که به نام show و opacity اونو 1 بدین .
حالا با جیکوئری اون کلاس زمانی که scroll به offset-top اون بخش رسید اضافه کنید .

$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(scrollTop > 50)
$('.top-nav').addClass('stuck');
else
$('.top-nav').removeClass('stuck');
});
مثلا در توضیح کد بالا وقتی به اندازه 50 پیکسل اسکرول شد کلاس stuck به عنصر با کلاس top-nav اضافه میشه

[mtkzzzz]

ممنون. ولی این لینک رو ببینید : + (http://themes.muffingroup.com/be/pizza/)
با اسکرول کلاس جدید که حاوی انیمیشن هست اضافه میشه. با انیمیشنش مشکل ندارم. فقط چطور باید بگیم وقتی به این بخش رسیدی اد کلاس کنه ؟

[H:Shojaei]

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

[mtkzzzz]

دوست عزیز از این واضح تر دیگه نمیشه راهنمایی کرد شما مثلا میخواید وقتی به اون دایو ها رسید اسکرول یه کاری انجام بشه؟ باغ تالار تهران (http://www.talarnet.com/garden-hall/garden-halls-tehran/)
خوب باید ببینید اون دایو توی چه ارتفاعی از ضفحه قرار میگیره و یا این که تاپ اون رو بگیرید و بگید وقتی اسکرول از تاپ این دایو بیشتر شد یک کلاسی بهش اضافه بشه...
دوست عزیز خوندید من چی گفتم ؟!

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

[H:Shojaei]

دوست عزیز خوندید من چی گفتم ؟!

من میدونم شما چی میگید. ولی انگار شما متوجه منظورم نمیشید و همونو اومدید توضیح میدید !
من گفتم این راه به درد من نمیخوره. چون ارتفاع مطالبم متغیره و ثابت نیست !
ضمن اینکه امیر جان هم روشی گفتند که راحت میشه برخی کارها رو انجام داد که در آینده ازش استفاده میکنم.
خیر من خوندم شما چی گفتید ولی ظاهرا نگرفتید من چی گفتم:


خوب باید ببینید اون دایو توی چه ارتفاعی از ضفحه قرار میگیره

$('divclass').top();

کد بالا فاصله از بالای اون دایوری که میخواید رو بهتون میده هرچی باشه حالا شما میتونید بگید:


// on scroll window
if($('divclass').top()<$(window).scrollTop())
//do effects

این کد ربطی به محتوای شما نداره که ارتفاعشون چقدر باشه...

[CodeNEvis111]

با سلام

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

این لینک ها رو ببین شاید کمکت کنه:

http://codepen.io/bramus/pen/yikfd
http://codepen.io/benske/full/yJoqz
http://blog.templatemonster.com/2014/07/07/webpage-scrolling-animation-effects-css3-jquery/