20+ التوضيحات عرض آثار JQuery المتقدمة
منذ فترة وجيزة ، كان Flash أحد التقنيات الأساسية التي استخدمها مصممو الويب لإضافة تفاعلية إلى موقع ويب.
منذ إدخال جهاز iPad ، مع افتقاره إلى Flash Player ، هناك تسارع في عالم تطوير الويب لاستخدام تقنيات بديلة لبرنامج Flash ، مثل jQuery و Ajax وغيرهم.
على الرغم من أن Flash لا يزال أداة قوية ومفيدة للغاية ، والتي تعمل بشكل جيد في العديد من الحالات ، فإن العديد من التأثيرات التي اعتاد مصممو الويب استخدامها في Flash ، يمكن تنفيذها بنفس السهولة باستخدام jQuery.
في ما يلي 21 عرضًا توضيحيًا عبر الإنترنت تعرض قوة jQuery لإنشاء تأثيرات متقدمة وتفاعلية يمكنها منافسة Flash.
1. الوجه! مكوّن jQuery
يحاكي هذا العرض التقديمي تقنية قلب البطاقة الشائعة التي يمكنها تدوير عنصر 360 درجة حول محور x أو y الخاص بها.
2. المساعد jQuery Quicksand
يعد هذا مكونًا إضافيًا رائعًا لفرز مجموعة من العناصر / الرموز على الصفحة التي تحتوي على تأثيرات متحركة وتوهائية رائعة.
3. ImageFlow
يشبه عارض الصور هذا واجهة Apple CoverFlow التي أصبحت مألوفة في منتجاتها وتطبيقاتها المختلفة.
4. بناء خريطة تفاعلية مع jQuery بدلا من فلاش
ينضم هذا العرض التوضيحي إلى قوة jQuery مع Ajax لإنشاء واجهة جذابة.
5. نصائح Slideout مع jQuery و CSS3
يؤدي النقر على رموز "+" إلى كشف معلومات إضافية مع تأثير متحرك سلس جميل.
6. معرض التكبير
في هذا العرض التوضيحي ، ما يبدو أنه ثابت بشكل منتظم معرض الصور يعطى بعض التفاعل الإضافي باستخدام تأثير تكبير متعدد الطبقات عند التمرير فوق صورة.
7. jQuery تعميم
يعرض هذا العرض التوضيحي تأثير فلاش المستخدم بشكل كبير في تدوير صورة حول الصفحة - كل ذلك باستخدام jQuery.
8. تكبير الصورة خارج تأثير
يبدو هذا العرض التوضيحي بسيطًا بشكل خادع ، ولكن عند إجراء مزيد من الفحص ، ستجد أن هناك عدة طبقات لتعقيد تأثير التصغير.
9. انزلاق صناديق وتعليقات مع jQuery
هنا نرى كيف يمكن إنشاء انتقالات قوية باستخدام jQuery ، وهي تقنية محفوظة مرة واحدة لمطوري فلاش فقط.
10. CSS3 معرض العلبة
يبدو هذا البرنامج المساعد وكأنه مكتوب خصيصًا لوسائل التواصل الاجتماعي. سيؤدي سحب الصورة وإفلاتها فوق "مربع المشاركة" إلى فتح نافذة مشروطة يمكن أن تكون واجهة لاستدعاء واجهة برمجة التطبيقات عبر AJAX والتي يمكن أن تسمح للمستخدم بمشاركة صورة على Flickr و Twitter و Facebook وغيرها من المواقع.
11. جعل تأثير التقط الصور مع jQuery و CSS
على الرغم من أن هذا العرض التجريبي قد يبدو مثل حلوى العين للوهلة الأولى ، إلا أنه قد يكون أداة قوية جدًا للعمل مع الصور الكبيرة عند اقترانها بالتخزين المحلي AJAX أو HTML5.
12. ممتاز الملاحة فقاعة
هنا ، يستفيد المطور من انتقالات الألوان والرسوم المتحركة لإنتاج قائمة تفاعلية جذابة للغاية.
13. جميل صورة خلفية للملاحة
في هذا العرض التوضيحي يقوم كل إجراء للمستخدم بتشغيل عدة انتقالات تعمل جميعها على إغواء المستخدم بشكل كامل في الواجهة.
14. AviaSlider
تستخدم AviaSlider تأثيرات انتقالية كلاسيكية تشبه الفلاش لتعزيز ما يبدو أنه واجهة منزلق قياسية.
15. خلفية صورة عرض الشرائح
والخلفيات المتحركة هي واحدة من المجالات التي استخدم فيها فلاش للسيطرة على تصميم الويب. هنا مثال على ذلك باستخدام jQuery بدلا من ذلك.
16. عرض الشرائح
آخر فريد من نوعه على واجهة عرض الشرائح النموذجية. هنا يضيف المؤلف ملاحة قطرية لتزيين الواجهة ولجعلها تبرز.
17. jqFancyTransitions
يمكن استخدام هذا المكون الإضافي لعرض صورك كعرض شرائح باستخدام تأثيرات انتقال تشبه الفلاش.
18. iCarousel - المنزلق الصور الأفقية
عرض شرائح آخر يضيف مجرد لمسة من التيسير لجعل الانتقالات مميزة حقًا. لا عجب أنهم اختاروا عرض منتجات ماك المثيرة في هذا العرض.
19. صنع صورة تفاعلية مع jQuery
يمكن استخدام هذا العرض للاستفادة من مواقع الويب التي يوجد بها الكثير من مساحة الشاشة. يؤدي النقر على جزء من موقع الويب إلى إظهار مربع مشروط يعرض مزيدًا من المعلومات حول القسم الذي تم النقر عليه.
20. سحابة التكبير
تم تصميم المكون الإضافي الذي يبدو وكأنه مصممًا مع وضع التجارة الإلكترونية في الاعتبار. تطبيق Cloud Zoom سهل التنفيذ ويمكنه حقًا تحسين تجربة المستخدم.
21. أبل مثل الشبكية تأثير
أي شخص يستخدم iPhone أو iPod touch أو iPad على دراية بـ "عرض Retina" الذي سيوسع مساحة صغيرة على الشاشة عند لمس المنطقة لفترة طويلة من الوقت. هذا العرض يطبق هذا التأثير على سطح المكتب.
جمعت حصرا ل WDD من قبل كليم الأسطول . وهو مصمم ويب محترف ومدون يتمتع بخبرة تزيد عن 6 سنوات. الويب هو شغفه حيث يقسم وقته بين كتابة المدونات وتطوير البرامج ووسائل الإعلام الاجتماعية. يحب استخدام وتطوير تطبيقات جديدة للويب ، والجوّال ، وسطح المكتب.
هل تعرف أي أمثلة رائعة أخرى من تأثيرات jQuery التي يمكن أن تنافس قوة فلاش؟ هل تقترح تأثيرات jQuery على Flash عندما يطلب منك عملاؤك؟ يرجى تبادل وجهات النظر وأمثلة أدناه!