كود جعل الهيدر على شكل امواج متحركة لجميع النسخ

[Admin]

بسم الله الرحمن الرحيم

هل ترغب في إضفاء لمسة جذابة وديناميكية على موقع الويب الخاص بك؟ هل تبحث عن طريقة لجعل هيدر موقعك يبرز بأسلوب مبتكر ومتحرك؟ إذا كانت إجابتك بنعم، فقد وصلت إلى المكان المناسب. في هذا الموضوع، سنتعرف على كيفية استخدام تقنية البرمجة لتحقيق تأثير الأمواج المتحركة في هيدر موقعك. سنقدم لكم الخطوات اللازمة والشيفرة المطلوبة لتحقيق هذا التأثير بسهولة. من خلال تطبيق هذا الكود، ستتمكن من إضفاء لمسة من الحيوية والإبداع على تصميم موقعك، مما يجذب المستخدمين ويمنحهم تجربة تفاعلية ممتعة. دعونا نستكشف معًا كيفية تحويل هيدر موقعك إلى أمواج متحركة تضيف له رونقاً وتميزاً.

اقدم لكم كود Css حصري لاصحاب منتديات احلى منتدى لحعل الهيدر في منتدياتكم على شكل امواج ومتحركة ايضاً، اضافة ولمسة جميلة للمنتدى.​

معاينة الكود​

​

تركيب الكود​

توجه نحو لوحة الادارة - مظهر المنتدى - الوان و Css - واضف الكود التالي في ورقة الـ Css

محتوى مخفي: AwesomeBB

/* copied by: https://iinkor.com */
@keyframes wave {
  0% {
    background-position: 0 bottom, 0 bottom, 0 center;
  }
  100% {
    background-position: -8000px bottom, -20000px bottom, -1659px center;
  }
}
 
#header-banner {
  transform-origin: bottom;
  background-color: #95E4FF;
    background-image: url(https://i.imgur.com/fX1LSeC.png), url(https://i.imgur.com/Agh1uGq.png);
  background-size: 800px,800px,1800px;
  background-position: calc(50% - 200px) bottom, center;
  background-repeat: repeat-x;
  -webkit-animation: wave 30s infinite alternate;
  -moz-animation:    wave 30s infinite alternate;
  -o-animation:      wave 30s linear infinite alternate;
  animation: wave 30s linear infinite alternate;
}

محتوى مخفي: ModernBB e phpBB3

/* copied by: https://iinkor.com */
@keyframes wave {
  0% {
    background-position: 0 bottom, 0 bottom, 0 center;
  }
  100% {
    background-position: -8000px bottom, -20000px bottom, -1659px center;
  }
}
 
.headerbar {
  transform-origin: bottom;
  background-color: #95E4FF;
    background-image: url(https://i.imgur.com/fX1LSeC.png), url(https://i.imgur.com/Agh1uGq.png);
  background-size: 800px,800px,1800px;
  background-position: calc(50% - 200px) bottom, center;
  background-repeat: repeat-x;
  -webkit-animation: wave 30s infinite alternate;
  -moz-animation:    wave 30s infinite alternate;
  -o-animation:      wave 30s linear infinite alternate;
  animation: wave 30s linear infinite alternate;
}

محتوى مخفي: InvisionBB

/* copied by: https://iinkor.com */
@keyframes wave {
  0% {
    background-position: 0 bottom, 0 bottom, 0 center;
  }
  100% {
    background-position: -8000px bottom, -20000px bottom, -1659px center;
  }
}
 
div#logostrip {
  transform-origin: bottom;
  background-color: #95E4FF;
    background-image: url(https://i.imgur.com/fX1LSeC.png), url(https://i.imgur.com/Agh1uGq.png);
  background-size: 800px,800px,1800px;
  background-position: calc(50% - 200px) bottom, center;
  background-repeat: repeat-x;
  -webkit-animation: wave 30s infinite alternate;
  -moz-animation:    wave 30s infinite alternate;
  -o-animation:      wave 30s linear infinite alternate;
  animation: wave 30s linear infinite alternate;
}

محتوى مخفي: PunBB

/* copied by: https://iinkor.com */
@keyframes wave {
  0% {
    background-position: 0 bottom, 0 bottom, 0 center;
  }
  100% {
    background-position: -8000px bottom, -20000px bottom, -1659px center;
  }
}
 
#pun-intro {
  transform-origin: bottom;
  background-color: #95E4FF;
    background-image: url(https://i.imgur.com/fX1LSeC.png), url(https://i.imgur.com/Agh1uGq.png);
  background-size: 800px,800px,1800px;
  background-position: calc(50% - 200px) bottom, center;
  background-repeat: repeat-x;
  -webkit-animation: wave 30s infinite alternate;
  -moz-animation:    wave 30s infinite alternate;
  -o-animation:      wave 30s linear infinite alternate;
  animation: wave 30s linear infinite alternate;
}

ان شاء الله يكون عجبكم
بالتوفيق للجميع
والسلام ختام​

 

[يشهب]

مبدع دائماً.. الكود جذاب جداً، و لا يحتاج إلى وقت في التحميل (لأنه كود جافا و ليس فلاش كما كان في الماضي).
أشكرك كثيراً
ذكرتنا بالصيف