Opublikowano Dodaj komentarz

jQuery – Animowane menu podręczne

Bardzo popularnym rodzajem menu w aplikacjach mobilnych, jest animowane menu podręczne, które jest cały dostępne dla użytkownika. Jeśli w aplikacjach to się sprawdza, to dlaczego nie wykorzystać by tego w mobilnych wersjach naszych stron?

Przygotowanie plików

Aby nasze menu wyglądało dobrze, musimy mieć przygotowane bardzo dobre grafiki. Do naszego kursu proponuję wykorzystać te przygotowane przeze mnie.

 

Najlepiej będzie, jeśli ikony będą w tym samym kształcie (koło jest idealne), oraz posiadały wypełniony środek. Istnieje możliwość dodania wypełnienia przy pomocy css, natomiast nie jest on głównym przedmiotem zainteresowania w tym kursie.

HTML


<img class="ikonka opt1" src="img/opt1.png">
<img class="ikonka opt2" src="img/opt2.png">
<img class="ikonka opt3" src="img/opt3.png">
<img class="ikonka add" src="img/add.png">

CSS


.ikonka {
    width: 50px;
    height: 50px;
    position: fixed;
    bottom: 30px;
    left: 30px;
}

jQuery

Wreszcie przyszedł czas na część właściwą. Aby łatwiej zrozumieć zasadę działania skryptu, podzielmy go na kilka mniejszych kroczków. Pamiętaj o tym, by cały kod wpisać w <script></script> oraz w metodzie .ready()

Obracanie głównego przycisku

Po kliknięciu w przycisk „+” chciałbym, aby on obrócił się kilka razy i zatrzymał w pozycji wyświetlającej „x”. Aby to zrobić należy „oprogramować” ten przycisk w następujący sposób.


$(document).ready(function(){
    $('.add').click(function() {
        $(this).css({'transform': 'rotate(-405deg)', 'transition': 'transform 1s'});
    });
});

Po tym kroku, nasz przycisk powinien obrócić się o 405 stopni i zatrzymać w pozycji „x”

Wyskakujące przyciski

Gdy klikniemy w przycisk „+” powinny nam wyskoczyć 3 pozostałe przyciski. Każdy w innym kierunku.


$(document).ready(function(){
    $('.add').click(function() {
        $(this).css({'transform': 'rotate(-405deg)', 'transition': 'transform 1s'});
        $('.opt1').animate({'bottom': '+=70px'}, 500);
        $('.opt2').animate({'bottom': '+=50px', 'left': '+=50px'}, 500);
        $('.opt3').animate({'left': '+=70px'}, 500);

    });
});

Wszystkie przyciski pojawiają się w tym samym czasie, należy to delikatnie opóźnić. Wprowadźmy drobne poprawki do kodu.


$(document).ready(function(){
    $('.add').click(function() {
        $(this).css({'transform': 'rotate(-405deg)', 'transition': 'transform 1s'});
        $('.opt1').animate({'bottom': '+=70px'}, 500);
        $('.opt2').delay(200).animate({'bottom': '+=50px', 'left': '+=50px'}, 500);
        $('.opt3').delay(400)animate({'left': '+=70px'}, 500);

    });
});

Chowanie przycisków

To już ostatni element całej układanki. Menu należy ukryć po kliknięciu w przycisk, najlepiej w sposób odwrotny do pojawiania się


$(document).ready(function(){
    $('.add').click(function() {
        $(this).css({'transform': 'rotate(-405deg)', 'transition': 'transform 1s'});
        $('.opt1').animate({'left': '-=70px'}, 500);
        $('.opt2').delay(200).animate({'bottom': '-=50px', 'left': '-=50px'}, 500);
        $('.opt1').delay(400)animate({'bottom': '-=70px'}, 500);

    });
});

Aby całość była dopełniona, musimy dodać instrukcję warunkową, która będzie wykrywała jaki jest stan przycisków.

$(document).ready(function(){
    var show;
    $('.add').click(function() {
        if (show != true){
            show = true;
            $(this).css({'transform': 'rotate(-405deg)', 'transition': 'transform 1s'});
            $('.opt1').animate({'bottom': '+=70px'}, 500);
            $('.opt2').delay(200).animate({'bottom': '+=50px', 'left': '+=50px'}, 500);
            $('.opt3').delay(400).animate({'left': '+=70px'}, 500);
        }
        else {
            show = false;
            $(this).css({'transform': 'none', 'transition': 'transform 1s'});
            $('.opt3').animate({'left': '-=70px'}, 500);
            $('.opt2').delay(200).animate({'bottom': '-=50px', 'left': '-=50px'}, 500);
            $('.opt1').delay(400).animate({'bottom': '-=70px'}, 500);
        }
    });
});
Opublikowano Dodaj komentarz

Magic: The Gathering – Dla początkujących

Stało się, zacząłem grać w Magic: The Gathering. Miałem kiedyś z tym styczność, coś tam się grało, jednak nigdy to nie było nic na poważnie. Czy teraz będzie inaczej? Możliwe. Mam swoje pierwsze karty, mam już ułożone pierwsze decki i właśnie szykuję się do swojego pierwszego turnieju w standardzie Pauper, czyli mega budżetową wersję. Budżetową dlatego, że nie ma znaczenia ile pieniędzy władowałeś w karty, masz szansę wygrać. Liczy się wiedza, umiejętność budowania talii oraz doświadczenie. Tylko tyle, albo aż tyle.

Poradnik ten piszę dla wszystkich, którzy chcą rozpocząć swoją przygodę z MTG. Gdy zakupiłem pierwsze karty (900 kart za 30zł na allegro), okazało się, że pomimo znajomości języka angielskiego, nie wszystko jest dla mnie jasne. Musiałem poświecić trochę czasu na tłumaczenie i zrozumienie posiadanych kart. Teraz, gdy jestem trochę mądrzejszy, chcę ułatwić innym graczom wejście do świata Magic: The Gathering. Wpis będzie stopniowo uzupełniany, tak by stał się skarbnicą wiedzy MTG.

E

Enchant (zaczarowanie)

F

Flying (latanie)

L

Landfall (lądowanie)

Lifelink (więź życia)

Opublikowano Dodaj komentarz

JavaScript – Wprowadzenie

JavaScript to język programowania pozwalający między innymi na dodawania dynamicznych elementów na stronach internetowych i tym właśnie zastosowaniem będziemy się zajmowali w naszym kursie. Będziemy się uczuć tego języka od podstaw. Kurs jest zgodny z wymogami kwalifikacji E.14. Jeśli jesteś początkującym programistą, to ten kurs jest dla Ciebie. Staraj się go przerabiać po kolei. Jeśli już kiedyś programowałeś w innych językach i doskonale wiesz co to instrukcja warunkowa, pętla czy funkcja, masz łatwiej. Nie musisz się tego uczyć na nowo, jednak zwróć uwagę na różnice w składni danych poleceń.

Czym jest skrypt?

Zanim zaczniesz tworzyć swój pierwszy skrypt, musisz się najpierw dowiedzieć co to jest. Jest to lista poleceń wydawanych komputerowi, aby wykonać pewne zadanie. Działanie skryptu często porównuje się do przepisu kulinarnego. Dlaczego? Podobnie jak w książce kucharskiej, polecenia wykonuje się w danej kolejności. Przepisy, tak jak programy, mogą być łatwe, czyli posiadać jeden wątek wykonywany w danym czasie, oraz bardziej skomplikowane (wielowątkowe), które wykonują się równocześnie, wynikiem czego może być dwudaniowy obiad z deserem.

Tworzenie skryptu

Aby stworzyć skrypt, najważniejsze jest zdefiniowanie celu. Potem rozbijamy go na mniejsze zadania.

  • wyznacz cel – jest to bardzo ważna część projektowania aplikacji. Musimy sobie jasno wyznaczyć zadania, które musimy osiągnąć. Możemy posprzątać pokój.
  • opracowanie schematu zadań – w tej części musimy rozbić cel na mniejsze, bardziej szczegółowe zadania. Możemy np. pozbierać wszystkie śmieci / wytrzeć z kurzu wszystkie stoły, półki, regały / odłożyć książki na swoje miejsce / odkurzyć podłogę
  • utworzenie kodu – każde zadanie należy teraz zapisać w języku programowania.

 

W tym kursie skoncentrujemy się na przeglądarkowym wykorzystaniu języka JavaScript. Przy jego nauce, podobnie jak przy nauce dowolnego języka obcego, musimy się skupić na poznaniu:

  • słownictwa – czyli poleceń (nazw funkcji), które będziemy wykorzystywać podczas pisania skryptów.
  • składni – czyli gramatyki, dzięki której na skrypt będzie zrozumiały dla komputera

Myślę, że tyle na początek wystarczy. Możesz przejść do kolejnej lekcji.