عمل شريط متحرك اخباري للموقع
يتمتع تصميم المواقع بكثير من الميزات الفنية واللمسات السحرية التي تعطي
الموقع شكل جمالي وهناك الكثير من الاضافات التي تبحث عنها من اجل اضافتها
الى موقعك وخاصة ما يتعلق بالشريط المتحرك الذي نستفيد منه في اضافة اخر
الاخبار والاخبار العاجلة و العناوين المهمة في الموقع والتي تدور حول اشياء
مهمة واليوم نقدم لكم كود جميل ورائع لكي تضع اضافة شريط اخبار عاجلة في
الموقع وذلك من خلال اتباع بعض الخطوات البسيطة والسهلة و هذا على الشكل
التالي :
- اضافة كلاس رئيسي و من ثم اضافة كلاس فرعي داخل الكلاس الرئيسي و يمكن
تسميته حسب رغبتك واعطائه المواصفات التالية تستطيع اضافة ميزات متوافقة مع
الموقع مثل اللون والطول والارتفاع ولون الخط وحجمه وشكله وذلك باضافة
المواصفات الى الكلاس الخاص بها وهي على الشكل التالي:
تسميته حسب رغبتك واعطائه المواصفات التالية تستطيع اضافة ميزات متوافقة مع
الموقع مثل اللون والطول والارتفاع ولون الخط وحجمه وشكله وذلك باضافة
المواصفات الى الكلاس الخاص بها وهي على الشكل التالي:
.parent {
width: 608px;
height: 204px;
margin: 20px auto;
overflow: hidden
}
.parent .child {
width: 1835px;
display: inline-block;
animation: marquee 20s linear infinite;
}
@keyframes marquee {
0% {
margin-left: 0;
}
100% {
margin-left: calc(-1835px + 608px);
}
}
.parent .child:hover {
animation-play-state: paused
}
</style>
</head>
<body>
<div class="parent ">
<div class="child">write,good,favorite</div>
</div>
</body>
</html>
وبذلك تستطيع اضافة الكود في المكان المطلوب اضافة شريط الاخبار اليها ونضع
كود css في ملف CSS المخصص لموقعك والكلاسات في ملف html الخاص بموقعك
وبعد اضافة الكود وحفظ التغيرات نذهب الى الموقع لنشاهد شكل الشريط سوف تلاحظ
الشريط يتجه من اليمين الى اليسار و تظهر فيه الاخبار التي قمت بتنزيلها وهكذا تمت
اضافة الشريط الاخباري.
كود css في ملف CSS المخصص لموقعك والكلاسات في ملف html الخاص بموقعك
وبعد اضافة الكود وحفظ التغيرات نذهب الى الموقع لنشاهد شكل الشريط سوف تلاحظ
الشريط يتجه من اليمين الى اليسار و تظهر فيه الاخبار التي قمت بتنزيلها وهكذا تمت
اضافة الشريط الاخباري.
ليست هناك تعليقات:
إرسال تعليق
ملحوظة: يمكن لأعضاء المدونة فقط إرسال تعليق.