مانیستر دات آی آر

در این پست شما یاد میگیرین چحوری میتونین یک المنت توی صفحه رو به دور محیط یه دایره که خودتون تعیین میکنین بچرخونین .
این کار خیلی ساده هستش!
میتونین با خلاقیت خودتون جاهای مختلفی استفاده کنین...

ابتدا المنت مورد نظرتونو ایجاد کنین برای مثال :

<div  id="circ"></div>

برای المنت مورد نظر استایل بدین:

<style>
#circ{
width:200px;height:200px;background:tomato;padding:10px;margin:200px auto;border-radius:100%;position:relative
}
#circ:before{
content:'';
width:60px;
height:60px;
position:absolute;
background:#c0392b;
border-radius:100%;
left:40%;
top:40%;
}

</style>

کدی که برای perfix مرورگر های قدیمی (امیدوارم!) هست اتچ کنین:

<script src="http://up.monister.ir/view/1760843/prefixfree.min.js"></script>

حالا کار رسید به کدنویسی هسته ای :دی

<script>
var requestAnimationFrame = window.requestAnimationFrame ||
                            window.mozRequestAnimationFrame ||
                            window.webkitRequestAnimationFrame ||
                            window.msRequestAnimationFrame;

یه جورایی همون setInterval خودمونه ... البته یه جورایی :دی

var posx,posy,first=0,el = document.getElementById('circ');

متغیر هارو یه جا تعریف میکنیم حوصله نداریم posx برای فاصله از چپ و posy برای فاصله از بالا هستش البته میتونین posx رو راست هم در نظر بگیرین :دی اونوقت برعکس میچرخه...

function move(){

تابع رو باز کن :دی

first += 0.05;
posx = 125 + 200 * Math.cos(first)
posy = 5 + 200 * Math.sin(first);

محیط دایره رو بساز البته عدد هاشونو میتونین اینور و اونور کنین :دی

el.style.left = posx + 'px'
el.style.top = posy + 'px';

پوزشین رو بده یادت نره px هم بذاری

requestAnimationFrame(move)

خوب انیمیشن رو بنداز رو تردمیل :دی

}

یادت نره تابع رو ببندی و بعد اجراش کنی:

move()

دیدین چه راحت بود؟

اینم دمو