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

Sofian Ahmad · 10 نوفمبر 2019

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

Entesar Khaled · 11 نوفمبر 2019

أهلًا بك،

أي تصميم تنوي إضافته إلى موقع ويب ينبغي أن يكون بلغات وتقنيات الويب نفسها.. بالتالي يمكن عمل نصوص متحركة علي صور واضافتها في موقعك من خلال 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>