salima
11-01-2013, بتوقيت غرينيتش 04:48 PM
http://www.dzbatna.com/images/icons/iconrote.gif طھظپظ†ظ† ظپظٹ طھط*ط±ظٹظƒ ط§ظ„ط¹ظ†ط§طµط± ظپظٹ ط§ظ„طµظپط*ط© ظ…ط¹ magic css (http://www.dzbatna.com/t2331067/)
http://upload.dzbatna.net/upfiles/JRg54051.png
الان مع التطور الجديد المطورين
يحثون عن أسهل طريقة لتحريك العناصر في الصفحة ويكون فيها تفاعل أكثر
الان مع ظهور CSS3 أصبح الموضوع أسهل
http://upload.dzbatna.net/upfiles/J6Z54823.png
ظهر لنا magic http://www.dzbatna.com/images/smilies/icon31.gif هو ملف css عادي وأنت تظيفه الى العنصر فقط
وتتحكم في الحركة على كيفك
http://upload.dzbatna.net/upfiles/tkL32764.png
أمثلة
magic css3 animations (http://www.minimamente.com/magic-css3-animations/)
وهذه صفحة على الهب
https://github.com/miniMAC/magic
راح نعمل مثال بسيط الناتج يكون
http://boooooo.me/demo/4/
http://upload.dzbatna.net/upfiles/J6Z54823.png
رمز 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>
http://upload.dzbatna.net/upfiles/J6Z54823.png
الملف المثال في المرفق
http://upload.dzbatna.net/upfiles/mA854984.png
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif 4.zip (http://www.traidnt.net/vb/attachments/709852d1379690960-4.zip) (6.6 كيلوبايت, عدد مرات المشاهدة 31 مرة)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
http://upload.dzbatna.net/upfiles/JRg54051.png
الان مع التطور الجديد المطورين
يحثون عن أسهل طريقة لتحريك العناصر في الصفحة ويكون فيها تفاعل أكثر
الان مع ظهور CSS3 أصبح الموضوع أسهل
http://upload.dzbatna.net/upfiles/J6Z54823.png
ظهر لنا magic http://www.dzbatna.com/images/smilies/icon31.gif هو ملف css عادي وأنت تظيفه الى العنصر فقط
وتتحكم في الحركة على كيفك
http://upload.dzbatna.net/upfiles/tkL32764.png
أمثلة
magic css3 animations (http://www.minimamente.com/magic-css3-animations/)
وهذه صفحة على الهب
https://github.com/miniMAC/magic
راح نعمل مثال بسيط الناتج يكون
http://boooooo.me/demo/4/
http://upload.dzbatna.net/upfiles/J6Z54823.png
رمز 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>
http://upload.dzbatna.net/upfiles/J6Z54823.png
الملف المثال في المرفق
http://upload.dzbatna.net/upfiles/mA854984.png
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif 4.zip (http://www.traidnt.net/vb/attachments/709852d1379690960-4.zip) (6.6 كيلوبايت, عدد مرات المشاهدة 31 مرة)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
