الشفرة

كيفية إنشاء تأثير المنظر بسيط

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

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

HTML

للبدء ، نحتاج إلى بعض HTML ، وسندرج بعض نص الحشو ليتم وضعه داخل قسم ثم قسم آخر

سيحافظ على خلفيتنا: 

Home page
We are a fairly small, flexible design studio that designs for print and web. We work flexibly with clients to fulfil their design needs. Whether you need to create a brand from scratch, including marketing materials and a beautiful and functional website or whether you are looking for a design refresh we are confident you will be pleased with the results.
We offer the following services:
  • Branding
  • Logos
  • Websites
  • Web applications
  • Web development – HTML5, CSS, jQuery
  • Content Management Systems
  • Responsive Web Design
  • Illustration
  • Business cards
  • Letterheads and compliment slips
  • Flyers
  • Mailers
  • Appointment cards
Sub page
Before you choose us to take on your project you will probably want to know a bit more about us, so meet the team:
 
Ross has over 10 years experience in the industry. He is our Creative Director, digital designer, web designer and front-end developer. He is also pretty good with a sketchbook. Before starting the company Ross worked as a designer and studio manager for a design house who boasted a number of big name clients. Ross has brought his vast experience from this role to the work he does now.
Monica is Ross’ sister, our Art Director and specialises in graphic and print design. She has also worked with some big names and her designs have won her a number of industry awards.
 
Rachel and Chandler are our Junior Designers. Rachel is a web designer with knowledge of HTML and CSS and supports Ross on projects. Chandler has just finished his Graphic Design degree and enjoys continuing to learn from Monica and building his experience.
  
Joey and Phoebe focus on bringing new business to the company. They have won a number of big clients recently and both also have qualifications in project management to ensure that the projects run smoothly from start to finish.

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

المغلق

إن CSS المطلوب لإنشاء تأثير المنظر هو في الواقع بسيط جدًا إذا كنت تفهم سبب كتابته كما هو. نحتاج أولاً إلى تعيين صورة الخلفية من div .bg ثم نحتاج إلى إيقاف div من التمرير لأن إجراء التمرير سيتم تطبيقه بواسطة jQuery؛ لذلك نحن بحاجة إلى تحديد موقفها لإصلاح. بعد ذلك ، نضبط العرض على 100٪ والارتفاع إلى 300٪ للتأكد من أن div أكبر من الشاشة الفعلية. وضعناها في أعلى اليسار وأخيراً أعطها مؤشر z-1 للتأكد من أنه يتم تقديمه أسفل النص. 

.bg {background: url('bg.jpg') repeat;position: fixed;width: 100%;height: 300%;top:0;left:0;z-index: -1;}

هذا هو كل ما نحتاجه من CSS لـ bg div ، والآن نحتاج فقط إلى تصميم بقية صفحتنا (على الرغم من أن هذا اختياري تمامًا ، فإنه لا يؤثر على تمرير المنظر): 

section {color: #fff;font-family: arial;width: 500px;margin: auto;line-height: 20px;font-size: 16px;}

حاول تمرير الصفحة الآن وسترى أن النص قد تم تمريره ولكن الخلفية ثابتة ، سنقوم بتغيير ذلك باستخدام jQuery:

jQuery

ما نريد أن يقوم به jQuery هو التحقق من مدى تمرير المستخدم ونقل الخلفية بسرعة أبطأ. سنقوم بإنشاء دالة تسمى parallax وإنشاء متغير سيحافظ على قيمة وحدات البكسل التي قام المستخدم بتمريرها: 

function parallax(){var scrolled = $(window).scrollTop();

الآن ، لجعل التمرير في الخلفية بنفس سرعة النص ، قمنا بتعيين القيمة العليا لل div لتكون القيمة السالبة للتمرير ، ثم أغلق الوظيفة. مثل ذلك: 

    $('.bg').css('top', -(scrolled) + 'px');}

ومع ذلك ، فإن نقطة التمرير عند المنظر هي التحرك بسرعة مختلفة ، لذلك لضبط السرعة ، نضاعف القيمة بجزء ، على سبيل المثال 0.2 لـ 20٪: 

function parallax(){var scrolled = $(window).scrollTop();$('.bg').css('top', -(scrolled * 0.2) + 'px');}

هناك شيء واحد آخر يجب القيام به للحصول على التأثير قيد التشغيل وهذا هو استدعاء الدالة في كل مرة يتم فيها تشغيل حدث التمرير: 

$(window).scroll(function(e){parallax();});

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

استنتاج

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

هل استخدمت تأثير المنظر في مشروع؟ هل لديك طريقة أفضل؟ اسمحوا لنا أن نعرف في التعليقات.

صورة مميزة / صورة مصغرة ، انزلاق منظور الصورة عبر Shutterstock.

التمرير المنظر إختلاف المنظر المنظر البسيط كيفية بناء موقع المنظر

OdWebDesign.Net