مجموعة رائعة لتأثيرات تحميل الصفحة

مجموعة رائعة من التأثيرات الابداعية لتحميل الصفحة والتي تستخدم رسوم متحركة SVG بمكتبة Snap.svg. والفكرة هي اظهار تاثير شفاف overlay مع شكل جميل أثناء تحميل المحتوي الجديد.

PageLoadingEffects

 

 

 

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

 

 

طريقة اظهار تأثير تحميل الصفحة عن طريق تعريف مسار الرسوم المتحركة المحدد في مثال SVG التالي

<div id="loader" class="pageload-overlay" data-opening="M 0,0 80,-10 80,60 0,70 0,0" data-closing="M 0,-10 80,-20 80,-10 0,0 0,-10">
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="none">
        <path d="M 0,70 80,60 80,80 0,80 0,70"/>
    </svg>
</div><!-- /pageload-overlay -->

 

وفي النهاية نأمل أن تجدهم مفيدين وملهمين لك.

للمشاهدة الحية

للتحميل

 

مقالات ذات صلة

تعليق واحد

  1. نِرمين سعيد عبد الله
    2 يوليو,2014 في 8:54 ص - Reply

    من فضلك … أود لو تشرح كيفية إضافته للمدونة ؟

اضف رد