10 مقتطفات CSS وجافا سكريبت مخصصة لـ Hover & Click Effects

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

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

تأثيرات زر تحوم

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

يستخدم كل تأثير CSS خالص للرسوم المتحركة. يعتمد زوجان من هذه الأزرار على JavaScript في أحداث تمرير الماوس ، ولكن لا يزال يتم التحكم في جميع الرسوم المتحركة في CSS مباشرةً.

إذا كنت تصمم تخطيطًا مسطحًا ، فسيكون من السهل جدًا العمل في هذه الرسوم المتحركة.

تنقلات التنقل

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

عادةً ما تكون قوائم التنقل بسيطة جدًا وعامة. هذا هو السبب في أن أحداث التمرير يمكن أن تضفي البهجة على التصميم وتظهر للزائرين أنك تهتم بالتفاصيل الصغيرة.

يتم ترويض معظم هذه الرسوم المتحركة بما يكفي لتلائم أي موقع ويب ، لذا فهي رائعة لسهولة النسخ / اللصق في أي تخطيط.

تأثيرات تحوم الصور

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

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

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

تحوم CSS Tooltip

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

يعمل هذا المقتطف بأكمله من خلال استهداف علامة HTML <dfn>. عند تمرير مؤشر الماوس فوق أي نص ملفوف في هذه العلامة ، فإنه سيتلاشى تلقائيًا عند ظهوره كتلميح أداة.

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

أيقونات CSS عند التمرير

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

يأتي كل رمز من Font Awesome لذا يمكنك تكرار هذا التصميم بأيقونات مجانية تمامًا.

تشتمل التأثيرات على رموز الشرائح الإضافية والتمديدات والتلاشي التي تظهر عند التمرير وتختفي عندما يتحرك المؤشر في مكان آخر.

ترقيم الصفحات اللانهائي

دائمًا ما يكون ترقيم الصفحات على الويب مملًا جدًا ، ربما لأنه ليس جزءًا مبهرجًا من الواجهة. ولكن مع تأثير ترقيم الصفحات هذا بواسطة Mariusz Dabrowski ، يمكنك نقل ترقيم الصفحات إلى المستوى التالي.

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

من المؤكد أن لها قيمة عملية محدودة ولكن التأثير رائع.

تراكب Nav Animation

تحظى قوائم التنقل بملء الشاشة بشعبية كبيرة لمواقع الويب المتجاوبة مع الأجهزة المحمولة وتعمل أيضًا مع معظم المستخدمين. لكن لا يجب أن تكون هذه الأشياء مملة أو ثابتة عندما يكون لديك تأثيرات تراكب مثل هذه مجانًا على CodePen.

ابتكر المطور Ryan Mulligan هذه الرسوم المتحركة الوحشية باستخدام إطارات مفاتيح CSS نقية تعمل على فئة CSS واحدة.

يتم تشغيل حدث النقر عبر jQuery ، لكن الحركة كلها عبارة عن CSS. بالتأكيد واحدة من أكثر الرسوم المتحركة روعة التي رأيتها ومن المثير للدهشة أنها سهلة التمهيد.

Pure CSS Click Effect

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

وباستخدام هذا القلم ، يمكنك تكرار تأثير التموج في عملك الخاص باستخدام رمز CSS فقط.

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

زر مانا

إليك أحد تأثيرات الأزرار الفريدة التي رأيتها على الإطلاق باستخدام SVGs للأشكال و CSS للرسوم المتحركة.

صمم Coder Dean Hidri تأثير زر Mana هذا باستخدام 80 سطرًا فقط من CSS وعشرات من سطور HTML (مع تضمين SVG). عند التمرير ، يقوم هذا الزر بتحريك شكل سائل مخصص داخل الزر لإنشاء تعبئة خلفية ، ثم تحريكه بعد ذلك.

إذا كان لديك موقع يمكنه استخدام نمط الزر هذا ، فمن المؤكد أنه يستحق اللعب معه.

أيقونة FX

يمكنك فعل الكثير باستخدام خطوط الرموز وتعد هذه الأزرار المتحركة بواسطة David Darnes مثالاً رائعًا.

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

وهذا يختتم قائمة تأثيرات UX الخاصة بي ، لكن هذه بالتأكيد ليست المجموعة النهائية.

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