حيل CSS و JavaScript لبث الحياة في موقعك الثابت

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

---

الرسوم المتحركة ثلاثية الأبعاد في JS

الحيلة الأولى هي تأثير رائع ثلاثي الأبعاد في JS.





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



كيفية القيام بذلك



أولاً ، يتم إنشاء HTML div:

<div class="card">
  <div class="header">
    <img src='image.png' alt="image">
  </div>
  <div class="info">
    <h1 class="title"><a href="https://hackerone.com/hensis">Hackerone</a></h1>
    <h3>Started on 6/20 Signal : 5.67 Reputation : 360 Impact : 26.25</h3>
  </div>
</div>

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

هنا لدينا فئة رئيسية (بطاقة) وفئتين أخريين داخل البطاقة (العنوان والمعلومات). سيكون العنوان هو الفئة التي تحتوي على الصورة (في مثالنا ، الشعار المتوسط) ، وستحتوي المعلومات على النص الموجود في البطاقة. الآن دعنا نضيف بعض CSS لجعل الخريطة تبدو أفضل.

.card {
    transform-style: preserve-3d;
    min-height: 64vh;
    width: 20vw;
    border-radius: 30px;
    padding: 0rem 5rem;
    box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2), 0px 0px 50px rgba(0, 0, 0, 0.2);
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

لقد أعلنت هنا الطول والعرض والحدود والحشو والظل. قم بتحديث الصفحة وسترى النتائج. الخطوة الأخيرة هي تحقيق تأثير ثلاثي الأبعاد عند تحريك الماوس فوق الخريطة. لهذا ، استخدمت JS:

// declaring variables

const card = document.querySelector(".card");
const title = document.querySelector(".title");
const header = document.querySelector(".header img");
const description = document.querySelector(".info h3");

// Animate In

card.addEventListener("mouseenter", (e) => {
  card.style.transition = "none";
  title.style.transform = "translateZ(3px)";
  header.style.transform = "translateZ(3px) rotateZ(0deg)";
  description.style.transform = "translateZ(3px)";
});

// Animate Out

card.addEventListener("mouseleave", (e) => {
  card.style.transition = "all 0.5s ease";
  card.style.transform = `rotateY(0deg) rotateX(0deg)`;
  title.style.transform = "translateZ(0px)";
  header.style.transform = "translateZ(0px) rotateZ(0deg)";
  description.style.transform = "translateZ(0px)";
});

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

1. إعلان المتغيرات.
2. قم بإنشاء مستمعين للأحداث للبطاقة.
3. في Mouseenter ، قم بترجمة Z إلى 3 بكسل للعنوان والرأس والوصف. يمكنك أيضًا تحديد ما إذا كنت تريد تدوير هذه العناصر أم لا (rotateZ).
4. على mouseleave ، أعد كل شيء إلى طبيعته.

هذا كل شيء: لديك رسوم متحركة ثلاثية الأبعاد جميلة. بالطبع أصبح خام الآن. يمكنك إضافة CSS في كل مكان لتغيير العرض واللون وما إلى ذلك.

اكتشف Vanta.js للرسوم المتحركة في الخلفية

هل سئمت الألوان والصور الثابتة على خلفية صفحة الويب الخاصة بك؟ تم تصميم VantaJs لإضفاء الحيوية على الخلفية:







كيف يتم ذلك



الأمر بسيط جدًا. أضف الكود التالي إلى HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
<script>
  VANTA.GLOBE({
  el: "#htmlid",
  mouseControls: true,
  touchControls: true,
  gyroControls: true,
  minHeight: 200.00,
  minWidth: 200.00,
  scale: 1.00,
  scaleMobile: 1.00
  })
</script>

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

سيؤدي هذا إلى تعيين خلفية Vanta.js Globe على htmlid.



للتبديل بينهما ، قم بتغيير VANTA.GLOBE إلى VANTA. [اسم الخلفية]. بالطبع ، قبل ذلك تحتاج إلى إضافة cdn.jsdelivr.net/npm/vanta@latest/dist/vanta . [اسم الخلفية] .min.js المقابل.

ScrollReveal

بالنسبة لأولئك الذين لم يعرفوا شيئًا عن مكتبة JS الرائعة هذه ، يمكن لـ ScrollReveal عرض العناصر أثناء التمرير لأسفل في صفحة الويب:







كيف يتم ذلك

1. أضف إلى رأس HTML الخاص بك.
2. في ملف JS اكتب:

ScrollReveal().reveal('.htmlclass',{ delay: 400 })
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

ستعرض الشفرة عنصرًا به فئة htmlclass مع تأخير 400 مللي ثانية عند تمرير الصفحة.

تغيير حجم ولون الحروف

خدعة CSS الصغيرة هذه رائعة حقًا عند استخدامها بشكل صحيح:







كيفية القيام بذلك



قم بإنشاء بعض عناصر امتداد HTML الجديدة وحدد فئتها:

<span class="change">T</span><span class="change">e</span><span class="change">s</span><span class="change">t</span>

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

3. تطبيق CSS: قم بالمرور ، نقوم بتغيير حجم الحروف ولونها:

.blast:hover {
    color:#08fdd8;
    font-size: 30px;
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

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

خاصية الرسوم المتحركة

قمنا باستكمال المادة بوصف خاصية من مقال بقلم كريس كويير.



يمكن استخدام خاصية الرسوم المتحركة في CSS لتحريك العديد من خصائص CSS الأخرى ، مثل اللون أو لون الخلفية أو الارتفاع أو العرض . يجب تحديد كل رسم متحرك باستخدامkeyframes ، والذي يتم استدعاؤه بعد ذلك باستخدام خاصية الرسوم المتحركة ، على سبيل المثال:

.element {
  animation: pulse 5s infinite;
}

@keyframes pulse {
  0% {
    background-color: #001F3F;
  }
  100% {
    background-color: #FF4136;
  }
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

تحدد كل قاعدةkeyframes ما يجب أن يحدث في نقاط معينة في الرسوم المتحركة. على سبيل المثال ، 0٪ هي بداية الحركة و 100٪ هي النهاية. يمكن معالجة هذه الإطارات الرئيسية إما باستخدام خاصية اختزال الرسوم المتحركة أو خصائصها الفرعية الثمانية لتوفير مزيد من التحكم في الإطارات الرئيسية.

الخصائص الفرعية

• اسم الحركة: يعلن اسم قاعدةkeyframes للتحكم.
• مدة الرسوم المتحركة: مدة دورة الرسوم المتحركة الواحدة.
• وظيفة وقت الرسوم المتحركة: تعيين منحنيات تسريع محددة مسبقًا مثل السهولة أو الخطية.
• تأخير الرسوم المتحركة: الوقت بين تحميل العنصر وبداية تسلسل الرسوم المتحركة ( أمثلة مثيرة للاهتمام ).
• اتجاه الحركة: يحدد اتجاه الحركة بعد الحلقة. يتم إعادة تعيين قيمته الافتراضية كل دورة.
• عدد مرات تكرار الرسوم المتحركة: عدد مرات تنفيذ الرسم المتحرك.
• وضع تعبئة الرسوم المتحركة: يحدد القيم التي يتم تطبيقها قبل / بعد الرسوم المتحركة.
  
  على سبيل المثال ، يمكنك ضبط الحالة الأخيرة للرسوم المتحركة لتظل على الشاشة ، أو يمكنك ضبطها على التبديل مرة أخرى عند بدء الرسم المتحرك.
• حالة تشغيل الرسوم المتحركة: إيقاف مؤقت / تشغيل الرسوم المتحركة.

ثم يمكن تطبيق هذه الخصائص الفرعية على النحو التالي:

@keyframes stretch {
  /* declare animation actions here */
}

.element {
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running; 
}

/*
  is the same as:
*/

.element {
  animation: 
    stretch
    1.5s
    ease-out
    0s
    alternate
    infinite
    none
    running;
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

فيما يلي قائمة كاملة بالقيم التي يمكن أن تأخذها كل من هذه الخصائص المتداخلة:

خطوات قليلة

إذا كانت الرسوم المتحركة لها نفس خصائص البداية والنهاية ، فمن المفيد فصل القيم 0 و 100٪ داخلkeyframes بفاصلات:

@keyframes pulse {
  0%, 100% {
    background-color: yellow;
  }
  50% {
    background-color: red;
  }
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

رسوم متحركة متعددة

يمكنك فصل القيم بفاصلات للإعلان أيضًا عن حركات متعددة في المحدد. في المثال أدناه ، نريد تغيير لون الدائرة فيkeyframe أثناء نقلها من جانب إلى آخر بخاصية مختلفة.

.element {
  animation: 
    pulse 3s ease infinite alternate, 
    nudge 5s linear infinite alternate;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

أداء

يعد تحريك معظم الخصائص مشكلة في الأداء ، لذلك يجب أن نكون حذرين قبل تحريك أي خاصية. ومع ذلك ، هناك مجموعات معينة يمكن تحريكها بأمان:

• تحويل: ترجم ()
  
  
• تحويل: مقياس ()
  
  
• تحويل: تدوير ()
  
  
• العتامة
  
  

ما هي الخصائص التي يمكنك تحريكها؟

لدى MDN قائمة بخصائص CSS التي يمكن تحريكها . تميل إلى أن تكون ألوانًا وأرقامًا. مثال على خاصية غير متحركة صورة الخلفية.

دعم المتصفح

يتم الحصول على بيانات دعم المتصفح هذه من موقع الويب Caniuse لمزيد من المعلومات. الرقم يعني أن المتصفح يدعم الوظيفة في هذا الإصدار وما فوق.



منضدية



التليفون المحمول

البادئات

في حين أن دعم هذه الخاصية في المتصفحات الحديثة جيد بما فيه الكفاية ، فقد نرغب في دعم أكبر عدد ممكن من المتصفحات القديمة. في هذه الحالة ، تحتاج إلى استخدام بادئات البائع:

.element {
  -webkit-animation: KEYFRAME-NAME 5s infinite;
  -moz-animation:    KEYFRAME-NAME 5s infinite;
  -o-animation:      KEYFRAME-NAME 5s infinite;
  animation:         KEYFRAME-NAME 5s infinite;
}

@-webkit-keyframes KEYFRAME-NAME {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes KEYFRAME-NAME {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes KEYFRAME-NAME {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes KEYFRAME-NAME {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

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

• مطور ويب محترف
• دورة JavaScript