إنشاء موقع للتمرير المنظر باستخدام Stellar.js

() translation by (you can also view the original English article)

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

المقدمة

لقد كان تأثير التمرير على المنظر شائعًا منذ أن قامت مواقع مثل Nike's Better Worldبعرضه على مواقعها الإلكترونية قبل بضع سنوات. وقد تم التأثير على المنظر فيما يتعلق بالواجهات منذ الثمانينات عندما تم استخدامها لأول مرة في عناوين ألعاب الفيديو ثم في الألعاب نفسها . وفي الآونة الأخيرة ، بدأت تظهر في واجهات الويب - ستصبح على دراية بـsilverbackapp الذي استخدم التأثير كجزء من العنوان.

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

ل ... ماذا؟

Parallax هو إزاحة أو اختلاف في الموضع الظاهري لكائن يتم مشاهدته على طول خطين مختلفين للأفق. - ويكيبيديا

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

فهل HTML5؟ من المؤكد أن HTML5 لديها جزء للعب في تأثير التمرير من المنظر لكنه أكثر من HTML5 ، فإنه يستخدم أيضا بعض أشكال javascript ، مثل مسج ، ولن يكون ممكنا بدون القليل من CSS3.

مشتق من الكلمة الفعلية اختلاف المنظر من παραλλαξη اليونانية (parallaxis) وهو ما يعني التغيير. الأجسام القريبة من العين لها اختلاف أكبر من الأجسام الموجودة في المسافة. هذا يعني أن الكائنات الأقرب إلينا يمكن أن تظهر بشكل أسرع من الكائنات في الخلفية.

إن وضع خلفيات وخلفيات متعددة (مثل الصور) ثم السماح لها بالتحرك بسرعات مختلفة يخلق إحساسًا بالعمق والأبعاد.

المنظر في العمل

نلقي نظرة على بعض الأمثلة التي تثبت آثار المنظر.

كل موقع يحكي قصة

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

فيدين + كينيدي (W & K) ، يدعم اللاعبون من وراء موقع Nike Better World هذا:

في رأينا ، التكنولوجيات مستقلة عن المفهوم. كان تركيزنا الأساسي على إنشاء تجربة تفاعلية رائعة في سرد القصص. - فيدن + كينيدي (W & K)

كيف سيعمل موقعنا

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

فيما يلي كيفية ظهور بنية المجلد لدينا:

المكونات الإضافية المستخدمة

Stellar.js

لمساعدتي في تحقيق ذلك ، أستخدم Stellar.js ، وهو ملحق مسجّل بواسطة Mark Dalgleish مما يجعل من السهل إنشاء مواقع للتمرير في المنظر. هناك الإضافات الأخرى المتاحة لمساعدتك على القيام بذلك والتي ذكرتها في أسفل هذه المقالة. لقد اخترت استخدام Stellar.js نظرًا لكونها سهلة الاستخدام إلى حد ما ، وعلى الرغم من عدم إثباتها خلال هذا البرنامج التعليمي ، يمكن تحسينها للعمل على الأنظمة الأساسية للأجهزة الذكية مثل iOS.

Waypoints.js

سأستخدم نقاط المسج أيضًا بواسطة Caleb Troughton . Waypoints هو ملحق jQuery آخر يقوم بتنفيذ وظيفة كلما قمت بالتمرير إلى عنصر. يتيح هذا التنقل على الموقع لإبراز الشريحة التي نحن عليها وفقًا لموضع شريط التمرير.

مسج التخفيف

مسج التخفيف هو مكون إضافي من GSGD يقدم خيارات تخفيف متقدمة. سنستخدم هذا لإضافة حركة تخفيف لطيفة عند الانتقال من الشريحة إلى الشريحة.

ترميز HTML

نبدأ من index.html لدينا نضيف نوع HTML5 ثم ننشئ قسم الرأس. هذا يتكون من إعادة تعيين CSS متبوعة بأوراق الأنماط 'styles.css'. ثم نضيف مسج المكتبة متبوعة بملف jQuery المخصص "js.js". ثم يتبع ذلك ثلاثة ملحقات ، "jquery.stellar.min.js" و "waypoints.min.js" و "jquery.easing.1.3.js".

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Create a parallax Website using Stellar.js</title>

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/js.js"></script>
<script type="text/javascript" src="js/jquery.stellar.min.js"></script>
<script type="text/javascript" src="js/waypoints.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

</head>

العنصر التالي في html الخاص بنا هو صورة شعار Envato الذي يبقى في موضع ثابت ثابت في كامل الموقع. نضيف إلى ذلك فئة من "envatologo" حتى نتمكن من تحديد موضعها لاحقًا عندما نرمز إلى CSS.

1	<img class="envatologo" src="images/envatologo.png">

الشرائح

تستخدم الشرائح الأربعة نفس الترميز:

1
2	<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">
3	<a class="button" data-slide="2" title=""></a>
4	</div><!--End Slide 1-->

نستخدم فئة "الشريحة" التي سيتم استخدامها كنمط عام لجميع الشرائح. ثم يتم إعطاء كل شريحة معرف "الشريحة" متبوعًا برقم الشريحة أي "Slide1". نستخدم سمة بيانات HTML5 ونطلق عليها اسم "بيانات الشرائح". سيتيح لنا ذلك استهدافها باستخدام jQuery. تتم إضافة سمة بيانات أخرى من "بيانات-ممتاز-خلفية النسبة". هذا محدد للمكوّن الإضافي stellar.js jQuery ويخبر المكون الإضافي بما يجب أن تنتقل إليه سرعة العنصر.

ترتبط هذه النسبة بسرعة التمرير الطبيعية ، لذا فإن نسبة 0.5 قد تتسبب في تمرير العنصر بنصف السرعة ، لن يكون لنسبة 1 أي تأثير ، ونسبة 2 قد تؤدي إلى التمرير بسرعة مضاعفة .

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

1	<span class="slideno">Slide 1</span>

في الشريحتين 3 و 4 ، نضيف أيضًا بعض عناصر الصورة إلى شعبة "الشرائح". هذه الصور ستعطي فكرة حقيقية عن تأثير المنظر الذي نخلقه. نحن نلف هذه داخل div 'الغلاف' الذي سيكون مركزيًا ويبلغ '960px' ، وهذا فقط للتأكد من أنه يعرض OK عبر جميع أحجام شاشات سطح المكتب.

كل صورة لها خاصية "بيانات النجمية النسبية" مرتبطة بها. هذا مرة أخرى هو stellar.js محددة ويخبر البرنامج المساعد ما نسبة السرعة يجب أن التمرير العنصر في.

<div class="wrapper">
		
			<img src="images/slide3/freelance.png" data-stellar-ratio="1.4" data-stellar-vertical-offset="-102"alt="">
			<img src="images/slide3/psdtuts.png" data-stellar-ratio="1.5" data-stellar-vertical-offset="-53"alt="">
			<img src="images/slide3/rockable.png" data-stellar-ratio="2.7" data-stellar-vertical-offset="-200"alt="">
			<img src="images/slide3/themeforest.png" data-stellar-ratio="3" data-stellar-vertical-offset="-200"alt="">
			<img src="images/slide3/tutshub.png" data-stellar-ratio="1" data-stellar-vertical-offset="-200"alt="">
			<img src="images/slide3/psdtuts.png" data-stellar-ratio="1.5" data-stellar-vertical-offset="-200"alt="">

</div>

المغلق

لحسن حظنا لا يوجد الكثير من المشاركة مع CSS. انها في الاساس تصميم بعض العناصر البسيطة ، ولكن معظمها لوضع بعض عناصر الصورة.

أول شيء يتعين علينا القيام به مع CSS لدينا هو إحضار الخط BEBAS باستخدام @ وجه الخط. ثم نضيف ذلك إلى html لتعيين الخط الخاص بالموقع. نحن أيضا تعيين العرض والارتفاع من أتش تي أم أل والجسم إلى 100 ٪. سيتيح هذا لشرائحنا اعتماد العرض والارتفاع الكاملين لشاشة المستخدم.

  
@font-face {  
	font-family: 'BebasRegular';  
	src: url('font/BEBAS___-webfont.eot');  
	src: url('font/BEBAS___-webfont.eot?#iefix') format('embedded-opentype'),     
	url('font/BEBAS___-webfont.woff') format('woff'),     
	url('font/BEBAS___-webfont.ttf') format('truetype'),     
	url('font/BEBAS___-webfont.svg#BebasRegular') format('svg');  
	font-weight: normal;  
	font-style: normal;  
	}  
	
html,body{ 
	font-family: 'BebasRegular';  	
	width:100%;  	
	height:100%;  
}

الملاحة

يتم منح الموضع الرئيسي موضع "ثابت" لإبقائه في نفس المكان في جميع أنحاء الموقع. قمنا بإزاحة 20 بكسل من الأعلى لإعطاء مساحة صغيرة فوقها وتعيين مؤشر z على 1 لضمان أن يكون هذا على الطبقة العليا من الموقع.

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

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

  
.navigation {  	
	position:fixed;  	
	z-index:1;  	
	top:20px;  
}  
.navigation li {  	
	color:#333333;  	
	display:block;  	
	padding: 0 10px;  	
	line-height:30px;  	
	margin-bottom:2px;  	
	font-weight:bold;  	
	-webkit-transition: all .2s ease-in-out;  	
	border-bottom:1px solid black;  	
	text-align:left;  	
	width:53px;  
}  
.navigation li:hover,
.active {  	
	font-size:25px;  	
	cursor:pointer;  	
	width:100px!important;  
}

يتم إعطاء شعار envato بعض أنماط تحديد المواقع فقط للتأكد من أنه لا يزال في وسط الشاشة. وبالمثل بالنسبة للملاحة ، يتم أيضًا منح مؤشر z "1" لضمان بقاءه على القمة.

  
.envatologo {  
	position:fixed;  
	top:50%;  
	left:50%;  
	width:446px;  
	margin-top:-41px;  
	margin-left:-223px;  
	z-index:1;  
}

الآن ننتقل إلى تصميم الشرائح الفعلية. نحن نعطيهم خاصية "تثبيت" خلفية. تحدد خاصية "إرفاق الخلفية" ما إذا كانت صورة الخلفية ثابتة أو يتم تمريرها مع باقي الصفحة ، لذا فهي مفيدة لصور الخلفية (مثل المستخدمة في الشريحة الرابعة). على سبيل المثال ، استخدمنا خلفية من تأليف Philipp Seiffert والتي يمكن تنزيلها هنا . قمنا بتعيين موضع الشريحة إلى "نسبي". هذا هو أنه يمكننا وضع "slideno" و "الزر" على الشريحة تمامًا مقارنةً بالوثيقة الفعلية.

ظل الصندوق هو فقط لأغراض الديكور ويضيف ظل قطرة لطيفة إلى الشكل العلوي العلوي لكل شريحة.

.slide {
	background-attachment: fixed;
	width:100%;
	height:100%;
	position: relative;
	box-shadow:inset 0px 10px 10px rgba(0,0,0,0.3);
}
.wrapper {
	width:960px;
	height:200px;
	margin:0 auto;
	position:relative;
}
.slideno {
	position:absolute;
	bottom:0px;
	left:0px;
	font-size:100px;
	font-weight:bold;
	color:rgba(255,255,255,0.3);
}

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

.button{
	display:block;
	width:50px;
	height:50px;
	position:absolute;
	bottom:0px;
	left:50%;
	background-color:#333333;
	background-image:url(../images/arrow.png);
	background-repeat:no-repeat;
}
.button:hover{
	background-color:#494949;
	cursor:pointer;
}

التصميم لكل شريحة فردية بسيط نسبيًا ويتبع النمط نفسه في كل مرة. تحتوي الشريحة الواحدة على لون خلفية '# 5c9900'. تحتوي الشريحة الثانية أيضًا على لون الخلفية عليه. تحتوي الشريحة الثانية أيضًا على صور ويمكننا استهداف كل منها باستخدام CSS انتخابrnth-child (n) . يمكن وصف هذا المحدد

تطابق هذه الفئة الزائفة العناصر على أساس مواضعها ضمن قائمة العناصر الرئيسية للعنصر الفرعي.

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

/******************************
 SLIDE 1 
*******************************/
#slide1{
	background-color:#5c9900;
	
}
/******************************
 SLIDE 2 
*******************************/
#slide2{
	background-color:#005c99;
	
}
#slide2 img:first-child{
	position:absolute;
top: 700px;
left: -150px;
}
#slide2 img:nth-child(2){
	position:absolute;
	top:300px;
	left:100px;
}
#slide2 img:nth-child(3){
	position:absolute;
	top:600px;
	left:300px;
}
#slide2 img:nth-child(4){
	position:absolute;
	top:400px;
	left:300px;
}
#slide2 img:nth-child(5){
	position:absolute;
	top:600px;
	right:300px;
}
#slide2 img:nth-child(6){
	position:absolute;
	top:600px;
	right:300px;
}
#slide2 img:nth-child(7){
	position:absolute;
	top:400px;
	right:100px;
}
#slide2 img:nth-child(8){
	position:absolute;
	top:100px;
	right:300px;
}

الشريحة الثالثة تتبع نفس الحركات مثل الشريحة الثانية.

  
/****************************** SLIDE 3 *******************************/  
#slide3 {  	
	background-color:#b6c10b;  
}  
#slide3 img:first-child {  	
	position:absolute;  
	top: 700px;  
	left: 300px; 
}  
#slide3 img:nth-child(2){  	
	position:absolute;  	
	top:100px;  	
	left:100px;  
}  
#slide3 img:nth-child(3){  	
	position:absolute;  	
	top:150px;  	
	left:300px;  
}  
#slide3 img:nth-child(4){  	
	position:absolute;  	
	top:450px;  	
	left:300px; 
}  
#slide3 img:nth-child(5){  	
	position:absolute;  	
	top:200px;  	
	right:300px;  
}  
#slide3 img:nth-child(6){  	
	position:absolute;  	
	top:100px;  	
	right:300px;  
}

تختلف الشريحة 4 قليلاً عن الشريحتين السابقتين لأنها لا تحتوي على أي عناصر صور أو لون خلفية ، ولكنها تستخدم صورة خلفية بدلاً من ذلك. لقد قمنا أيضًا بإعطائه خاصية حجم خلفية CSS3: cover '. يؤدي هذا إلى تعيين صورة الخلفية لتغطية نافذة المتصفح بالكامل وسيتم تغيير حجمها مع تغيير حجم نافذة المتصفح. لقد أضفنا أيضًا سطرًا من النص على الشريحة الأخيرة التي صممناها وأعطينا فئة من "parallaxbg"

/******************************
 SLIDE 4 
*******************************/

#slide4{
	background-image:url(../images/Slide4/desktop4.jpg);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
#slide4 .parallaxbg{
	position:absolute;
	right:40px;
	top:40px;
	font-size:28px;
	color:rgba(51,51,51,0.3);
}

المسج

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

  
jQuery(document).ready(function ($) {


    //initialise Stellar.js
    $(window).stellar();

    //Cache some variables
    var links = $('.navigation').find('li');
    slide = $('.slide');
    button = $('.button');
    mywindow = $(window);
    htmlbody = $('html,body');


    //Setup waypoints plugin
    slide.waypoint(function (event, direction) {

        //cache the variable of the data-slide attribute associated with each slide
        dataslide = $(this).attr('data-slide');

        //If the user scrolls up change the navigation link that has the same data-slide attribute as the slide to active and 
        //remove the active class from the previous navigation link 
        if (direction === 'down') {
            $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active');
        }
        // else If the user scrolls down change the navigation link that has the same data-slide attribute as the slide to active and 
        //remove the active class from the next navigation link 
        else {
            $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').next().removeClass('active');
        }

    });

    //waypoints doesnt detect the first slide when user scrolls back up to the top so we add this little bit of code, that removes the class 
    //from navigation link slide 2 and adds it to navigation link slide 1. 
    mywindow.scroll(function () {
        if (mywindow.scrollTop() == 0) {
            $('.navigation li[data-slide="1"]').addClass('active');
            $('.navigation li[data-slide="2"]').removeClass('active');
        }
    });

    //Create a function that will be passed a slide number and then will scroll to that slide using jquerys animate. The Jquery
    //easing plugin is also used, so we passed in the easing method of 'easeInOutQuint' which is available throught the plugin.
    function goToByScroll(dataslide) {
        htmlbody.animate({
            scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top
        }, 2000, 'easeInOutQuint');
    }



    //When the user clicks on the navigation links, get the data-slide attribute value of the link and pass that variable to the goToByScroll function
    links.click(function (e) {
        e.preventDefault();
        dataslide = $(this).attr('data-slide');
        goToByScroll(dataslide);
    });

    //When the user clicks on the button, get the get the data-slide attribute value of the button and pass that variable to the goToByScroll function
    button.click(function (e) {
        e.preventDefault();
        dataslide = $(this).attr('data-slide');
        goToByScroll(dataslide);

    });


});

مجرد نقاط قليلة

Create a Parallax Scrolling Website using Stellarjs envato

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

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

استنتاج

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

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

مزيد من الروابط القراءة والموارد

خلف الكواليس في Nikes Better World.
21 أمثلة على مواقع التمرير على شبكة الإنترنت Parallax Scrolling Websites.
Scrollorama A parallax plugin مع بعض الميزات الرائعة الأخرى.
إنشاء رأس تنقل مثبت باستخدام JQuery Waypoints