10 مقتطفات من CSS و JavaScript لإنشاء تأثير Parallax Scrolling

هناك الكثير من الالتباس حول تصميم المنظر وكيفية عمله على الويب. بشكل عام ، يستخدم تصميم المنظر الحركة لخلق الوهم بالعمق على الصفحة.

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

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

1. السقوط العظيم بواسطة CJ Gammon

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

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

شاهد القلم The Great Fall بواسطة CJ Gammon

2. CSS Scrolling Parallax بواسطة Sebastian Schepis

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

استخدم المطور Sebastian Schepis فقط CSS لهذه الصفحة ، وهو مفهوم بسيط جدًا. أعتقد أن أي شخص يمكنه استنساخ هذا بسهولة ، ناهيك عن تصميم الخلفية يمكن تحسينه بشكل كبير.

شاهد تأثير Pen CSS Scrolling Parallax بواسطة Sebastian Schepis

3. Simple Image Tag Parallax بواسطة Renan Breno

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

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

انظر Pen Simple Image Tag Parallax بواسطة Renan Breno

4. المنظر وخلفيات الصور الثابتة

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

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

شاهد القلم #Maincode Hackdays بواسطة chaobu

5. CSS Parallax بواسطة باولو كونها

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

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

شاهد Pen CSS Parallax بواسطة باولو كونها

6. تصميم المنظر بواسطة كاتي روجرز

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

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

شاهد تصميم Pen Parallax بواسطة Katie Rogers

7. التمرير المنظر صورة الخلفية لريتش هويل

ذكرت سابقًا كيف يمكن أن تختلف سرعة التمرير بناءً على معدل تغيير موضع الخلفية. هذا المثال هو المقارنة المثالية لمعرفة كيفية عمل ذلك.

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

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

انظر إلى Paralax صورة الخلفية للتمرير بالقلم بواسطة Rich Howell

8. خلفية النجوم المنظر لسارانش سينها

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

تعمل الرسوم المتحركة عبر CSS ، لكن هذا المقتطف يستخدم Sass و Compass ، لذلك سيكون من المفيد فهمه قبل إجراء التعديلات.

شاهد خلفية Pen Parallax Star في CSS بواسطة Saransh Sinha

9. قماش المنظر الأفق لجاك روجيل

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

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

شاهد لوحة Pen Canvas Parallax Skyline بواسطة Jack Rugile

10. فلتر زجاج مكسور من Bajjy Xilo

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

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

شاهد مرشح Pen BrokenGlass css بواسطة Bajjy Xilo