JInvertScroll to ciekawe rozwiązanie, efektu horyzantalnego paralax'u


Pod adresem http://www.pixxelfactory.net/jInvertScroll/ znajduje się dokładna dokumentacja tegoż efektu wraz z przedstawieniem jego działania. W tym artykule postaram się w miarę prosty sposób przedstawić jego działanie.

Z podanej strony ściągamy paczkę z plikami. Plikijquery.jInvertScroll.js , jquery.min oraz jInvertScroll.css wklejamy w wybrane przez nas miejsce na serwerze podając ich ścieżki w pliku index.php, badź innym głównym w sekcjii header.

Na stronie podajemy kod naszego skryptu, na stronie autora możemy znaleźć dodatkowe ustawienia, dotyczące m.in szybkości przywijania. Ja dla własnego użytku ogranicza go do minimum.

(function($) {
$.jInvertScroll(['.scroll']);
}(jQuery));
$(document).ready(function(){
$('html, body').animate({scrollTop: 0}, 20);
});

Kolejnym ważnym krokiem w celu, prawidłowego skonfigurowania skryptu jest zmodyfikowanie kodu styli odpowiednio dla naszych potrzeb. W moim przypadku kod styli będzie wyglądał następująco:

.horizon
{
line-height: 0;
z-index: 100;
width: 3000px;
}
.front
{
z-index: 5000;
top: 150px;
width: 7600px;
}
.page
{
position: absolute;
top: 0px;
background: white;
opacity: 0.9;
padding: 5px 15px;
width: 1000px;
}
.sec-1
{
left: 450px;
}
.sec-2
{
left: 2350px;
}
.sec-3
{
left: 4250px;
}
.sec-4
{
left: 6150px;
}

.sec-1 i dalej to sekcje w których podajemy odstępy poszczególnych sekcji od lewej strony. W tym przypadku szerkość strony 1000px i po 450px z lewej i z prawej.

.horizon – ustawienia tła, czyli tyłu

.front – ustawienia bloku z treściami

.page – ustawienia ogólne strony

Rezultat zamieszczam pod poniższym adresem http://www.webface.pl/porady/jinverter


2016-04-15 17:00:00 Presented by Martin S