Scrollmagic: تصميم ويب ممتع

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

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

ScrollMagic: تصميم ويب مرح

ScrollMagic عبارة عن مكتبة تم إنشاؤها في جافا سكريبت لتحقيق تفاعلات عند نقل مواقع الويب. إنها إعادة كتابة كاملة لسلفها Superscrollorama وتستند بنيتها على المكونات الإضافية التي توفر التخصيص بسهولة والتوسعة.

إنه مثالي إذا أردنا تنفيذ بعض الأشياء التالية:

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

ميزات ScrollMagic

• أداء محسن ، إنه خفيف ومرن ويسمح بالتمدد. إدارة الأحداث والبرمجة الموجهة للكائنات. وهو يدعم تصميم الويب التكيفي. ويدعم الحركات في كلا الاتجاهين (أفقيًا وعموديًا) ويدعم الحركات داخل الحاويات (div) ، حتى متعددة في صفحة واحدة ، وهي تعمل بشكل مثالي للمتصفحات: Firefox 26+ ، Chrome 30+ ، Safari 5.1+ ، Opera 10+ ، IE 9+. في مستودع GitHub ، يحتوي على وثائق مفصلة والعديد من أمثلة التطبيقات.

احصل على ScrollMagic

وهي متاحة للحصول عليها بطرق مختلفة.

1: جيثب

git clone git: //github.com/janpaepke/ScrollMagic.git

2: باور

تثبيت التمرير

3: مدير حزمة العقدة

npm تثبيت rollmagic

4: CDN

cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js

يمكنك أيضًا قراءة كيفية تخصيص تصميم بريد إلكتروني في Outlook

التثبيت والاستخدام

التثبيت بسيط للغاية ، نحن ندرج فقط ملف kernel في ملفات html حيث نريد استخدامه.

؛

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

سيكون هذا مثالًا أساسيًا:

// init controller var controller = new ScrollMagic.Controller ()؛ // إنشاء مشهد جديد ScrollMagic.Scene ({المدة: 100 ، // يجب أن يستمر المشهد لمسافة تمرير تبلغ 100 بكسل إزاحة: 50 // بدء هذا المشهد بعد التمرير بمقدار 50 بكسل}).setPin ("# my-sticky- element ") // يسد العنصر لمدة المشهد. إضافة إلى (وحدة تحكم) ؛ // تخصيص المشهد لوحدة التحكم

المثال الأكثر تقدمًا هو تحقيق تعويضات متعددة ، وسيكون رمز المصدر الخاص بها:

$ (وظيفة () {// انتظر المستند جاهز // init وحدة تحكم var controller = new ScrollMagic.Controller ()؛ // build tween var tween = TweenMax.to ("# animate"، 0.5، {scale: 3، easy: Linear.easeNone})؛ // build scene var scene = new ScrollMagic.Scene ({trigElement: "#multiDirect"، Duration: 400، offset: 250}).setTween (tween).setPin ("# animate"). addIndicators ({name: "resize"}) // add Indicators (يتطلب البرنامج المساعد).addTo (وحدة تحكم) ؛ // init controllerorizontal var controller_h = new ScrollMagic.Controller ({vertical: false})؛ // build tween الأفقي var tween_h = TweenMax.to ("# animate"، 0.5، {rotation: 360، eas: Linear.easeNone})؛ // build scene var scene_h = new ScrollMagic.Scene ({Duration: 700}).setTween (tween_h). setPin ("# animate").addIndicators ({name: "rotate"}) // add Indicators (required plugin).addTo (controller_h)؛}) ؛

يمكنك العثور على المزيد من الأمثلة مع شفرة المصدر الخاصة بهم في وثائق البرنامج المساعد.

نوصي باستخدامك لتثبيت نظيف لنظام التشغيل Windows 10 باستخدام عصا USB