: LanG-pc

DeletedUser

Guest
Chapter 4

animation

كيف اخلي النص متحرك في صفحة الاتش تي ام ال (html)

اولا لازم تكون فاهم الشرح الموجود في شابتر 3 الي نزلته قبل 3 ايام لاننا راح نستخدم الستايل شيت بموضوعنا اليوم


يله نبدا

بسم الله



HTML:
<html>
<body>

<h1>Abu.Rajih</h1>

</body>
</html>

<style>

body
{
هنا قم بوضع مميزات البودي وهي حسب ذوقك
}

h1

{
animation: salim 5s linear infinite;
}

@keyframes salim
{
0%  {color:red;}
100%{color:black;}
}


</style>





animation: salim 5s linear infinite;

animation: = اتريبوت او ميزة ولازم تكتب بشكل صحيح

salim = اسم الحركه (تقدر تكتب اي شي)

5s = مدة الحركة تقدر وهي بالثانيه ( انا خليتها 5 ثواني)

linear infinite = حركة لا نهائية ( لو مثلا تبي الحركة تطلع لك 4 مرات تغيرها الى 4)

بهذا الشكل

animation: salim 5s 4;


ويليها لازم تكتب هذي وهي عباره عن حركات
@keyframes salim
{
0% {هنا تكتب اي مميزات}
100%{هنا تكتب اي مميزات}


وهذا من تصميمي عسى يفيدكم

HTML:
<html>
<body>


<h1>Abu.Rajih</h1>



</body>
</html>

<style>

body
{
background:url(https://pingmod.com//wp-content/uploads/2017/11/AAEAAQAAAAAAAAk8AAAAJGQ4ZDI3ZTFiLTk3MmMtNDM3Mi05ZjJkLWNhYzVjODJkZjA2Zg.jpg);
background-size:100% 100%;
background-attachment: fixed;
background-repeat: no-repeat;
}


h1
{
color:blue;
font-family:vivaldi;
font-size: 60px;
text-shadow: 0 0 2px black,0 0 2px black,0 0 2px black,0 0 2px black;
text-align:center;
/* الانيميشن يبدا من هنا تمام؟ */
animation: salim 5s linear infinite;
}

@keyframes salim
{
0%  {color:red;}
100%{color:black;}
} 


</style>



غداً ان شاء الله راح ابدا بالجافا سكريبت
 
التعديل الأخير بواسطة المشرف:

DeletedUser

Guest
بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته

حبيت اليوم انزل شرح عن الجافا سكريبت

JavaScript

راح ابدا بشرح طريقة تغير لون لخط معين في الصفحه الي تبيها انت


getElement
توجد 3 اكواد توصلك للتاج الي تبي تعدل عليه انت مثلا عندنا بعض التاجات يكون لها id والبعض الاخر يكون له class
وهذه توضع داخل التاج لتميز التاج عن غيره او تميز بعض التاجات عن غيرها بمعنى اصح
حلو؟؟


اولا للوصول الى تاج معين في الصفحه راح تستخدم

PHP:
var s = document.getElementsByTagName('هنا تحط اسم التاج');




اما لو كان التاج له id فراح تستخدم هذا الكود





PHP:
var s = document.getElementById('التاج id هنا تحط');





اما لو كان التاج له class فراح تستخدم




PHP:
var s = document.getElementsByClassName('التاج class هن تحط');



انا بعطيكم طريقة توصلك للتاج الي تبيه انت

مثلا انا ابي اغير لون هذي الكلمه وانا ما اعرف تاجها

hgqvp0IdTdS-89z4GT6mxg.png


حلو ؟

راح نحط مؤشر الماوس عليه ثم نضغط رايت كليك (الزر الايمن في الماوس)
ثم تضغط على
inspect
كما تلاحظ ف الصوره

8gkBpcvcTOyHxwtQPmmstA.png


بيطلع لك التاج حق الكلمه الي حددتها انت


كيف تعرف التاج حقها ؟؟


شوف الصوره تحت

lN3x2rRbSEWCg1ijba9i_g.png



بما اني عرفة اسم التاج فراح تتسهل لي العمليه

طبعا اسم التاج a

ليس له class ولا id
واضح ؟؟

بما انه تاج لوحده فراح نستخدم
var s = document.getElementsByTagName('هنا تحط اسم التاج');

ونغير بين السنجل كوت الي لونها احمر الى اسم التاج يعني بيصير الكود
var s = document.getElementsByTagName('a');

لاحظ وين نقطة الاختلاف بين الكودين
فقط حطيت اسم التاج في مكانه

الان خليني اعطيكم كود جاهز والي راح اشرحه مع مرور الايام


PHP:
javascript:
(function(){
 var s = document.getElementsByTagName('a');
     s[0].style.color = 'red';
})();


بعض المعلومات ممكن تشغل بالك

var
هذه ثابته وتستخدم للمتغير

انا كاتب بالسكربت فوق بعد الـ var
كتبت s

حرف s ليس ثابت يمكنك استبداله بأي حرف ام شي لا يكون ارقام او رموز

اما
= document.getElementsByTagName('');
فهذه لازم تكتب بشكل صحيح وبنفس الطريقه الي بالسكربت
 

موكا

نبيل
مستوى التفاعل
8.077
كنك سحبت علينا في تكمله الشروحات ههههههههههههههههههههههههه
 

Abu.Rajih

نبيل
مستوى التفاعل
541
53.jpg

توقف عن كونك إنسان مثالثي , وتمتع بوقاحتك قليلاً.
 
أعلى