Nowa wersja strony!

Wreszcie znalazłem czas i przebudowałem własną stronę.

A więc po kolei.

Na samym początku zaznaczę tylko, że na stronie ciągle mogą się zmieniać jakieś detale. wersje kolorystyczne itp.

 

1. Przebudowałem menu, przepisując na nowo jego kod CSS. Dodałem subtelne animacje po najechaniu myszką oparte na zmianie obramowań.
2. Portfolio-slider (Camera slider) zyskał nowa oprawę wizualną pomieszczenia pokazowego w galerii. Dodatkowo stworzyłem efekt włączenia podświetleń po najechaniu na niego. Dodatkowo ostylowałem boxy z opisami projektów, które pojawiają się w modalu po kliknięciu tytułu projektu na sliderze.
3. Struktura treści głównej pod sliderem została oparta na tzw. tabach obsługiwanych przez jQuery (Easy-Responsive-Tabs-to-Accordion). Tutaj było najwięcej pracy przy stylowaniu. Napisałem też dwa autorskie kody na efekt zanikania (fade) aby po kliknięciu na odnośnik w nawigacji pojawiająca się treść delikatnie wypłynęła z nicości. Pierwszy kod oparłem na jQuery i CSS, drugi tylko na jQuery. Na samym dole zamieszczam oba kody.
4. Dodałem do strony funkcję ładowania wpisów prosto z bloga opartego na CMS WordPress do kontenera Aktualności.

Strona główna niedługo też będzie przechodzić mały lifting, jednak na razie nic nie mówię, ponieważ czeka mnie jeszcze kilka etapów projektowania, następnie dobór materiałów, później dopiero kodowanie końcowe i testowanie – zdradzę jedynie, że pojawi się tam docelowo prezentacja oparta na efekcie parallaxu.

Oczywiście strona jest responsywna.

Testowana na najpopularniejszym w Polsce i w większości świata, mobilnym systemie Android 😉

 

Poniżej zamieszczam obie autorskie metody na efekt fade wspomniany w tekście wyżej:

METODA 1 to jQery + CSS (KROK PO KROKU):

//DODAJ UNIKATOWE ID DO ELEMENTÓW LI.
 <div id="demoTab">

<ul class="resp-tabs-list">
 <li id="clicktofadeA"> .... </li>
 <li id="clicktofadeB"> .... </li>
 <li id="clicktofadeC"> .... </li>
 </ul>

//DODAJ UNIKATOWE ID I JEDNĄ WSPÓLNĄ KLASĘ DO GŁÓWNYCH SEKCJI WEWNĄTRZ
NADRZĘDNEGO KONTENERA  .resp-tabs-container
 <div class="resp-tabs-container">

<div id="first" class="tabs_div"> ....... </div>
 <div id="second" class="tabs_div"> ....... </div>
 <div id="third" class="tabs_div"> ....... </div>
 </div>
 </div>
 CSS:
 //KLASA WIDOCZNOŚCI
 .tabs_div_visible { animation: opacity 2s forwards; -moz-animation: opacity 2s forwards;
 -webkit-animation: opacity 2s forwards;}
 //ID'S WITH OPACITY
 #first {opacity: 0;}
 #second {opacity: 0;}
 #third {opacity: 0;}
 //ANIMACJA POJAWIANIA SIĘ
 @-webkit-keyframes 'opacity' { to {opacity: 1; }}
 @-moz-keyframes 'opacity' {to {opacity: 1; }}
 @keyframes opacity { to {opacity: 1; }}
 //SKRYPT:
 //POZYCJE LI POŁĄCZONE Z KONTENERAMI O KLASIE class "tabs_div" i ID "first second third"
 //KLIK NA PIERWSZY ELEMENCIE
 $( "#clicktofadeA").click(function() {
 $( "#first" ).addClass("tabs_div_visible"),
 $( "#second" ).removeClass("tabs_div_visible"),
 $( "#third" ).removeClass("tabs_div_visible");
 });
 //KLIK NA DRUGIM ELEMENCIE
 $( "#clicktofadeB" ).click(function() {
 $( "#second" ).addClass("tabs_div_visible"),
 $( "#first" ).removeClass("tabs_div_visible"),
 $( "#third" ).removeClass("tabs_div_visible");
 });
 //KLIK NA TRZECIM ELEMENCIE
 $( "#clicktofadeC" ).click(function() {
 $( "#third" ).addClass("tabs_div_visible"),
 $( "#second" ).removeClass("tabs_div_visible"),
 $( "#first" ).removeClass("tabs_div_visible");
 });
 //TERAZ NIE CHCEMY ABY TREŚĆ W KONTENERACH CHOWAŁA SIĘ PO ODŚWIEŻENIU WIĘC DODAJEMY
 $( window ).load(function() {
 $( ".tabs_div" ).toggleClass("tabs_div_visible");
 });

 
 METODA 2 TO TYLKO jQuery. BEZ CSS:
 //DODAJ UNIKATOWE ID DO ELEMENTÓW LI JAK W METODZIE 1 POWYŻEJ
 ////DODAJ UNIKATOWE ID I JEDNĄ WSPÓLNĄ KLASĘ DO GŁÓWNYCH SEKCJI WEWNĄTRZ
NADRZĘDNEGO KONTENERA  .resp-tabs-container JAK W METODZIE 1 POWYŻEJ
 //SCRIPT:
 //KLIK NA PIERWSZY ELEMENCIE
 $( "#clicktofadeA" ).click(function() {
 $( "#second, #third" ).fadeOut();
 $( "#first" ).fadeIn( 1000);
 });
 //KLIK NA DRUGIM ELEMENCIE
 $( "#clicktofadeB" ).click(function() {
 $( "#first, #third" ).fadeOut();
 $( "#second" ).fadeIn( 1000);
 });
 //KLIK NA TRZECIM ELEMENCIE
 $( "#clicktofadeC" ).click(function() {
 $( "#second, #first" ).fadeOut();
 $( "#third" ).fadeIn( 1000 );
 });

Działa, ale nie daję na to żadnych gwarancji ;)