استعمل مربع البحث في الاسفل لمزيد من المواضيع
سريع للبحث عن مواضيع في المنتدى
-
11-01-2013, بتوقيت غرينيتش 04:48 PM
#1
تفنن في تحريك العناصر في الصفحة مع magic css
طھظپظ†ظ† ظپظٹ طھط*ط±ظٹظƒ ط§ظ„ط¹ظ†ط§طµط± ظپظٹ ط§ظ„طµظپط*ط© ظ…ط¹ 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]
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©
المواضيع المتشابهه
-
بواسطة said في المنتدى لغات البرمجه للويب
مشاركات: 0
آخر مشاركة: 11-01-2013, بتوقيت غرينيتش 04:21 PM
-
بواسطة loulou ange في المنتدى دروس و تقنيات عالم التصميم
مشاركات: 0
آخر مشاركة: 10-30-2013, بتوقيت غرينيتش 07:21 AM
-
بواسطة romaissa في المنتدى دروس و تقنيات عالم التصميم
مشاركات: 0
آخر مشاركة: 10-30-2013, بتوقيت غرينيتش 03:29 AM
-
بواسطة admin في المنتدى ديكور و أناقة منزلية
مشاركات: 0
آخر مشاركة: 10-19-2013, بتوقيت غرينيتش 04:58 PM
-
بواسطة loulou ange في المنتدى خلفيات مسن msn - رمزيات مسن msn - ابتسامات مسن msn
مشاركات: 0
آخر مشاركة: 10-18-2013, بتوقيت غرينيتش 05:09 PM
ضوابط المشاركة
- لا تستطيع إضافة مواضيع جديدة
- لا تستطيع الرد على المواضيع
- لا تستطيع إرفاق ملفات
- لا تستطيع تعديل مشاركاتك
-
قوانين المنتدى