حرکت بک گراند به دنبال موس.

این تاپیک 6 پاسخ و 2 مشارکت کننده دارد . آخرین آپدیت توسط :  Hideous Swan ،‏ 4 ماه و 2 هفته پیش .

این تاپیک تاکنون 216 بازدید داشته است .

نویسنده پست
یکشنبه ، 24 جولای 2016     11:04 ب.ظ #


Hideous Swan

Subscriber
8 پست4 تاپیک

سلام.

خسته نباشید.

یه سوال داشتم.

خواستم ببینم کدی هست که عکس بک گراند یا عکس خاصی تا حدودی به دنبال موس کشیده بشه؟

یعنی تا یه حدی حرکت کنه و تکون بخوره..

مثل این سایت

http://schwing.com/sct/

ممنون میشم پاسخ بدین :)

 

0  تشکر
:: این تاپیک، پاسخ تائیدشده دارد : مشاهده پاسخ تائید شده توسط سوال کننده
دوشنبه ، 25 جولای 2016     1:47 ق.ظ #


Pouria Ariafar

ناظم
141 پست9 تاپیک

سلام

بفرما اینم کدش :)

http://codepen.io/chrisboon27/pen/rEDIC

3  تشکر
دوشنبه ، 25 جولای 2016     2:27 ق.ظ #


Hideous Swan

Subscriber
8 پست4 تاپیک

سلام.

من همش شما رو توی زحمت میندازماااا :d

فقط یه سوال ..

کدا رو که میزارم وبم جواب نمیده یعنی بک گراند تکون نمیخوره...

چکار کنم؟

اینک کدی که میزارم
<div id="top-image"></div>
<style>
#top-image {
background:url('https://d3ui957tjb5bqd.cloudfront.net/images/screenshots/products/0/8/8905/red-rocks-park-o.jpg') -25px -50px;
position:fixed ;
top:0;
width:100%;
z-index:0;
height:100%;
background-size: calc(100% + 50px);
}
</style>
<script
$(document).ready(function() {
var movementStrength = 25;
var height = movementStrength / $(window).height();
var width = movementStrength / $(window).width();
$("#top-image").mousemove(function(e){
var pageX = e.pageX - ($(window).width() / 2);
var pageY = e.pageY - ($(window).height() / 2);
var newvalueX = width * pageX * -1 - 25;
var newvalueY = height * pageY * -1 - 50;
$('#top-image').css("background-position", newvalueX+"px "+newvalueY+"px");
});
</script>
 

کجای کارم ایراد داره؟؟؟

بازم ممنون :)

2  تشکر
دوشنبه ، 25 جولای 2016     7:33 ق.ظ #


Pouria Ariafar

ناظم
141 پست9 تاپیک

سلام خواهش :)

تگ باز اسکریپت مشکل داره < نذاشتی

3  تشکر
دوشنبه ، 25 جولای 2016     2:55 ب.ظ #


Hideous Swan

Subscriber
8 پست4 تاپیک

سلام

نه خب اونم گذاشتم باز نشد..

اینم کد قالبم 😀

 

پیوست ها:
You must be logged in to view attached files.
1  تشکر
دوشنبه ، 25 جولای 2016     3:28 ب.ظ # پاسخ تائید شده توسط سوال کننده


Pouria Ariafar

ناظم
141 پست9 تاپیک

سلام

برات درست کردم

فقط هزینه داره اونم اینکه 50 تا صلوات برام بفرس :)

 

پیوست ها:
You must be logged in to view attached files.
2  تشکر
دوشنبه ، 25 جولای 2016     4:06 ب.ظ #


Hideous Swan

Subscriber
8 پست4 تاپیک

دمت گرم من 55 تا فرستادم چون تسبیح نداشتم با بند انگشت حساب کردم گفتم شاید کم گفته باشم :)

بازم ممنووووووووون 3>

 

1  تشکر
پست 1 تا 7 (از مجموع 7 پست)

این تاپیک پاسخ تائید شده دارد و بسته شده است .