20+ حزم SVG متحركة رائعة
نشرت: 2015-11-16SVG (أو Scalable Vector Graphics) هو تنسيق ملف مستند إلى XML يحتوي على متجهات ثنائية الأبعاد ويسمح للمطورين بإنشاء رسومات مذهلة وتطبيقات رسومية ديناميكية ومتحركة.
يعد SVG تنسيقًا قويًا للصور يمكن معالجته باستخدام التعليمات البرمجية ، إما في محرر نصوص أو باستخدام CSS / JS ويتم استخدامه أكثر فأكثر في تصميم الويب.
واحدة من أكبر الإيجابيات التي يتمتع بها SVG هي أنه يمكن أن يبدو حادًا في جميع درجات دقة الشاشة. يمكن أن تحتوي على أحجام ملفات صغيرة جدًا ويمكن تعديلها وتعديلها بسهولة. توفر صور SVG قدرًا أكبر من الحرية عندما يتعلق الأمر بحجم الصور المستخدمة ، بالإضافة إلى الطريقة التي تتفاعل بها مع تصميمك النهائي.
يجعل تنسيق الصور المتجه هذا المستند إلى XML الأمور أسهل لمطوري الويب ومصممي الويب ، لذلك قررنا أن نجمع هنا 22 حزمة SVG متحركة رائعة لإلهامك. تخدم حزم SVG المتميزة هذه أغراضًا مختلفة ، بدءًا من إضافة الرموز والنصوص المتحركة إلى مواقع الويب إلى إضافة الساعات والرسومات المتحركة والمزيد.
أضف حزم SVG المتحركة هذه إلى مجموعة تصميمات الويب الخاصة بك وكن جاهزًا لمشروع موقع الويب الخاص بك التالي!
ملاحظة لقد أضفنا أيضًا بعض الأمثلة حول كيفية استخدام SVGs في تصميمات الويب أدناه.
SVG POP Watch - محرك مشاهدة SVG متحرك متجاوب
تعتبر SVG POP Watch مثالية لمشروعك أو لفريق موقعك. يمكنك بسهولة تغيير مظهره ، فهو يحتوي على محرك ساعة SVG متحرك جاهز ومتجاوب لشبكية العين. يمكنك أيضًا إضافة التصميم الخاص بك بسهولة. تأتي ساعة SVG هذه بالعديد من الميزات الرائعة ، لذا تأكد من التحقق منها!
حزمة الرسوم التوضيحية المتحركة SVG
هذه حزمة توضيح SVG لطيفة ومتحركة حقًا. تم إنشاؤها باستخدام مكتبة Snap.SVG JavaScript ، وستبدو رائعة في مشاريعك.
أنماط نص متحركة ثلاثية الأبعاد - SVG
تتضمن هذه المجموعة 10 أنماط فريدة من النصوص المتحركة ثلاثية الأبعاد. يستخدمون نص HTML مما يعني أن Google يقرأها تمامًا مثل أي نصوص HTML أخرى. تتنوع الأنماط التي تحتوي عليها هذه الحزمة من الواقعية ، المسطحة والمتساوية القياس.
أيقونات الطقس المتحركة SVG
تم تصميم أيقونات الطقس المسطحة المتحركة بشكل جميل. لكل منها رسوم متحركة فريدة من نوعها وباستخدامها ، ستجعل بالتأكيد مشاريع تصميم الويب الخاصة بك أكثر إبداعًا وجاذبية.
6 حزمة من أيقونات SEO SVG
تحتوي هذه الحزمة على 6 رموز متحركة SEO SVG. يمكنك استخدامها ودمجها في مشاريع تصميم الويب الخاصة بك لجعل موقع الويب الخاص بك تفاعليًا.
StarshineJS - تأثير HTML لـ Sparkling Stars المتحركة
باستخدام تأثير HTML المتحرك ، يمكنك إضافة أضواء ساطعة ومثيرة أو كرتونية إلى عناصر HTML الخاصة بك. يمكنك بسهولة ضبط مواضعها وحجمها ولونها وغير ذلك الكثير.
أيقونات متصفح SVG المتحركة
رموز SVG المتحركة هذه هي بالضبط ما يحتاجه موقع الويب الخاص بك. إنها الطريقة المثلى لإخبار عملائك بأن تطبيقك أو موضوعك أو لعبتك تعمل بشكل مثالي في جميع المتصفحات الرئيسية.
تنشيط الوظيفة الإضافية المميزة: أيقونات الويب الترويجية
تحتوي هذه الحزمة على 50 رمزًا ترويجيًا على الويب. هذه وظيفة إضافية لـ Enliven'em. يأتي كل رمز مع 5 أشكال مختلفة للخلفية مما يعني أنك ستحصل على إجمالي 250 ملف SVG.
Trigons - إنشاء وتحريك صور SVG الملخصة
هذا نص JS مرن للغاية سيساعدك في إنشاء صورة SVG حديثة وأنيقة مع رسوم متحركة اختيارية. تحتوي هذه المجموعة على 30 مؤثرًا للرسوم المتحركة مدمجة يمكنك استخدامها لإنشاء مشروع تصميم ويب مثالي.
Cyclo - SVG Loaders Kit
أداة التحميل المسبق HTML5 الدائرية
هذا هو أداة تحميل مسبقة HTML5 دائرية ستعمل على الانتقال بين تجربة المستخدم العادية ورحلة سلسة إلى محتوى موقع الويب الخاص بك.
مستجيبة للرسوم المتحركة للموسيقيين
تحتوي هذه الحزمة على العديد من موسيقيي SVG المتحركين وملفات المتجه الأصلية. لديك أيضًا حزمة تجريبية ، حزمة موسيقيين. هذه الحزمة موثقة جيدًا.
حزمة ميجا أيقونة متحركة SVG
ستجعل حزمة SVG Icon Mega Pack المتحركة فن المتجه الخاص بك ينبض بالحياة. كل ما عليك فعله هو حفظ عملك الفني وإضافة سطر من التعليمات البرمجية إلى HTML الخاص بك وأنت على ما يرام!
طي محمل الرسوم المتحركة SVG
تعد الرسوم المتحركة Folding Loader SVG مثالية لصفحة أداة التحميل المسبق الخاصة بك. استخدمه بثقة!
Flatimation SVG - مجموعة أيقونات SVG متحركة
ستجعل مجموعة الرموز المتحركة Flatimations SVG موقع الويب الخاص بك أكثر متعة وإبداعًا. ستبدو هذه الرموز الجذابة رائعة على أي جهاز ومتصفح.
ريترو SVG كاميرا صور عرض الشرائح
يستلهم عرض شرائح صور كاميرا Retro SVG هذا من التصميم المسطح. تبدو قديمة ومعاصرة وهي طريقة رائعة لتحريك الصور وعرضها.
16 ايقونة SEO متحركة
ماذا عن امتلاك واستخدام هذه الرموز الـ 16 لتحسين محركات البحث (SEO) المتحركة والتي ستجعل موقع الويب الخاص بك ينبض بالحياة. إنها رسومات متجهة قابلة للتطوير بالكامل وستبدو رائعة على أي جهاز ومتصفح.
Gooey Menu: jQuery Plugin
سيساعدك هذا المكون الإضافي في إنشاء قائمة gooey مع الدوائر كعناصر. يستخدم مرشحات SVG ، ويحتوي على 6 أنماط قائمة ، ويأتي مع العديد من الخيارات القابلة للتخصيص وأكثر من ذلك بكثير.
40 من أيقونات الوسائط الاجتماعية SVG المتحركة
إليك مجموعة رائعة حقًا من رموز SVG المتحركة والتي تعد الطريقة المثلى لتوجيه زوار موقع الويب الخاص بك إلى صفحات الوسائط الاجتماعية الخاصة بك.
SVG Globe متحرك بعلامات وشعارات
هذا هو كرة SVG متحركة رائعة حقًا مع علامات وشعارات تعمل بشكل جيد على كل من الأجهزة المحمولة وأجهزة سطح المكتب. إنها الطريقة المثلى لتصور الموقع.
مشغل الصوت Gear HTML5
يمكنك الآن بسهولة عرض موسيقاك بطريقة إبداعية. يوفر Gear Player واجهة مستخدم جذابة للغاية ستحبها بالتأكيد.
3D Pie Chart مع JavaScript
تم تطوير هذا المخطط الدائري ثلاثي الأبعاد في بدائل JavaScript و SVG و VML. يمكنك بسهولة تخصيصه وتغيير موضعه وارتفاعه ونصف قطره وسمات الأساطير وحجم النص وغير ذلك الكثير.
أمثلة على مواقع الويب الرائعة التي تستخدم قوة SVG
فارس: فاتح التميز
تم إنشاء هذه السلسلة من الألعاب باستخدام SVG للرسوم المتحركة والرسومات. Posture & Balance هي أول لعبة تم إنشاؤها لمنصة تسمى Cavalier تم تصميمها بتقنيات مبتكرة.
Poignee de main virile
تم إنشاء هذا الموقع الجديد المتحرك والمصور للتصميم الجرافيكي ومقره فرنسا والاستوديو الإبداعي الرقمي Poignee de main virile. النتيجة لا تصدق!
iFly50
عندما احتفلت مجلة FLY KLM بإصدارها الخمسين ، صممت موقعًا متحركًا بشكل حيوي لمجموعة السفر المثالية. بهذه الطريقة ، تم تقديم أجمل 50 مكانًا رائعًا على وجه الأرض.
ARK: Star Citizen Starmap
باستخدام واجهة ARK الرائعة ، يقدم هذا الموقع شركة Robert's Space Industries ، الشركة المصنعة للمركبات الفضائية ، ضمن لعبة "Star Citizen". هذه بوابة للمعلومات والتحديثات والمشتريات الخاصة بمركبتك الفضائية الخاصة للغاية والتي يمكنك من خلالها حماية مواطني Star Citizen.
حافظ على غرابة الزلازل
Keep Earthquakes Weird عبارة عن منصة تم إنشاؤها باستخدام تأثيرات رسومية SVG مذهلة تم بناؤها بهدف إعداد سكان بورتلاند في حالة وقوع زلزال. المحتوى تعليمي للغاية.
30 ش
30u هو متجر إلكتروني يبيع الأحذية على موقع تم إنشاؤه بواسطة مطورين يركزون على الأناقة ويستخدمون بعض ميزات SVG المثيرة للاهتمام.
مجموعة QED
يحتوي موقع QED GROUP على رسوم توضيحية إيحائية مذهلة والتي ستوفر لك تجربة تنقل رائعة. تصميم الموقع أنيق وذكي.
ميلاني ديفيد
يعد موقع Melanie Daveid على الويب أحد أجمل مواقع الحافظة التي يمكن العثور عليها على الويب. يتضمن الموقع انتقالات سلسة وتوضيحات رائعة لليد
WWF France - ساعة الأرض في باريس
تم إنشاء هذا الموقع المتحرك لـ WWF France واستخدم للإعلان عن إطفاء أضواء برج إيفل في 19 مارس لساعة الأرض.
نريسون
Nerisson المعروف أيضًا باسم Jimmy Raheriarisoa هو مدير فني فرنسي متخصص في تصميم الويب / الهاتف المحمول والتوضيح وتصميم الحركة. هذا موقع محفظة رائع ، يحتوي على رسومات توضيحية وميزات رسومية رائعة.
شركة تصميم واحدة
شركة One Design هي فريق من ذوي الخبرة والمتحمسين من المصممين والمطورين ومديري المشاريع والكتاب والفنانين. موقعهم حي وتفاعلي ، يعتمد على صور SVG واضحة.
ميدوري أوياما
ميدوري أوياما هو دي جي ومنتج مقره في طوكيو. لقد أطلق حزبه الخاص "EUREKA!" لا يزال هذا أحد أفضل حفلات الموسيقى المنزلية في اليابان. موقعه أيضًا مبتكر ومثال مثير للاهتمام عن SVG وكيف يمكنك الاستفادة منه كمستخدم.