الاثنين، 24 أكتوبر 2016

عمل شريط متحرك اخباري للموقع


http://www.almasa-net.com/

عمل شريط متحرك اخباري للموقع 

يتمتع تصميم المواقع بكثير من الميزات الفنية واللمسات السحرية التي تعطي الموقع شكل جمالي وهناك الكثير من الاضافات التي تبحث عنها من اجل اضافتها الى موقعك وخاصة ما يتعلق بالشريط المتحرك الذي نستفيد منه في اضافة اخر الاخبار والاخبار العاجلة و العناوين المهمة في الموقع والتي تدور حول اشياء مهمة واليوم نقدم لكم كود جميل ورائع لكي تضع اضافة شريط اخبار عاجلة في الموقع وذلك من خلال اتباع بعض الخطوات البسيطة والسهلة و هذا على الشكل التالي :
 -اضافة كلاس رئيسي ومن ثم اضافة كلاس فرعي داخل الكلاس الرئيسي ويمكن تسميته حسب رغبتك  واعطائه المواصفات التالية تستطيع اضافة ميزات متوافقة مع الموقع مثل اللون والطول والارتفاع ولون الخط وحجمه وشكله وذلك باضافة المواصفات الى الكلاس الخاص بها وهي على الشكل التالي:




<html>
<head>
<style>


.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 الخاص بموقعك وبعد اضافة الكود وحفظ التغيرات نذهب الى الموقع لنشاهد شكل الشريط سوف تلاحظ الشريط يتجه من اليمين الى اليسار وتظهر فيه الاخبار التي قمت بتنزيلها وهكذا تمت اضافة الشريط الاخباري.



ليست هناك تعليقات:

إرسال تعليق

ملحوظة: يمكن لأعضاء المدونة فقط إرسال تعليق.

جميع الحقوق محفوظة لدى مدونة الماسة نت | إتفاقية الإستخدام | Privacy-Policy| سياسة الخصوصية