طھظپظ†ظ† ظپظٹ طھط*ط±ظٹظƒ ط§ظ„ط¹ظ†ط§طµط± ظپظٹ ط§ظ„طµظپط*ط© ظ…ط¹ magic css




الان مع التطور الجديد المطورين

يحثون عن أسهل طريقة لتحريك العناصر في الصفحة ويكون فيها تفاعل أكثر

الان مع ظهور CSS3 أصبح الموضوع أسهل



ظهر لنا magic هو ملف css عادي وأنت تظيفه الى العنصر فقط

وتتحكم في الحركة على كيفك



أمثلة

magic css3 animations

وهذه صفحة على الهب

https://github.com/miniMAC/magic


راح نعمل مثال بسيط الناتج يكون

http://boooooo.me/demo/4/




رمز PHP:
<code style="white-space:nowrap"> <code> <!DOCTYPE htm>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- ملف سي اس اس المساعد -->
<link href="magic.css" rel="stylesheet" type="text/css">
</head>
<!-- مكتبة جكويري -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<!-- تأثير الصورة الاول -->
<script>
$(document).ready(function() {
$('#a').hover(function () {
$(this).addClass('magictime tinRightOut');
});

<!-- تأثير الصورة الثانية -->
//لتشغيل الحركة بعد وقت محدد الان 5 ثواني
setTimeout(function(){
$('#b').addClass('magictime foolishIn');
}, 5000);
});
</script>



<body>



<!-- صورة واحد -->
<img id="a" src="http://www.dzbatna.net/vb/AGT04-b/head_img/dzbatna_logo.png" width="154" height="58" />
<hr />
<!-- صورة الثانية -->
بعد 5 ثواني يعمل التأثير
<br />
<img id="b" src="http://www.dzbatna.net/vb/AGT04-b/head_img/dzbatna_logo.png" width="154" height="58" />
</body>
</html>
</code> </code>



الملف المثال في المرفق








الملفات المرفقة [TR]
4.zip (6.6 كيلوبايت, عدد مرات المشاهدة 31 مرة) [/TR]



©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©