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

لنبدأ بترميز HTML ولا يوجد شيء غير عادي هنا. كل شيء بسيط للغاية وواضح. لوحة كبيرة من النص، وتذييل في الأسفل، وكتلة بها زر ستظهر. هنا هو رمز الكتلة:

1 2 3 4 5 6 7 8 9 10

يوجد الكثير من المحتوى هنا... بعض النصوص. تذييل

يوجد الكثير من المحتوى هنا... بعض النصوص. تذييل

لنبدأ الآن في تصميم الكتلة المخفية والزر الخاص بها:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

#block (العرض: لا شيء؛ الموضع: ثابت؛ الأعلى: 15 بكسل؛ اليمين: 15 بكسل؛ اللون: #fff؛ الخلفية: #4CAF50؛ الحشو: 10 بكسل؛ نصف قطر الحدود: 5 بكسل؛ العرض: 200 بكسل؛ ظل الصندوق: 0 13 بكسل 20 بكسل -5px #3a3a3a؛ عائلة الخط: Arial؛ محاذاة النص: المركز؛ .btn( الخلفية: #FF9800؛ الحدود: 2px صلب #795548؛ اللون: #fff؛ نصف قطر الحدود: 5px؛ المؤشر: المؤشر؛ الحشو: 5px 10 بكسل؛ الهامش العلوي: 10 بكسل؛ وزن الخط: غامق؛

#block( العرض: لا شيء؛ الموضع: ثابت؛ الأعلى: 15 بكسل؛ اليمين: 15 بكسل؛ اللون: #fff؛ الخلفية: #4CAF50؛ الحشو: 10 بكسل؛ نصف قطر الحدود: 5 بكسل؛ العرض: 200 بكسل؛ ظل الصندوق: 0 13 بكسل 20 بكسل -5px #3a3a3a؛ عائلة الخط: Arial؛ محاذاة النص: المركز؛ .btn( الخلفية: #FF9800؛ الحدود: 2 بكسل صلب #795548؛ اللون: #fff؛ نصف قطر الحدود: 5 بكسل؛ المؤشر: المؤشر؛ الحشو: 5 بكسل 10 بكسل؛ الهامش العلوي: 10 بكسل؛ وزن الخط: غامق)

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

ثم رمز البرنامج النصي نفسه، والذي سيخلق السحر على الصفحة:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

$(document).ready (function () ( var $element = $(".footer" ) ; Let counter = 0 ; $(window).scroll (function () ( varscroll = $(window).scrollTop () + $(window).height () ; // إذا انتقل إلى نهاية العنصر //var offset = $element.offset().top + $element.height(); العنصر var offset = $element .offset () .top if (scroll > offset && counter == 0 ) ( $("#block" ) .fadeIn (500 ) ; counter = 1 ; ) ) ; $(".btn" ) .انقر (وظيفة () ( $("#block" ) .slideUp () ; ) ) ;

$(document).ready(function())( var $element = $(".footer"); Let counter = 0; $(window).scroll(function() ( var التمرير = $(window).scrollTop( ) + $(window).height(); // إذا انتقل إلى نهاية العنصر //var offset = $element.offset().top + $element.height(); العنصر var offset = $element .offset().top if (scroll > offset && counter == 0) ( $("#block").fadeIn(500); counter = 1; ) )); btn").click(function ()( $("#block").slideUp(); ));

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

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

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

قبل أن نبدأ، يمكنك مشاهدة العرض التوضيحي.

حسنًا، فلنبدأ...

سنقوم بإنشاء ما يلي:

لغة البرمجة

سيكون ترميز (HTML) للصفحة بسيطًا للغاية.

أولاً، لنقم بإنشاء التنقل.

• الفقرة 1
• الفقرة 2
• الفقرة 3
• الفقرة 4
• الفقرة 5

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

مزايا:

إذا قام المستخدم بتعطيل جافا سكريبت، فستظل الروابط تعمل.

باستخدام jQuery سوف نقرأ سمة href من كل رابط.

الآن بعد أن أنشأنا شريط تنقل بسيط، يمكننا الانتقال إلى المحتوى الرئيسي للصفحة.

لوريم إيبسوم دولور سيت أميت، consectetur adipiscing إيليت...

في ut sapien sem، convallis odio. Aenean consequat ornare egestas...

Donec سوداليس diam et libero ultrices ornare...

Phasellus dolor sem، pharetra nec scelerisque sit amet، consequat quis dolor...

Proin varius pellentesque velit، at consequat risus hendrerit quis...

كما ترون، العلامات بسيطة للغاية. ويتكون من كتلة محتوى تحتوي على الفقرات (ع). كل فقرة لها معرفها الخاص المرتبط برابط في التنقل لدينا.

CSS

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

لنبدأ بتصميم المحتوى الرئيسي للصفحة، وهو أمر بسيط للغاية.

النص (عائلة الخط: arial؛ حجم الخط: 15 بكسل؛ ارتفاع الخط: 25 بكسل؛ اللون: #515151؛ الخلفية: #fdfdfd؛) #content (العرض: 500 بكسل؛ الهامش: 0 تلقائي؛ الحشو العلوي: 40 بكسل؛ الارتفاع : 2000 بكسل; ) #المحتوى ص ( الهامش السفلي: 25 بكسل; )

في النص نحدد ألوان النص والخلفية؛ كتلة المحتوى بعرض 500 بكسل ومركزية. تبلغ قيمة المساحة المتروكة لكتلة المحتوى 40 بكسل - ويتم ذلك حتى لا يحجب التنقل أعلى 40 بكسل للمحتوى. يبلغ الارتفاع 2000 بكسل ليناسب المحتوى ويظهر التمرير. على الرغم من أن هذا ليس ضروريًا كقاعدة عامة. تحتوي كل فقرة على خاصية الهامش السفلي بقيمة 25 بكسل لمساعدتك في فهم أين تنتهي فقرة وتبدأ فقرة أخرى.

الآن دعنا ننتقل إلى التنقل:

التنقل ( العرض: 100%؛ الموضع: ثابت؛ الارتفاع: 40 بكسل؛ الخلفية: أبيض؛ الحد: 1 بكسل صلب #CACACA؛ الحد العلوي: لا شيء؛ -webkit-box-shadow: 0px 0px 3px 1px #ebebeb; -moz-box -الظل: 0px 0px 3px 1px #ebebeb؛ مربع الظل: 0px 0px 3px 1px #ebebeb ؛) nav ul (العرض: 750px; الهامش: 0 تلقائي;) nav ul li( float: left; width: 150px; text-align : المركز ؛ ) nav ul li a ( ارتفاع الخط: 40 بكسل؛ حجم الخط: 16 بكسل؛ زخرفة النص: لا شيء؛ اللون: #515151؛ الحد السفلي: 1 بكسل منقط #515151؛ ) التنقل ul li a:hover (color) : #000;

للتأكد من أن التنقل يستهلك عرض المتصفح بالكامل، تكون قيمة العرض 100%. للحفاظ على التنقل على شاشة المراقبة أثناء التمرير، فإنه يحتوي على إعلان الموضع: الثابت. يبلغ الارتفاع 40 بكسل، وهو أمر طبيعي تمامًا بالنسبة للقائمة العلوية الأفقية. تم استخدام أسلوب بسيط لإضفاء مظهر لطيف. يتم توسيط ul وعرضه 750 بكسل لمنح كل رابط مساحة كافية. تم تصميم كل لي ليطفو، لذا تكون جميع الروابط على نفس الخط. وأخيرا، يتم إعطاء الروابط أيضا بأسلوب بسيط.

مسج

وإليك كيفية العمل: عندما تنقر على رابط التنقل، سيتم التمرير إلى الفقرة التي يشير إليها الرابط.

كما هو الحال دائمًا، لنبدأ بوظيفة document.ready

$(document).ready(function())( ));

الآن، قبل الانتقال إلى وظيفة النقر، دعنا نكتب وظيفة التمرير إلى Div التي ستنتقل إلى الكتلة التي اخترناها. سيكون هناك معلمتان - العنصر الذي يتم التمرير إليه وارتفاع شريط التنقل أعلى الصفحة.

وظيفة التمرير إلى Div (العنصر، navheight) ()

الآن نقوم بوصف ثلاثة متغيرات؛ سنحتاج إليها للتمرير الدقيق.

الدالة التمريرToDiv(element,navheight)( var offset = element.offset(); var offsetTop = offset.top; var TotalScroll = offsetTop-navheight; )

متغير الإزاحة هو إزاحة العنصر. يتم استخدامه بواسطة المتغير OffsetTop لاسترداد قيمة top . ونتيجة لذلك، نحصل على المسافة من أعلى الصفحة إلى العنصر. يعد المتغير TotalScroll مسؤولاً عن المسافة التي يحتاجها المتصفح لتمرير الصفحة. بدون شريط التنقل العلوي، سيكون مقدار التمرير مساويًا لقيمة OffsetTop. ومع ذلك، عند حساب المتغير TotalScroll، علينا أن نتذكر أن شريط التنقل الخاص بنا يحظر أعلى 40 بكسل من المحتوى. ستساعدنا معلمة navheight هنا.

أخيرًا، لننتقل إلى الصفحة:

$("body,html").animate((scrollTop: TotalScroll ), 500);

ستسمح لنا وظيفة jQuery animate بتنفيذ التمرير السلس إلى الموقع المطلوب على الصفحة. في هذه الحالة، الرسوم المتحركة تستغرق 500 مللي ثانية.

تتيح لك خاصية التمرير العلوي ضبط المقدار الذي تريد تمرير الصفحة به (عموديًا).

هذه هي وظيفة التمرير ToDiv الكاملة:

الدالة التمرير ToDiv(element,navheight)( var offset = element.offset(); var offsetTop = offset.top; var TotalScroll = offsetTop-navheight; $("body,html").animate(( التمريرTop: TotalScroll ), 500) ;)

دعنا ننتقل إلى وظيفة النقر.

$("nav ul li a").click(function())( return false; ));

هذا مجرد هيكل عظمي لوظيفة النقر. سيؤدي الإعلان عن خطأ الإرجاع في النهاية إلى منع المتصفح من متابعة الرابط.

قبل أن تقوم بتمرير عنصر إلى دالة، تحتاج إلى العثور على اسم له.

var el = $(this).attr("href"); var elWrapped = $(el);

يحتوي المتغير el على قيمة السمة href. لكي يستخدم jQuery المتغير el، يجب تغليفه بملف elWrapped. لا يمكن تنفيذ كود jQuery التالي:

#paragraph1.offset();

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

$("#paragraph1").offset();

ولهذا السبب هناك حاجة إلى المتغير elWrapped.

وظيفة النقر الكاملة:

$("nav ul li a").click(function())( var el = $(this).attr("href"); var elWrapped = $(el);scrollToDiv(elWrapped,40); return false; )));

هذا كل شيء - الآن لدينا طريقة بسيطة صفحة بها روابط، عند النقر عليها، تنتقل إلى الجزء المطلوب من الصفحة.

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

هنا هو البرنامج النصي الذي سنحتاجه.

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

داخل الدالة، يقوم السطر الأول بإنشاء إزاحة متغيرة بقيمة 0.

animate - يتيح لك تنفيذ رسوم متحركة مخصصة بناءً على تغيير خصائص CSS للعناصر المحددة.

التمرير العلوي - يحصل على قيمة الحشوة العلوية للتمرير للعنصر الأول في المجموعة.

عندما يكون 1000، تتم الإشارة إلى مدة الانتقال. من خلال تغيير هذه المرة، يمكنك تسريع أو إبطاء عملية التمرير.

كيف تعمل؟

دعنا نكتب رمز اختبار سنجرب عليه البرنامج النصي الخاص بنا أثناء العمل.

المستند #block1 ( الهامش: 1200px 0px 100px 0px ; ) اطلب مكالمة! مرحبًا! وظيفة بطيئة التمرير (معرف) ( فار إزاحة = 0؛ $("html, body").animate(( التمريرTop: $(id).offset().top - Offset ), 1000); return false; )

إليك قالب HTML عادي.

لكي يعمل البرنامج النصي، تحتاج إلى تضمين مكتبة jquery.

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

طلب مكالمة!

في سمة href، نشير إلى الكتلة التي نحتاج إلى إجراء انتقال إليها؛ ويتم كتابتها في حالة عدم عمل التمرير السلس، بحيث يتم نقل المستخدم بسلاسة إلى الكتلة المحددة. في حدث onclick، نشير إلى اسم الوظيفة وكمعلمة نشير إلى معرف الكتلة التي نريد إجراء انتقال سلس إليها.

أقدم قائمة ضخمة من المكونات الإضافية للتمرير jQuery لموقع الويب الخاص بك. لقد جاءت إلينا حيل التمرير المختلفة من الخارج منذ وقت ليس ببعيد وأصابت عددًا من البوابات والمواقع الحديثة التي أرادت التميز. يمكن أن يؤدي العمل على التمرير العمودي إلى تحسين التحويلات وتحسين تجربة المستخدم بلا شك. بفضل أساليب JS + CSS3 المثيرة للاهتمام، يمكنك تحسين واجهة موقعك. إذا أضفت القليل من الخيال، فيمكنك الحصول على شيء فريد لموقعك من أي مكون إضافي. بعد كل شيء، يحاول كل موقع أن يبرز من الكتلة الرمادية بطرق مختلفة. بفضل التمرير، يمكن نقل بعض الصفحات إلى الصفحة التي تحتوي على المكون الإضافي المطبق، مما سيؤدي إلى تحسين استلام المستخدم للمعلومات المهمة. هذه التكنولوجيا هي الأنسب لمختلف المحافظ أو عرض المنتج، وما إلى ذلك.

دعنا نصل مباشرة إلى هذه النقطة.

خبيث ماكر

Sly هي مكتبة JavaScript للتمرير أحادي الاتجاه المتقدم مع دعم التنقل بين العناصر. يمكن استخدامه كأداة بسيطة لاستبدال التمرير والتنقل، أو كواجهة تنقل ورسوم متحركة رائعة لمواقع اختلاف المنظر.

مسار التمرير jQuery

هذا مكون إضافي لتحديد مسارات التمرير المخصصة.

شبابيك

تحريك التمرير

AnimateScroll هو مكون إضافي لـ jQuery يسمح لك بالتمرير إلى أي جزء من الصفحة ببساطة عن طريق استدعاء وظيفة aniatesscroll() بمعرف أو فئة العنصر الذي تريد التمرير إليه.

انتقل لي

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

التصق

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

كتلة التمرير

Block Scroll هو مكون إضافي لـ jQuery يحول مجموعة من العناصر إلى كتل ويعرضها على شاشة واحدة في كل مرة. تتمثل الفكرة في تقسيم صفحتك إلى أجزاء لتحسين العرض التقديمي وتدفق المستخدم. يعمل قفل التمرير على تغيير حجم صفحتك تلقائيًا.

ستارسكرول

أنشئ div كخلفية... قم بتنشيط المكون الإضافي؛ التمرير الرسوم المتحركة. سيقوم البرنامج المساعد تلقائيًا بتعيين div للعمل بشكل غير مرئي.

التمرير

التمرير

Scrollocue هو مكون إضافي لـ jQuery لإنشاء نظام تلقائي/ملقن بسيط لتمرير أسطر النص.

معرف com لهذا التطبيق هو com.scrollorama

Stellar.js

Stellar.js هو مكون إضافي لـ jQuery يوفر تأثيرات تمرير المنظر لأي عنصر تمرير.

سوبر التمرير أوراما

المنظر

التمرير المستجيب ثلاثي الأبعاد

مسج التمرير

مكون إضافي لـ jQuery يساعدك على التمرير والانتقال إلى الأقسام. متوافق مع اللمس.

vivus.js

Vivus عبارة عن فئة JavaScript خفيفة الوزن (بدون تبعيات) تسمح لك بتحريك صور SVG من خلال منحها إمكانية الرسم.

مسج سليمScroll

SlimScroll عبارة عن مكون إضافي صغير لـ jQuery (4.6 كيلو بايت) يحول أي div إلى منطقة قابلة للتمرير باستخدام شريط تمرير جميل.

jQRangeSlider

jQuery.pin

هل سبق لك أن أردت إرفاق شيء ما بجانب النص؟ هل سبق لك أن احتجت إلى عنصر رفيع ولزج يظل هادئًا أثناء التمرير لأسفل؟

jQuery.Pin هنا للمساعدة! أدخل أي عنصر في الجزء العلوي من الحاوية. قم بإيقاف تشغيله بسهولة لأحجام الشاشات الأصغر حيث لا يوجد مكان لهذا النوع من الخدع.

التمرير اللانهائي AJAX

التمرير الزائد

Overscroll عبارة عن مكون إضافي لـ jQuery وpolyfill لأسلوب التمرير في Safari على الأجهزة المحمولة. إنه مصمم للاستخدام في متصفحات سطح المكتب مع أحدث إصدار من jQuery.

jQuery.localScroll

Parallax ImageScroll – البرنامج المساعد مسج

البرنامج المساعد المتوافق مع JQuery وamd لإنشاء تأثير اختلاف المنظر كما هو موضح على موقع Spotify.com.

fullPage.js

مكون إضافي خفيف الوزن وسهل الاستخدام لإنشاء مواقع ويب قابلة للتمرير بملء الشاشة (تُعرف أيضًا باسم الصفحات المقصودة)، ويمكنك أيضًا إضافة بعض أشرطة التمرير الأفقية داخل أقسام الموقع.

Parallax.js

جارالاكس

Jarallax هي مكتبة JavaScript مفتوحة المصدر تسهل تخصيص CSS بناءً على التفاعل. يجعل Jarallax من السهل إنشاء موقع ويب للتمرير المنظر

jInvertScroll

مسج fullContent.js

يتيح لك JQuery Full Content إنشاء مواقع الويب بالكامل.

مسج صفحة واحدة التمرير

قم بإنشاء موقع ويب للتمرير من صفحة واحدة (موقع iPhone 5S) باستخدام البرنامج الإضافي للتمرير من صفحة واحدة.

مسج المنظر المساعد

jQuery Parallax هو برنامج نصي يحاكي تأثير اختلاف المنظر كما هو موضح على موقع nikebetterworld.com.

jquery.parallax.js

jquery.arbitrary-anchor.js

المحافظ

Portfoliojs عبارة عن مكون إضافي خفيف الوزن لمعرض jQuery لصورك الجميلة التي يتم تمريرها أفقيًا والتي تدعم متصفحات سطح المكتب والكمبيوتر اللوحي والجوال.

التمرير المنظر المساعد

Scrolling Parallax هو مكون إضافي جديد لـ jQuery يربط تأثير اختلاف المنظر بأشرطة التمرير وعجلة الماوس. يسمح هذا لصورة الخلفية أو أي شيء آخر بالتمرير بوتيرة مختلفة عن صفحة الويب أثناء تمرير المستخدم. يعد تأثير المنظر الناتج طريقة سهلة لخلق وهم العمق على موقع الويب الخاص بك.

علامة تبويب التمرير

التمرير

سكرولر

مكتبة تمرير منفصلة للأجهزة المحمولة (Android + iOS) والكمبيوتر الشخصي. لا مسج. مجرد جافا سكريبت العادي (وبعض السحر).

سمينت

Smint عبارة عن مكون إضافي بسيط لـ jQuery يساعد في التنقل على مواقع الويب ذات الصفحة الواحدة.

jQuery سكرولر المحتوى المخصص

مكون إضافي للتمرير jQuery مخصص وقابل للتخصيص بدرجة كبيرة. تتضمن الميزات شريط التمرير الرأسي و/أو الأفقي، وزخم التمرير القابل للتخصيص، وعجلة الماوس (عبر البرنامج المساعد jQuery mousewheel)، ودعم لوحة المفاتيح وشاشة اللمس، والموضوعات الجاهزة للاستخدام والتخصيص باستخدام CSS، ودعم اتجاه RTL، وخيارات الخيارات للتحكم الكامل في وظائف التمرير، طرق تحفيز الإجراءات مثل التمرير والتحديث والتدمير وما إلى ذلك.

البرنامج المساعد ScrollUpBar

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

StickyTableHeaders

لوحة jQuerySnap

isInViewport.js

شلال

البرنامج المساعد شلال مسج مثل Pinterest، huaban.com، faxianla.com

سكرولر

jQuery.SerialScroll

jScroll

jScroll هو مكون إضافي للتمرير اللانهائي من jQuery كتبه فيليب كلاوسينسكي. التمرير اللانهائي؛ يُعرف أيضًا باسم التحميل البطيء، والتمرير اللانهائي، والقراءة التلقائية، والصفحات التي لا نهاية لها، وما إلى ذلك.

FoldScroll

التمرير لأعلى مسج البرنامج المساعد

ScrollUp عبارة عن مكون إضافي خفيف الوزن لـ jQuery لإنشاء ميزة Scroll Up مخصصة ستعمل على أي موقع ويب بسهولة.

multiScroll.js

قم بإنشاء صفحات مقسمة باستخدام شريطي تمرير رأسيين. متوافق مع الهواتف والأجهزة المحمولة والمتصفحات الأقدم مثل IE 8.

أي قائمة التمرير

qpScroll

qpScroll هو مكون إضافي لـ jQuery يقوم بإنشاء خلفية المنظر لأي صفحة أو div. من السهل جدًا إعداده. ويمكن إضافته إلى أي صفحة موجودة دون الحاجة إلى تغيير علامات HTML.

مسج عصا 'م

Parallax.js

يستجيب Parallax Engine لاتجاه الجهاز الذكي. عندما لا يتوفر جهاز كشف الجيروسكوب أو كشف الحركة، يتم استخدام موضع المؤشر بدلاً من ذلك.

سلينكي.js

Slinky.js هو مكون إضافي لـ jQuery لإنشاء قوائم تنقل جميلة قابلة للتمرير مع رؤوس مكدسة.

إنفينيتي.js

Infinity.js عبارة عن UITableView للويب: فهو يعمل على تسريع التمرير عبر القوائم الطويلة ويحافظ على خلاصاتك التي لا نهاية لها سلسة ومستقرة للمستخدمين. إنها صغيرة الحجم وتم اختبارها عبر الزمن وفعالة للغاية.

مرساة تعسفية

نقاط الطريق

Waypoints هي مكتبة تسهل تنفيذ وظيفة عندما تنتقل إلى عنصر ما.

jQuery.kinetic

التمرير شريط التقدم

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

التمرير السلس لـ jQuery

يعد Smooth Div Scroll مكونًا إضافيًا لـ jQuery يقوم بتمرير المحتوى أفقيًا إلى اليسار أو اليمين.

حكاية قصة مسج

مكون إضافي بسيط لـ jQuery يعمل على توسيع المكون الإضافي animateScroll بإمكانيات صفحة واحدة.

jQuery الرسوم المتحركة التمرير البرنامج المساعد

jQuery.ScrollTo

التمرير اللانهائي jQuery البرنامج المساعد

يعد التمرير اللانهائي (أو التمرير اللانهائي) أسلوبًا شائعًا بين مواقع الويب 2.0 مثل Google Reader وLive Image Search، حيث بدلاً من الترحيل عبر العناصر باستخدام تقنيات ترقيم الصفحات التقليدية، تستمر الصفحة ببساطة في تحميل عناصر جديدة مرفقة بالنهاية.

Reg.ru: المجالات والاستضافة

أكبر مزود مسجل واستضافة في روسيا.

أكثر من 2 مليون اسم نطاق في الخدمة.

الترويج، بريد المجال، حلول الأعمال.

لقد قام أكثر من 700 ألف عميل حول العالم باختيارهم بالفعل.

إطار عمل Bootstrap: تخطيط سريع التكيف

دورة فيديو خطوة بخطوة حول أساسيات التخطيط التكيفي في إطار عمل Bootstrap.

تعلم كيفية التخطيط ببساطة وسرعة وكفاءة باستخدام أداة قوية وعملية.

تخطيط لأجل والحصول على أموال.

* مرر الماوس فوق لإيقاف التمرير مؤقتًا.

العودة إلى الأمام

قم بالتمرير السلس للصفحة لأعلى باستخدام jQuery

في هذا الفيديو، سننظر إلى لحظة إنشاء صفحة سلسة، قم بالتمرير لأعلى عند النقر فوق الرابط.

غالبًا ما يكون من المناسب استخدام رابط "العودة إلى الأعلى" عندما تكون أقرب إلى أسفل الصفحة.

يمكنك تنفيذ هذه الميزة باستخدام HTML وCSS فقط، ولكن في هذا الفيديو سأوضح لك كيف يمكنك تحسين هذه الميزة وجعلها أكثر ملاءمة باستخدام مكتبة jQuery.

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

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

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

للحصول على عرض توضيحي للبرنامج النصي وتحليل مفصل للكود، راجع الفيديو أدناه.

نظرة عامة مختصرة عن الدرس (شاهد الفيديو لمعرفة كافة التفاصيل):

Index.html

1. أول شيء نحتاجه هو الملف الذي سيتم فيه وضع رابط "العودة إلى الأعلى" نفسه. فليكن Index.html.

لكي يعمل كل شيء، في القسم رأسفي المستند، نحتاج إلى تضمين ملف نمط وملفين JavaScript (سنتحدث عنهما لاحقًا):

نقوم أولاً بتضمين مكتبة jQuery، ثم ملف script.js مع الكود الذي نكتبه بأنفسنا.

نحتاج أيضًا في هذا الملف إلى وضع الرابط نفسه، عند النقر عليه سيؤدي إلى صعود سلس إلى أعلى الصفحة:

قمة

script.js

2. والثاني هو ملف script.js، الذي نكتب فيه الوظائف التي تؤدي الإجراءات الأساسية:

$(document).ready(function())( $(function ()( $("#back-top").hide(); $(window).scroll(function ()( if ($(this). التمريرTop () > 700)( $("#back-top").fadeIn(); ) else( $("#back-top").fadeOut(); ) )); انقر(function ()( $("body,html").animate((scrollTop:0 ), 800);

لذلك، ننتظر أولاً حتى يتم تحميل المستند بالكامل ونقوم بإخفاء زر "العودة إلى الأعلى" بحيث لا يكون مرئيًا في البداية على الصفحة.

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

في الوظيفة المجهولة الثانية، نقوم بتتبع حدث النقر على الرابط داخل الكتلة #الخلفيةوتطبيق الطريقة تحريكللصعود السلس إلى أعلى الصفحة (scrollTop:0) خلال 800 مللي ثانية.

style.css

3. وثالثًا، هذا هو ملف النمط. في مثالنا لا يوجد شيء غير ضروري فيه، لذلك هناك عدد قليل من الأنماط:

النص (حجم الخط: 13 بكسل؛ ارتفاع الخط: 1.65em؛ عائلة الخط: Verdana، sans-serif؛) p (الهامش الأيسر: 150 بكسل؛) /* زر الرجوع إلى الأعلى */ #back-top( الموضع: ثابت؛ الأسفل: 10 بكسل؛ اليسار: 0 بكسل؛) #الجزء الخلفي أ (العرض: 55 بكسل؛ العرض: كتلة؛ محاذاة النص: المركز؛ الخط: 11 بكسل/100% Arial، Helvetica، sans-serif؛ تحويل النص: أحرف كبيرة زخرفة النص: لا شيء؛ لون الخلفية: شفاف؛ -moz-transition:1s) /* سهم الرسم */ #back-topspan( width:55px; height:1600px;display:block; Margin-bottom:7px; الخلفية: url("../img/up-arrow.png") مركز سفلي بدون تكرار؛ -moz-transition:1s ) #back-top a:hoverspan(background-color: rgba(0, 0، 0، 0.3)؛)

وما يستحق الذكر هو المعنى مُثَبَّتللممتلكات موضعفي الكتلة #الخلفية. يتيح لنا ذلك إصلاح موضع الزر بالنسبة لنافذة المتصفح.