czwartek, 11 kwietnia 2013

Jak "zakręcić" stronami cz. 2

Element: Strony/linki (PageList/HTML/JS)
Stopień trudności: xxxx
Czas wykonywania: 20-35 minut
Dzisiaj zakręcania stron ciąg dalszy, ale będziemy tym razem kręcić w górę, na boki i...do środka. Oczywiście nie są to jedyne opcje "zakręcania"( czy może raczej ciekawych modyfikacji naszych linków). Jednak te uznałam za najbardziej interesujące i to właśnie je zamierzam dzisiaj przedstawić.

Zaczynamy tak jak poprzednio. Tworzymy gadżet Stron ( PageList ) lub zwykły HTML/JavaScript i umieszczamy w nim parę linków. Ja posłużyłam się tą drugą opcją ( tak samo jak w przypadku pierwszej instrukcji o zakręcaniu - więcej tutaj ). Głównie dlatego, że przy PageList1 konieczne są dodatkowe kody, które pomogą nam w usunięciu wyliczenia itp. Przyznaje nie chciało mi się z tym bawić. W każdym razie chodzi o to, aby wiedzieć na jakich selektorach działamy i dla których następnie będziemy pisać kody. 
Klasy linków, których użyłam:
  • jak1 - dla obrotu w pionie;
  • jak2 - dla obrotu w poziomie;
  • jak3 - dla obrotu do środka.
Mając już gadżet przechodzę do projektanta:
klikamy szablon > dostosuj > zaawansowane > dodaj arkusz css

Zaczęłam od dostosowania klas dla linków ( Jeśli dostosowujecie linki w Stronach również zwyczajnie dodajcie dla nich kod - linki to linki, niezależnie od tego jakie one są i gdzie) U mnie wszystkie trzy wyglądają tak:
a.jak1:link, a.jak1:visited, a.jak1:active, a.jak2:link, a.jak2:visited, a.jak2:active, a.jak3:link, a.jak3:visited, a.jak13:active{text-align:center;padding:1px;font: normal 10px calibri;; color: #4b8072;  text-transform:uppercase; background:#fbfbfb;width:61px; height:35px;padding-top:25px;border-radius:50%; margin-bottom: 2px; display:inline-block; border:1px solid #87c7ae;}
Głównie tutaj ustalamy po prostu jak ma link wyglądać. Do zakręcania najbardziej pasują kółka, więc oto i mamy kółka. Jest także kolor czcionki, tla czy obramowania. Jednak wszystko to jest opcjonalne. Tutaj wszystko zależy od Was. 

Obrót w pionie // Teraz będziemy kręcić w poziomie! Pamiętacie poprzedni post. Używaliśmy samego rotate. Tutaj zamienimy go na rotateY.
Jako, że klasa, która u mnie odpowiada za tą transformacje to jak1, dlatego kod dla hover, będzie wyglądać tak:
a.jak1:hover {transform:rotateY(360deg);-webkit-transform: rotateY(360deg);-moz-transform: rotateY(360deg);-o-transform: rotateY(360deg);-ms-transform: rotateY(360deg);background:#eee;rotateY(360deg);}
Obrót w poziomie // Teraz przekształcenie w pionie. Tutaj również mało zmian, zamiast Y będzie po prostu X.
a.jak2:hover {transform:rotateX(360deg);-webkit-transform: rotateX(360deg);-moz-transform: rotateX(360deg);-o-transform: rotateX(360deg);-ms-transform: rotateX(360deg);background:#eee;rotateX(360deg);background:#eee;} 
Obrót do środka // Dobra, teraz dopiero zacznie robić się zabawnie. Aby "zakręcić link do środka" połączymy dwie transformacje:
Kod będzie wyglądać tak:

a.jak3:hover{transform:rotate(360deg) scale(0);
-webkit-transform: rotate(360deg) scale(0);-moz-transform: rotate(360deg) scale(0);
-o-transform: rotate(360deg) scale(0);
-ms-transform: rotate(360deg) scale(0);background:#eee;}
Zauważcie, że chcąc połączyć dwie transformacje nie używamy żadnych znaków pomiędzy nimi ( tak dzieje się np. gdy używamy box-shadow ).
Scale(0) sprawia, że link "zanika", a rotate warunkuje obrót.
Poniżej zobaczcie jak prezentują się powyższe transformacje. Po kolei obrót: w pionie, w poziomie, do środka:
Tutoriale Szablony Zamówienia
Ach, o tych transformacjach człowiek mógłby pisać i pisać, a tematów na notki byłoby co niemiara, jednak zapewne i mnie, i Was by to w końcu znudziło dlatego odsyłam Was do:
Animatable
39 różnych i różniejszy transformacji. Jestem pewna, że wybierzecie coś dla siebie. 

9 komentarzy:

  1. Co do tego zakręcenia, to jak na razie jeszcze nie próbowałam tego wkleić na bloga, ale potem to zrobię :)
    Okay, podaj email, a ja Ci wyślę zaproszenie :) Sorry, że tak skrótowo, ale czasu nie mam ;p
    Pozdrawiam ;**

    OdpowiedzUsuń
  2. W kooońcu osiągnęłam sukces i nowy post już jest. :)

    OdpowiedzUsuń
  3. Kurczę, próbowałam kręcić stronami i zupełnie mi nie wychodziło :D Czarna magia, tyle Ci powiem ; )

    PS Współpraca przyjęta

    [Zaczarowane-Szablony]

    OdpowiedzUsuń
  4. Ojć, nie wiem kompletnie czemu. Także wnioskuję, że problem leży po mojej stronie i w moich umiejętnościach tłumaczenia tej "czarnej magii" ;P
    Jak coś to służę pomocą, chodź uważam iż to ja powinnam uczyć się od Ciebie/Was :)

    OdpowiedzUsuń
  5. Ależ tu miło, sympatycznie, i pożytecznie, bardzo mi się podoba również przyjazny dla oka szablon, chyba zostanę stałym gościem ;)

    OdpowiedzUsuń
  6. Ale jak skorzystać z tego http://leaverou.github.io/animatable/#border-radius? :c

    OdpowiedzUsuń
  7. Już mówię :) Wiem, że raczej powinnam dać tą przysłowiową "wędkę", ale niech tam będzie. W hoverze danego linku powinnaś dodać właściwość border-radius z wartością 50%, w przypadku linku aktywnego czy odwiedzonego nie jest to konieczne. Używając tego np. do linków będzie wyglądać to tak:
    #PageList1 {
    border-radius:0%; }
    #PageList1:hover { border-radius:50%;}
    Możesz dodawać jeszcze width i height, czyli ustawić wielkość danego kwadracika :) Ja sobie wpisałam przed chwilką tak: ( w całości)
    #Pagelist1 {
    width:50px;
    padding:4px;
    margin:2px;
    background:#e4d4d9;
    font:10px arial;
    text-align:center;
    color:#6f6075;
    text-transform:uppercase;
    display:inline-block;
    height:28px;
    padding-top:25px;
    -webkit-transition:All 0.5s ease;
    -moz-transition:All 0.5s ease;
    -o-transition:All 0.5s ease;
    }
    #PageList1:hover { border-radius:50%;}

    Dobra może ciut za dużo tego jak na pierwszy raz :) Jednak jak czegoś nie wiesz to napisz, kwestia tego żeby poznać selektor, czyli to gdzie mamy dać efekt. W moim przypadku były to karty z linkami. :> Jak coś jestem tu i pytaj jak tylko będziesz mieć problem, bo ja tłumaczyć tak dobrze nie umiem. ;3

    OdpowiedzUsuń
  8. Wydaje mi się, że wpisuję wszystko jak trzeba, a strony nie kręcą mi się... Mam kółeczka, zmieniają mi się na inny kolor etc., ale nie chcą się kręcić na bok... Masz pomysł, co mogę mieć źle?

    OdpowiedzUsuń
  9. Żaden twój tutorial mi nie działał, nie wiem co źle robię...

    OdpowiedzUsuń

- +
Szablon wykonany przez Tyler