موصى به, 2024

اختيار المحرر

10 أفضل ملحقات المنظر التمرير

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

عادة ما يكون إنشاء موقع للتمرير في المنظر أمرًا شاقًا لأنه يتطلب معرفة متعمقة بـ CSS وجافا سكريبت وتصميم الويب الجيد حتى يتم الانسحاب. هنا قائمة من أفضل الإضافات القابلة للتمرير Parallax التي لا تسهّل عليك فقط إنشاء مواقع التمرير في المنظر ، ولكن أيضًا لديها مكتبة تأثيرات المنظر الموهوبة بحيث تصبح أسهل وأسرع بالنسبة لك لتطوير صفحة ويب جيدة المظهر .

إخلاء المسؤولية : قبل البدء ، لاحظ أنه لاستخدام هذه المكونات الإضافية ، يلزم معرفة بعض تقنيات الويب (HTML / CSS / Javascript). تستخدم معظم المكونات الإضافية المدرجة مسجًا ، لذا قد تكون هناك حاجة أيضًا إلى معرفة Jquery.

Parallax التمرير الإضافات

1. ScrollMagic

ScrollMagic هي واحدة من الإضافات المسجولية الأكثر شعبية وغنية بالميزات هناك. تتيح لك مكتبة javascript إنشاء تأثيرات التمرير السحرية. باستخدام ScrollMagic ، يمكنك تحريكه بناءً على موضع التمرير. وهذا يعني أنه يمكنك إصلاح عناصر HTML أو تحريكها أو تحريكها أثناء التمرير ، وأي مدة تريدها ، وأيضًا إضافة تأثيرات المنظر بسهولة إلى موقعك على الويب. هو قابل للتخصيص للغاية وهو أيضا خفيف الوزن (6kb عند gzipped). من بين إضافات التمرير الأخرى ، يحتوي Scroll Magic على أفضل الوثائق والموارد الخارجية. انها متوافقة تماما مع المحمول أيضا.

ScrollMagic لديها الكثير من الأمثلة المذكورة. التحقق منها للإلهام والتوجيه بشأن استخدام هذه المكتبة.

حول:

الصفحة الرئيسية: //janpaepke.github.io/ScrollMagic/

تم إنشاؤها بواسطة: Jan Paepke

التركيب:

1. CDN:

2. تحميل من جيثب

2. skrollr

skrollr هي مكتبة جافا سكريبت وخفيفة CSS خالصة ، مع عدم وجود jQuery. إنه أساسا "Scroll Magic simplified لـ CSS". لاستخدام skrollr ، لا تحتاج إلى معرفة Javascript أو أي jQuery. مجرد HTML و CSS يكفي. يستخدم skrollr سمات البيانات لتحريك أي عنصر HTML تريده. أحد عيوب skrollr الرئيسية هي أن الرسوم المتحركة تعمل فقط أثناء تمرير الصفحة. خلاف ذلك يتم وضع جميع الآثار في الانتظار. يتيح لك skrollr تحريك جميع خصائص CSS لعناصر HTML الخاصة بك.

حول:

Homepage: //prinzhorn.github.io/skrollr/

تم إنشاؤها بواسطة: Prinzhorn

التثبيت: تحميل من جيثب

3. pagePiling.js

Page Piling هو مكوّن jQuery الإضافي الذي يتيح لك إنشاء موقع الويب الخاص بك إلى أقسام مختلفة تتراكم فوق بعضها البعض. عند التمرير ، أو عن طريق الوصول إلى عنوان URL ، يتم الكشف عن كل قسم في صورة متحركة منزلقة. يتوافق برنامج pagePiling.js مع جميع الأنظمة الأساسية - أجهزة الكمبيوتر المكتبية والأجهزة اللوحية والجوال - ويعمل مع معظم المتصفحات. أنه يتحلل بأمان على المتصفحات القديمة التي لا تدعم الرسوم المتحركة (مثل IE 7). لاستخدام المكون الإضافي ، يلزمك تضمين ملف CSS وملف Javascript داخل HTML. تمت تهيئة pagePiling.js بواسطة (document) .ready function:

$( document ).ready( function () {
$( ' #pagepiling ' ).pagepiling();
});

لمزيد من التهيئة المتقدمة ، انتقل عبر README.md.

حول:

الصفحة الرئيسية: //alvarotrigo.com/pagePiling/

تم إنشاؤها بواسطة: alvarotrigo

التثبيت: تحميل من جيثب

4. ألتون

Alton هو برنامج jQuery 'scroll-jacking to us' plugin. يعني التمرير في التمرير أن التمرير الأصلي للمستعرض الخاص بك معطّل لصالح التمرير المستهدف والذي عند بدء تشغيله (بواسطة عجلة الماوس أو لوحة اللمس) ينقلك إلى النقطة الرأسية التالية على الشاشة أو أعلى الحاوية التالية.

يتيح Alton ثلاثة وظائف منفصلة ، تسمى "Hero" و "Bookend" و "Standard". يسمح لك القياسي باستخدام التمرير الكامل للصفحات ، مع ارتفاع كل قسم بنسبة 100٪. تقدم اللفيفة المقطع التالي أو القسم السابق. يتيح لك Bookend إنشاء تجربة من نوع "للعناية الواجبة" بينما يسمح لك Hero بالانتقال إلى مقطع "Hero" فقط ، مع وجود بقية الصفحة (للتمكين) في التمرير الأصلي.

حول:

Homepage: //paper-leaf.com/alton-jquery-scroll-jacking-plugin/

تم إنشاؤها بواسطة: ورقة ورقة

التثبيت: تحميل من جيثب

5. Stellar.js

Stellar هو ملحق jQuery من خلالها يمكنك بسهولة إضافة تأثيرات التمرير المنظر. لتشغيل ، أولاً يجب عليك تشغيل الدالة $ .stellar (). يمكن تكوين إعدادات الرسوم المتحركة للعناصر الفردية باستخدام سمات البيانات على هذا العنصر.

حتى يتيح لك ستيلر الحصول على خلفيات المنظر ، والتي هي الخلفيات التي تعيد التمرير. واحدة من أكثر الميزات المفيدة في Stellar.js هي الإزاحة.

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

حول:

الصفحة الرئيسية: //markdalgleish.com/projects/stellar.js/

تم إنشاؤها بواسطة: مارك Dalgeish

التثبيت: تحميل من جيثب

6. multiScroll.js

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

حول:

Homepage: //alvarotrigo.com/multiScroll/

تم إنشاؤها بواسطة: alvarotrigo

التثبيت: تحميل من جيثب

7. ScrollMe

ScrollMe هو البرنامج المساعد لإضافة تأثيرات التمرير بسيطة إلى الصفحة الخاصة بك. يمكن أن يقوم بتدريج وعتامة وترجمة وتغيير عتامة العناصر الموجودة على الصفحة أثناء التمرير لأسفل. لا يتطلب ScrollMe وجود Javascript ، وتكون معرفة CSS فقط كافية. من خلال إضافة فئة "animateme" وخصائص البيانات المطلوبة ، يمكنك تحريك أي عنصر HTML. أفضل استخدام ScrollMe لإضافة تأثيرات CSS. فهي خفيفة الوزن وجميع الرسوم المتحركة سلسة ، طالما كنت تستخدمها في الاعتدال.

حول:

الصفحة الرئيسية: //scrollme.nckprsn.com/

ابتكرت من قبل: نيك بيرسون

التثبيت: تحميل من جيثب

8. المنظر التمرير

Parallax Scroll هو سهل الاستخدام المساعد jQuery الذي يتيح لك إنشاء تأثير التمرير صورة المنظر وجدت على مواقع مثل Spotify. إنه سهل الاستخدام - ما عليك سوى تحديد فئات CSS المطلوبة لأصحاب الصور. بدلا من استخدام لاستخدام هذا المكون الإضافي ، يجب استخدام العناصر التي تحتوي على صورة خلفية محددة (باستخدام خاصية CSS 'background-image`. يمكنك جعل العناصر سريعة الاستجابة باستخدام استعلامات CSSmedia.

حول:

Homepage: //parallax-scroll.aenism.com/

ابتكرت من قبل: Aen

التثبيت: تحميل من جيثب

9. جارالاكس

Jarallax هي مكتبة CSS وجافا سكريبت التي تتخصص في آثار التمرير المنظر. يتم تكوين Jarallax باستخدام Javascript (لا jQuery ، فقط JS الفانيليا نقية). وهو يدعم ميزات التمرير السلس ، والتخفيف ، والرسوم المتحركة المنظر. ويدعم Jarallax من قبل معظم المتصفحات ، عبر منصات. يحتوي موقع Jarallax على وثائق ممتازة حول كيفية تخصيص Jarallax لاحتياجاتك. يحتوي Jarallax أيضًا على برامج فيديو تعليمية تعرض كيفية إعداد Jarallax لموقعك على الويب وكيفية البدء.

حول:

Homepage: //www.jarallax.com/

تم إنشاؤها بواسطة: Jarallax

التثبيت: قم بالتنزيل من موقع Jarallax

10. Superscrollorama

Superscrollorama هو مكوّن jQuery قائم على أساس يدعم الحركات المتحركة. هو مدعوم من TweenMax و Greenwayck Tweening Engine ، مما يزيد من أداء الرسوم المتحركة ، والنعومة. تسمى الرسوم المتحركة فائقة السرعة عبر jQuery ، ويمكنك استخدام معظم وظائف TweenMax.js كذلك. للأسف ، لا يتم دعم هذه الرسوم المتحركة بشكل كامل بواسطة الأجهزة المحمولة (نظرًا لأن أجهزة الشاشات التي تعمل باللمس تتعامل مع التمرير بطريقة مختلفة). ومع استخدام طريقة setScrollContainerOffset ، يمكن الوصول إلى تأثيرات Superscrollorama على الأجهزة المحمولة.

هنا هو رمز للقيام بذلك:

.setScrollContainerOffset(x, y)

(x: الإزاحة x من scrollcontainer، y: الإزاحة x لحقل scrollcontainer)

حول:

الصفحة الرئيسية: //johnpolacek.github.io/superscrollorama/

تم إنشاؤها بواسطة: johnpolacek

التثبيت: تحميل من جيثب

انظر أيضا: أفضل 10 مولدات موقع ثابت

Top