Modyfikacje #5 - magiczna kolumna

(c)Aveline Gross

Na moim blogu, pod jedną notką ktoś zabłagał o nauczenie go efektu pojawiających się widżetów. Tak więc oto tu jesteśmy i zaraz nauczymy się tej jakże prostej sztuczki, tyczy się ona kolumny, ale można to swobodnie przerzucać na inne elementy bloga. Nie obędzie się jednak bez mojego wprowadzającego monologu. Powiedzmy więc sobie szczerze, że minimalistyczne szablony są fajne, ładne i estetyczne. Nie trzeba się męczyć z dobieraniem kolorów tak, żeby pasowały do tych z nagłówka. Możemy dać mniej gadżetów, ale co jak chcemy coś ukryć i, żeby pojawiało się to dopiero po najechaniu na np. nagłówek? Otóż od tego jest ta instrukcja, aby wam pokazać całą magię.

Popatrzmy na przykład poniżej:
Jeśli najedziecie na nagłówek, pojawi wam się kolumna. Może się to wydawać czarną magią, ale słuchajcie to akurat jest bardzo proste. Zanim do tego przejdziemy, ustawmy sobie nagłówek, kolumnę i jej wygląd.
Przedstawiam wam użycie tego efektu do szablonu minimalistycznego, można tego używać w innych szablonach. Jednak w tych minimalistycznych jest to najczęściej używane. Polecam zapoznanie się z pozycją fixed.

.header {
  position: fixed;
  background: url(adres-nagłówka) !important;
  background-size: 300px !important;
  width: 300px;
  height: 100%;
  right: 20px;
  top: 0px;
  z-index: 0;
  border-left: 1px solid #4DB6AC;
  border-right: 1px solid #4DB6AC;
}

Zastosowaliśmy pozycję fixed, żeby nagłówek został nieruchomy. "height: 100%" automatycznie sprawi, że nie musimy dopasowywać wysokości nagłówka do strony - nagłówek będzie na całą wysokość strony. To jest głównie to co potrzebujemy wiedzieć. Top i right ustalamy pozycję nagłówka, width to jego szerokość. Dzięki z-index:0; nagłówek nie zasłoni nam kolumny, czyli będzie pod nią.

.column-right-inner {
  width: 240px;
  position: fixed;
  top: 50px;
  right: 50px;
  height: 420px;
  padding-top: 30px;
  opacity: 0;
  transition: all 1s;
  -o-transition: all 1s;
  -webkit-transition: all 1s;
}

Teraz zaczyna się przystosowywanie kolumny do szablonu. A więc omówmy sobie co mamy w kodzie.
width, height - szerokość i wysokość kolumny;
position - ustawiliśmy ją na fixed, czyli nagłówek staje się nieruchomy;
top, right - ustalamy pozycję nagłówka, ile pikseli ma być od prawej i od góry;

I teraz jest cała magia za znikaniem i pojawianiem się kolumny. Właściwość opacity określa przezroczystość elementu.
Tak więc jeśli ustawimy opacity: 0; w naszej kolumnie, "natychmiast" ona zniknie. Dodamy transition, żeby jej znikanie było płynne.

And now... ostatni krok naszej instrukcji.

.column-right-inner:hover {
  opacity: 1;
    transition: all .80s;
  -o-transition: all .80s;
  -webkit-transition: all .80s;
}

Dodając do elemntu .column-right-inner, :hover, sprawiamy, że możemy spokojnie napisć kod, który zmieni nam coś w kolumnie po najechaniu na nią.
Jeżeli napiszemy teraz w kodzie tylko opacity:1;, oznacza to, że kolumna pojawi się w 100% kryciu, czyli będzie nieprzezroczysta. Znowu dodajemy transition, co pozwoli na płynne pojawienie się kolumny.

W razie jakichkolwiek pytań piszcie w komentarzach lub w zakładce "Pytania". Do następnej instrukcji.