اذهب إلى المحتوى
  • 0

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

Sofian Ahmad

السؤال

Recommended Posts

  • 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> 

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

لو تريد انشاء صور متحركة بواسطة الفوتوشوب تقدر تحطها على موقعك الإلكتروني ما في مشكلة.

من قائمة Window بتلاقي بانل اسمها Timeline وتختار انت عايز تعمل صورة ولا فيديو متحرك و بعدين احفظ الصورة بصيغة GIF.

اذا تريد دروس على كيفية عمل صورة متحركة اليك الرابط هذه قائمة دروس تستطيع من خلالها انشاء صورة متحركة و رفعها علي موقعك

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...