• 0

تصميم نصوص متحركة

كيف طريق عمل نصوص متحركة علي صور واريد اضافتها في موقعي

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

أهلًا بك،

أي تصميم تنوي إضافته إلى موقع ويب ينبغي أن يكون بلغات وتقنيات الويب نفسها.. بالتالي يمكن عمل نصوص متحركة علي صور واضافتها في موقعك من خلال HTML و css (باستخدام animation) وإن استخدمت Javascript ومكتباتها مثل JQuery معه ستكون النتيجة ممتازة

أولًا تضع الصورة بالأبعداد المناسبة.. ثم تضيف الحاوية ذات النص عليها (أو النص مباشرة بدون حاوية) بالأبعاد المناسبة أيضًا.. ثم تحرك هذه الحاوية بأي animation مناسب

هنا مثال، ويمكن وضع مئات الأمثلة غيره

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div .center{
  width: 70%;
  height: 100px;
  -webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
  animation: mymove 5s infinite;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
  from {left: 0px;}
  to {left: 200px;}
}

@keyframes mymove {
  from {left: 0px;}
  to {left: 200px;}
}
.container {
  position: relative;
  text-align: center;
  color: white;
}

.center {
  position: absolute;
  bottom: 70%;
  left: 16px;
}

</style>
</head>
<body>

<h2>Image Text</h2>

<div class="container">
  <img src="https://picsum.photos/200/300" alt="Snow" style="width:50%; height="30%">
  <div class="center">Center</div>
 
</div>

</body>
</html> 

 

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن