Połącz się z nami

Internet Maker

Wsuwane tło w jQuery

Opublikowane

dnia

W dzisiejszym tutorialu zajmiemy się wysuwanym tłem stworzonym przy pomocy jQuery. Pokażę krok po kroku, jak przy odrobinie wysiłku stworzyć całkiem interesujący efekt, który przy odpowiednim zastosowaniu może w ciekawy sposób urozmaicić Twoją stronę internetową. Zabierzmy się zatem do pracy!

  

Co chcemy osiągnąć?

Jest kilka rzeczy, które musimy wykonać dla poprawnego efektu. Kod, który przedstawię w poniższym tutorialu w szybki sposób przedstawia jak osiągnąć cel. Bardziej wydajnym byłoby stworzenie z tego pluginu, dzięki czemu wachlarz możliwości webmastera byłby dużo szerszy. Być może nastąpi to w przyszłości.

  1. W pierwszej kolejności musimy wygenerować ?pasy? w Javascript. Ich szerokość powinna być zależna od szerokości ekranu użytkownika.
  2. Następnie będziemy musieli sprawić, aby ?pasy? wsuwały się w głąb ekranu. Można to wykonać przy pomocy animacji. Jednak nie chcemy aby każdy z pasów wsuwał się po kolei. To zepsułoby cały efekt.
  3. Chcemy, aby pasy się zresetowały, gdy wyświetlana będzie inna animacja.
  4. Pasy powinny być wypozycjonowane tak, aby treść strony znajdowała się na wierzchu.
  5. Użyjemy jQuery i Javascript, ponieważ bez tego ciężko byłoby uzyskać odpowiedni efekt.
  6. Aby zacieniować pasy, użyjemy tej wtyczki (http://www.bitstorm.org/jquery/shadow-animation/)
  7. I oczywiście włączymy do tego trochę CSS, aby mieć pewność, że wszystko będzie ładnie się prezentowało.

Czego będziemy używać?

Krok pierwszy – HTML

W pierwszej kolejności stworzymy kilka div?ów w naszym pliku HTML. Będą one działać jak swoiste pojemniki dla naszych podstron. Wewnątrz nich stworzymy kolejny blok o nazwie ?content?, w którym umieścimy jakąkolwiek treść chcemy. Gdy skończymy, powinny one działać jak zwykłe bloki. Wewnątrz pliku HTML umieściłem również proste menu, jednak Ty możesz to zrobić w inny sposób. Divy z wsuwającymi się pasami tła muszą być bezpośrednimi potomkami tagu .



Strona domowa- treúś
O nas- treúś
Us?ugi- treúś

Krok drugi – jQuery

Plik jQuery dołączamy tak jak zwykle się to robi. Wykonamy w tym miejscu kilka rzeczy. Po pierwsze, stworzymy funkcję służącą do ?pakowania? pozostałych funkcji w kolejkę. Kolejka ta pozwoli animacjom uruchomić się płynnie, bez przeszkadzania jedna drugiej. Dodałem także zmienną ?objects?, która zawiera identyfikator  elementu, któremu chcemy nadać efekt wsuwania i kierunek animacji.

$(document).ready(function () {
 
    var animationsRunning = 0;
    var initialWidth = $(window).width();
 
    var wrapFunction = function (fn, context, params) {
            return function () {
                fn.apply(context, params);
            };
        };
 
    var funqueue = [];
 
    var objects = {
        'home': 'vertical',
        'about': 'horizontal',
        'services': 'slide'
    }

Teraz musimy stworzyć funkcję, która pobierze dane ze zmiennej ?objects? wraz z kierunkiem animacji. Następnie przy pomocy funkcji if określimy w jaki sposób ma być wyświetlana animacja (w zależności od tego, co znajdowało się w zmiennej objects). Stworzymy jeszcze kilka containerów, aby wszystko było uporządkowane. Jak widać, póki co nie ma nic skomplikowanego.

W kolejnym kroku użyjemy pętli for, aby wygenerować pasy zależne od szerokości ekranu. Cały kod powinien w chwili obecnej wyglądać mniej więcej tak:

function generateSlice(mainContainer, direction) {
 
        var direction = direction
        var mainContainer = $('#' + mainContainer);
        var sliceWidth = 90;
 
        var height = screen.height;
        var width = screen.width;
 
        mainContainer.css({
            'width': width + 'px',
            'height': height + 'px'
        });
 
        if (mainContainer.find('.slices').length < 1) {
            mainContainer.append('
'); } var incr = 0; var theShadow = $(mainContainer).find('endShadow'); if (direction == 'vertical') { mainContainer.addClass('vertical'); if (mainContainer.find('.vertical').length < 1) { mainContainer.children('.slices').append('
'); } for (x = 0; x < (width / sliceWidth); ++x) { mainContainer.find('.vertical').append('
'); } } else if (direction == 'horizontal') {

Po wykonaniu tego wszystkiego, uruchomienie funkcji jest banalnie proste. Wystarczy użyć poniższego kodu. Jak widać poniżej, bazujemy na tym, co zawiera zmienna ?objects?.

$.each(objects, function (k, v) {
? ? generateSlice(k, v);
});

Krok trzeci – animowanie

Kolejnym etapem jest animowanie. Stworzyłem funkcję, która resetuje animację poprzez sprawdzenie kierunku, w którym przesuwają się elementy, a następnie w oparciu o to zmieniając pozycję. Uruchamia się ona po zakończeniu animacji.

W kolejnym kroku sprawdzamy, czy animacja jest uruchomiona, usuwamy niektóre elementy i animujemy poszczególne pasy. Użyłem tutaj losowego generatora liczb. Dzięki temu pasy wsuwają się inaczej przy każdym uruchomieniu animacji.

function animation(container, direction) {
 
    if (animationsRunning > 0) {
        return false;
    }
 
    $('body > div').css({
        'z-index': ''
    });
    $('body > div').removeClass('current-slide');
     
    $('.content').fadeOut();
     
    var aLength = 500;
   
    var direction = direction;
    var animationType;
     
    $container = $('#' + container);
    $container.css({
        'z-index': '10'
    });
    $container.addClass('current-slide');
 
    $container.find('.slice').each(function () {
 
        var randTime = Math.floor(Math.random() * (aLength + 100)) + (aLength - 100);

Następnie sprawdzamy, w którym kierunku się przesuwamy i na podstawie tego uruchamiamy animację. Zwykła animacja powinna wyglądać mniej więcej tak:

animationsRunning += 1;
$(this).animate(animationType, randTime, function () {
    $(this).animate({
        'boxShadow': 'none'
    });
    setTimeout(function () {
        $container.children('.slice').addClass('noshadow');
        $('body > div:not(#' + container + ') .slice').each(function () {
            restartAnimation($(this));
        });
         
          
        $container.find('.content').fadeIn();
        animationsRunning -= 1;
        if (animationsRunning < 1 && funqueue.length > 0) {
            (funqueue.shift())();
        }
    }, (aLength));
});

Teraz zostaje już tylko ustawić odpowiednio menu. Sprawdzamy przy tym, które pasy odpowiadają za poszczególne elementy menu. Menu zostało u nas użyte jako sposób do ?wpuszczenia? animacji w ruch i ustawienia jej w uniwersalnej pozycji.

$('#menu a').click(function () {
 
    if ($(this).attr('name') == 'home') {
        if (animationsRunning < 1) {
            animation('home', 'vertical');
        } else {
            funqueue.length = 0;
            funqueue.push(wrapFunction(animation, this, ['home', 'vertical']));
        }

Ostatnie poprawki

Teraz pozostało już tylko nadać ostateczny wygląd naszej stronie w CSS. Kodu jest tam raczej niewiele, więc nie ma większego sensu go tutaj specjalnie omawiać.
Nie zapomnij sprawdzić dema i zostawić komentarza 🙂

Student Informatyki i Ekonometrii na Politechnice Gdańskiej, zapalony fotograf i multiinstrumentalista.

Kontynuuj czytanie
Reklama
Kliknij, by skomentować

Zostaw komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Internet Maker

Pozycjonowanie strony internetowej a reklamy w Internecie – czym się różnią?

Nie masz cierpliwości do pozycjonowania? Skorzystaj z pomocy profesjonalistów!

Opublikowane

dnia

przez

Chcesz osiągnąć sukces w e-biznesie i zwiększyć widoczność swojej strony w sieci? Nie pozostaje Ci nic innego jak zająć się promocją witryny. Zacznij od inwestycji w pozycjonowanie, czyli zgodnej ze wskazówkami Google optymalizacji strony pod wyszukiwarkę internetową. Pamiętaj, że największa ilość wejść pochodzi właśnie z wyszukiwarek, dlatego zajmowanie wysokiej pozycji w rankingu Google szybko przełoży się na lepsze statystyki.

(więcej…)

Kontynuuj czytanie

Internet Maker

Jak szybko i łatwo stworzyć stronę mobilną

Opublikowane

dnia

W dzisiejszych czasach coraz bardziej popularne staje się przeglądanie stron internetowych na urządzeniach mobilnych. Ba! Samo surfowanie po sieci to w sumie już przeszłość – obecnie zakupy czy płatności mobilne to chleb powszedni dla polskich internautów. 

(więcej…)

Kontynuuj czytanie

Internet Maker

Strona na WordPressie? Grunt to dobry hosting

Opublikowane

dnia

WordPress jest powszechnie uważany za najlepszy system zarządzania treścią zarówno dla prostych blogów i stron, jak i większych serwisów internetowych oraz sklepów. Szacuje się, że już 23% witryn na świecie korzysta z WordPressa, a wśród nich takie marki jak BBC,  MTV czy Sony.

(więcej…)

Kontynuuj czytanie

Internet Maker

Jak zabezpieczyć swoje zdjęcia w chmurze

Opublikowane

dnia

Niedawny wyciek nagich zdjęć znanych osobistości wznowił dyskusje na temat bezpieczeństwa naszych prywatnych danych. Jako że część fotografii została wykradziona poprzez iCloud, prezentujemy dziś jak zabezpieczyć swoje dane w chmurze. (więcej…)

Kontynuuj czytanie

Internet Maker

Jak usunąć historię swojej aktywności z Facebooka?

Opublikowane

dnia

Usunięcie swojej aktywności z Facebooka nie jest takie proste, jakby się mogło wydawać. Portal społecznościowy daje możliwość zachowania kopii swoich postów oraz zamknięcia całego konta, jednak co w przypadku gdy chcemy usunąć tylko poszczególne wpisy? (więcej…)

Kontynuuj czytanie
Reklama

Popularne