جیکوئری: حرکت دایو ها با حرکت موس

[saelozahra]

سلام
ببخشید هر چی سرچ کردم به نتیجه نرسیدم
دنبال آموزش این میگردم
http://www.culturalsolutions.co.uk/
اون بالا رو اگه دقت کنین وقتی موس رو جا به جا میکنیم نسبت به جهتی که موس رفته دایو ها هم جا به جا میشن
کسی میدونه چطوری میشه همچین تکنیکی رو پیاده کرد ؟

[saelozahra]

اینم یه نمونه دیگه
http://www.billysdiner.com/

http://wagerfield.github.io/parallax/

[دانیال دزفولی]

سلام این قابلیت dragable نام داره و با برنامه ی دریم ویوور میشه بدون کد نویسی این کارو کرد
با جی کوریu i هم میشه درمورد جی کوری یو آی تحقیق کنید
توی دریم ویور یه بخش داره بیهاویورس اونجا باید اینکارو کرد دقت کنید پوزیشن دیو باید ابسولوت باشه و چوپ و راست درصدی نداده باشید
و وقت رویی درگ و دروپ زدید باید قبلش نشانگر موس روی تگ شروع بادی کلیک شده باشه


گیج شدید ؟ اگه متوجه نشدید درباره ی درگ و دروپ تو دریم ویور و بخش بیهاوروس بگروید
اگه اشکال تایپی هم داشت ببخشید با دردسر ن شوشتم

[دانیال دزفولی]

البته شاید تو html 5 هم به ااین بخورید درباره ی اینم تحقیق کنید
<tag dragable="true">
<\tag>

[saelozahra]

سلام داداش
دمت گرم
ولی dragable مگه برا وقتی نبود که یه دایو رو درگ میکردیم ؟
این اتوماتیک وقتی موس میره راست دایوا رو میبره راست و وقتی موسه میره چپ دایوا رو میبره چپ
با یه کد جیکوئری تو همه سایتا دارن این کارو میکنن
https://github.com/wagerfield/parallax
اینجا توضیح داده ولی سر در نیاوردم !

[jalil_gh]

اینا چند تا عکس قرار دادن داخل یک div که position عکس‌ها absolute هست و روی هم قرار گرفته. حالا تو رویداد mousemove مربوط به div حساب می‌کنن که موس چقد جابجا شده. بر حسب میزان حرکت موس، اون عکس‌ها رو جابجا می‌کنن. مثلاً عکس اول رو ۵ پیکسل، عکس دوم رو ۴ پییکسل و ... . با یه کم بالا پایین کردن این مقادیر میشه این افکت های جالب رو ایجاد کرد.

[L E N A]

البته به این سادگیام نیس!

اینجا رو ببینید : وبلاگ احد نعمتی (http://blog.ahad.pro/%D8%A7%D9%81%DA%A9%D8%AA-jquery-parallax/)
ضمنا مطالب دیگه ای هم توش هست که خیلی به درد من خورده تا حالا :لبخندساده:

[dreadful]

باوو اینا نداره خو ،فقط این کدو استفاده کن (+jQuery)



$(document).ready(function(e) {
$(document).mousemove(function(event) {
x=event.pageX;
y=event.pageY;


$('.div').css('margin-left', 300 + x/50);
$('.div').css('margin-top', 200 + y/50);


});
});

[dreadful]

اگه چند تا div داشته باشی و بخوای یه افکت پالاراکس درست کنی باید اون تقسیم رو کوچیکتر یا بزرگتر کنی کها به نظر جلو یا عقبتر به نظر بیاد !
از فیلتر blur و opacity توی css استفاده کن تا بهتر به نظر بیاد

+ دوستان سعی کنید همه چیز رو قاطی پاتی نکنید :لبخند:

[Omid Jackson]

من سه دایره برای نمونه گذاشتم
http://jsfiddle.net/OmidJackson/x3vc5/