V današnji vaji bomo naredili enostaven efekt paralakse z minimalno uporabo kode. S efektom dosežemo “globino” strani, tako da različno hitro premikamo plasti/ozadja na spletni strani. Osnovno poznavanje html,css in jquery je priporočljivo.

2gika-paralax-940x460

Poglej si demo paralakse

V kasnejših člankih smo naredili pa bolj napreden test (ogled priporočljiv na namiznih računalnikih in prenosnikih) – Poglej si demo paralakse št. 2

1. Za prvi korak naredimo datoteko index.html s osnovno strukturo html5 spletne strani. Pomembno tukaj je poudariti atribut data-speed, ki določa hitrost premikanja ozadja in ga kličemo kasneje v custom.js

<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<title>2GIKA paralax test</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
		<link rel="stylesheet" href="css/style.css">
		<script type="text/javascript" src="js/custom.js"></script>
	</head>

	<body>
		<div class="section first parallax" data-speed="3">
			<h1>This is <strong>Paralax</strong> test page</h1>
			<h2>Lorem ipsum dolor sit amet.</h2>
		</div>

		<div class="section second parallax" data-speed="10">
			<h2>Second Slide</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, sint earum officiis quo? Voluptatem, omnis, doloribus, alias corporis est qui quidem deserunt suscipit id nobis at assumenda labore. Inventore expedita suscipit commodi totam maiores? Autem, accusamus sapiente adipisci quis tempora deserunt odio voluptates tempore itaque fugit commodi illo expedita id numquam in excepturi non doloribus consequatur nihil odit. Illum, quae, explicabo, error necessitatibus sunt eos impedit praesentium dolorem exercitationem tempora maxime rem aspernatur adipisci amet vitae distinctio possimus sit quo repudiandae odit saepe ullam libero! Nisi, soluta, est assumenda quo cumque dolore sapiente vel doloribus repellendus totam animi quos reprehenderit!</p>
		</div>
		<div class="section third parallax" data-speed="3">
			<h2>Third Slide</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, omnis, cumque, provident, praesentium numquam ab velit maiores labore incidunt debitis amet libero obcaecati quasi nihil nemo a sequi impedit consequuntur id vel. Recusandae, enim est tenetur aliquam excepturi sint vel!</p>
		</div>

		<div class="section fourth parallax" data-speed="5">
			<h2>Forth Slide</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, quos.</p>
		</div>
	</body>
</html>

2. Za drugi korak spišemo nekaj osnovnega CSS-a. Uporabljen je bil tudi Mayer Reset CSS, ki smo ga ustavili pred body.

body {
	margin: 0;
	padding: 0;
	line-height: 1.6;
	font-family: Georgia, Arial, sans-serif;
	font-size: 12px;
	color:#666;
	font-weight: normal;
}

strong, b {
	font-weight: bold;
}

.section {
    background-size: cover;
    width: 100%;
    min-height: 600px;
    position: relative;
    z-index: 0;
}

.first {
   background: url('../img/pat2.png') 0 0 repeat fixed;
   min-height: 700px;
}

.second {
   background: url('../img/pat1.png') 0 0 repeat fixed;
    -webkit-box-shadow: 0px 0px 60px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 0px 60px rgba(0,0,0,0.4);
    box-shadow: 0px 0px 60px rgba(0,0,0,0.4);
}

.third {
   background: url('../img/bg1.jpg') 0 50% no-repeat fixed;
}

.fourth {
    background: url('../img/pat2.png') 0 0 repeat fixed;
}

h1,h2 {
	text-align: center;
	color: #666;
	font-size: 60px;
	font-size: 5.4rem;
	line-height: 1.2;
	width: 100%;
}

h1 {
	padding-top: 200px;
	padding-bottom: 100px;
	color: #fff;
	color: rgba(0,0,0,0);
	text-shadow:
	0px -1px 0px rgba(255,255,255,0.3),
	0px 0px 3px rgba(0,0,0,0.15),
	0px 2px 1px rgba(0,0,0,0.25),
	0px 1px 0px rgba(0,0,0,0.2),
	0px 3px 4px rgba(0,0,0,0.2),
	0px 4px 8px rgba(0,0,0,0.1);
}

h2 {
	font-size: 40px;
	font-size: 3.5em;
	padding-top: 50px;
	padding-bottom: 50px;
}

p {
	margin: 0 auto;
	min-width: 500px;
	max-width:800px;
	line-height: 2;
	padding:0 10px;
}

p:first-letter {
	font-size: 30px;
	font-weight: bold;
	color:#888;
	line-height: 19px;
	text-align: center;
}

3. Custom.js – horizontalno pozicijo ozadja določimo na 50%, x pozicijo pa z enačbo, ki upošteva data-speed atribut, ki smo na upoštevali pri pisanju html-ja.

$(document).ready(function(){

	$('.parallax').each(function(){
	    var $bgobj = $(this);

	    $(window).scroll(function() {
	        var yPos = -(($(window).scrollTop() - $bgobj.offset().top) / $bgobj.data('speed'));

	        var coords = '50% '+ yPos + 'px';

	        $bgobj.css({ backgroundPosition: coords});
	    });
	});
});

4. Zaključek – Paralaksa efekt je učinkovit pri uporabi “landing” spletnih strani, kjer treba v čim krajšem času logično in privlačno predstaviti produkt ali storitev. Podoben efekt smo uporabili tudi na 2gika spletni strani.