На интернет се појавуваат сé повеќе веб страници кои употребуваат еден ефект познат како паралакса скролување. Во суштина, паралакса скролување е кога содржината се скролува со различни брзини и притоа креира перспектива и длабочина.
Многу впечатлив ефект кој може да се нанесе на колку сакате слоеви. Во овој текст ќе ве запознаам со основните принципи покажувајќи ви како да креирате едноставен ефект на паралакса во два слоја.
HTML
За да почнеме мора да имаме малку HTML. Ќе вклучиме филтер текст кој ќе се постави во секција и потоа уште еден <div> кој ќе ја држи позадината:
<div class=”bg”> </div>
<section>
<h1>Home page</h1>
<p>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.</p><p>We offer the following services:</p>
<ul>
<li>Branding</li>
<li>Logos</li>
<li>Websites</li>
<li>Web applications</li>
<li>Web development – HTML5, CSS, jQuery</li>
<li>Content Management Systems</li>
<li>Responsive Web Design</li>
<li>Illustration</li>
<li>Business cards</li>
<li>Letterheads and compliment slips</li>
<li>Flyers</li>
<li>Mailers</li>
<li>Appointment cards</li>
</ul>
<h1>Sub page</h1>
<p>Before you choose us to take on your project you will probably want to know a bit more about us, so meet the team:</p>
<img alt=”” src=”https://lorempixum.com/500/600″ /> <p>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.</p>
<p>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.</p> <p>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.</p> <img alt=”” src=”https://lorempixum.com/500/600/sports” /> <p>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.</p>
</section>
Ова е целиот код во HTML кој ни е потребен. Целиот текст е за да сме сигурни дека сме ја покриле целата страница. Сега малку повеќе во CSS:
CSS
CSS делот којшто ни треба за да креираме ефект на паралакса е навистина едноставен ако знаете зошто е напишан на начинот на којшто е. Прво, треба да поставиме слика како позадина на .bg div. Потоа треба да го спречиме 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();
});
Откако го направивме и ова, кодот ни е целосен. Ако ја тестирате датотеката ќе видите дека работи. За да ја смениме брзината, треба да ја смениме децималната вредност. Колку помала е таа вредност, толку помала е брзината, и обратно, поголема децимална вредност, поголема брзина. Крајниот резултат од овој код може да го видите во ова пенкало кое го креирав.
Заклучок
Како и што можевте да видите, ефектот на паралакса не е тежок. Се разбира, ова е едноставен пример, но вие може врз основа на него да креирате секаков вид на комплексен паралакса ефект.
Дали вие имате употребено ефект на паралакса во сопствен проект? Имате ли подобар метод? Оставете совет во коментар.
