3w-media.pl Profesjonalne Kreacje Internetowe

 

Podejrzałem to rozwiązanie na jakiejś stronie www. Tylko tam było we flashu. A ja stwierdziłem że większość trików flashowych da się zrobić za pomocą paru linijek javascriptu i biblioteki jQuery. I w tej serii właśnie zamierzam to udowadniać.

DEMO
DOWNLOAD

Możemy napis przewijający się w tle użyć np. do opisania linku

Musimy mieć biblbiotekę jQuery, do ściągnięcia: http://docs.jquery.com/Downloading_jQuery.

HTML

1:<ul id="fancyMeni">
2:  <li><a href="" title="O firmie">O firmie</a></li>
3:  <li><a href="" title="Oferta">Oferta</a></li>
4:  <li><a href="" title="Kontakt">Kontakt</a></li>
5:</ul>

Tworzymy normalną listę z linkami, zastrzeżenie jest takie że linki muszą mieć ustawiony atrybut title, ponieważ to co jest w nim przewija się w tle

CSS

   1:#fancyMeni{
   2:  width:200px;
   3:  text-align:left;
   4:}
   5:#fancyMeni li,
   6:#fancyMeni a{
   7:  width:200px;
   8:  height:30px;
   9:  line-height: 30px;
  10:  overflow: hidden;
  11:  display:block;
  12:}
  13:#fancyMeni li{
  14:  margin:5px 0;
  15:  border: 1px solid #aaa;

Pierwsze 15 linii to ustawianie szerokości meni i wysokości elementu meni.

  16:  position: relative;

Tutaj ustawiamy właściwość position każdego elementu li na relative dlatego że cała zawartość li jest pozycjonowana absolutnie

Przez javascript dodajemy zawartość atrybutu title opakowaną w tagi span i b przed każdy link czyli z:

<a href="" title="O firmie">O firmie</a>

otrzymamy

<a href="" title=" "><span><b>O firmie</b></span>O firmie</a>

Wszystkim elementom a, span i b nadajemy pozycjonowanie absolutne, czyli wszstkie te elementy będą zaczynały się w górnym lewym rogu tagu li (szara ramka), i zakazujemy zawijania wierszy jeśli jest spacja (no-warp)

Dodajemy tagi span i b PRZED tagiem a po to żeby były pod linkiem jak się rozwiną. Można by to ustalić za pomocą z-index, ale InternetEplorer (jak zwykle) kiepsko sobie z tym radzi. A tak mamy zachowaną kolejność taką jak chcemy.

Jest pewien haczyk, jeśli skopiujemy tylko zawartość atrybutu title, to napis w tle czybciutko nam się przewinie i będzie po zabawie. Dlatego przez javascript powielamy title 20 razy (zakładamy że przeciętny użytkownik ne będzie czekał na przewinięcie się wszystkich 20 powtórzeń.). Jest to szybsze niż pisanie przewijania jednego napisu.

Później jest już z górki. Ustawiamy jak ma wyglądać link aktywujący animację.

  26:#fancyMeni a{
  27:  color:#000;
  28:  text-decoration: none;
  29:  font-size:14px;
  30:  padding-left: 5px;
  31:}

Ustalamy że początkowo nasza animacja w tle ma mieć szerokość 20px i wysokość 3px, daje to nam czarny pasek w górnym lewym roku każdego elementu li. Możemy nadać mu dowolne rozmiary. Cała nasza animacja jest w tagu span. To ten tag rozwija się na całą szerkość i wysokość elementu li.

  32:#fancyMeni span{
  33:  width:20px;
  34:  height:3px;
  35:  background-color:#333;
  36:  overflow: hidden;
  37:  display:block;
  38:}

Przesuwający się napis jest wpisany w tag b. Jest on bardzo długi i wychodzi poza tag span dlatego tag span musi mieć ustawione overflow na hidden. Tutaj ustawiamy wygląd napisu w tle.

  39:#fancyMeni span b{
  40:  color:#555;
  41:  font-size:44px;
  42:  display:block;
  43:  line-height:auto;
  44:  letter-spacing: 5px;
  45:  font-weight: bold;
  46:}

Poniżej pełny kod CSS

   1:#fancyMeni{
   2:  width:200px;
   3:  text-align:left;
   4:}
   5:#fancyMeni li,
   6:#fancyMeni a{
   7:  width:200px;
   8:  height:30px;
   9:  line-height: 30px;
  10:  overflow: hidden;
  11:  display:block;
  12:}
  13:#fancyMeni li{
  14:  margin:5px 0;
  15:  border: 1px solid #aaa;
  16:  position: relative;
  17:}
  18:#fancyMeni a,
  19:#fancyMeni span,
  20:#fancyMeni span b{
  21:  position:absolute;
  22:  top:0;
  23:  left:0;
  24:  white-space: nowrap;
  25:}
  26:#fancyMeni a{
  27:  color:#000;
  28:  text-decoration: none;
  29:  font-size:14px;
  30:  padding-left: 5px;
  31:}
  32:#fancyMeni span{
  33:  width:20px;
  34:  height:3px;
  35:  background-color:#333;
  36:  overflow: hidden;
  37:  display:block;
  38:}
  39:#fancyMeni span b{
  40:  color:#555;
  41:  font-size:44px;
  42:  display:block;
  43:  line-height:auto;
  44:  letter-spacing: 5px;
  45:  font-weight: bold;
  46:}

JavaScript

   1:var $j = jQuery.noConflict();

Pierwsza linia ustawia specyficzną zmienną dla jQuery żeby można było kozysać z niej i z innych bibliotek typu MooTools, Prototype itp

Dalej standardowo uruchamiamy funkcje dopiero po załadowaniu się całego dokumentu.

   2:$j(document).ready(
   3:    function(){

Następnie dla każdego linka w liscie o id fancyMeni pobieramy zawartość atrybutu title i jego wartość wstawiamy do zmiennej opis.

   4:      $j("#fancyMeni a").each(
   5:        function(){
   6:          opis=$j(this).attr("title");

Następnie usuwam wartość tagu title żeby nie pokazywał się tooltip dodawany przez przeglądakę.

   7:          $j(this).attr("title"," ");

I do każdego linku dodajemy funkcję odpowiednio dla zdarzenia wejścia wskaźnika myszki na link oraz drugą po opuszczeniu linku. W funkcji pierwszej na początku zmieniamy w linku padding-left na 20, czyli przesuway w prawo o 15 pikseli oraz zmeiniamy kolor na biały.

  11:      $j("#fancyMeni a").hover(
  12:        function(){
  13:          $j(this).css({"color":"#fff","padding-left":"20px"});

W następnej linii animujemy powiększenie się tagu span do szerokości i wysokości elementu li.

  14:          $j(this).prev("span").animate({width:"200px",height:"30px"},1000);

Teraz do zmiennej szer zapisujemy szerokość elementu b (czyli naszego przemykającego napisu)

  15:          szer=$j(this).prev("span").children("b").width();

No i wreszcie animujemy sam napis. Powyższa pobrana szerokość potrzebna jest nam do określenia na jaką odległość ma się przesunąć nasz napis.

  16:          $j(this).prev("span").children("b").animate({left:"-"+szer+"px"},15000);

Funkcja wywoływana po usunięciu wskaźnika myszki z linku po prostu przywraca wartości z początkowe

  18:        function(){
  19:          $j(this).css({"color":"#000","padding-left":"5px"});
  20:          $j(this).prev("span").animate({width:"20px",height:"3px"},5);
  21:          $j(this).prev("span").children("b").stop().animate({left:"0px"},5);
  22:        }

Poniżej pełen kod JavaScript

   1:var $j = jQuery.noConflict();
   2:$j(document).ready(
   3:    function(){
   4:      $j("#fancyMeni a").each(
   5:        function(){
   6:          opis=$j(this).attr("title");
   7:          $j(this).attr("title"," ");
   8:          $j(this).before("<span><b>"+str_repeat(opis+"&nbsp;",20)+"</b></span>");
   9:        }
  10:      );
  11:      $j("#fancyMeni a").hover(
  12:        function(){
  13:          $j(this).css({"color":"#fff","padding-left":"20px"});
  14:          $j(this).prev("span").animate({width:"200px",height:"30px"},1000);
  15:          szer=$j(this).prev("span").children("b").width();
  16:          $j(this).prev("span").children("b").animate({left:"-"+szer+"px"},15000);
  17:        },
  18:        function(){
  19:          $j(this).css({"color":"#000","padding-left":"5px"});
  20:          $j(this).prev("span").animate({width:"20px",height:"3px"},5);
  21:          $j(this).prev("span").children("b").stop().animate({left:"0px"},5);
  22:        }
  23:      );
  24:    }
  25:);
  26:function str_repeat ( input, multiplier ) {
  27:  return new Array(multiplier+1).join(input);
  28:}

Podobał Ci się artykuł:

Podobne wpisy

• 7 zasad tworzenia strony www Czyli o czym pamiętać przy tworzeniu serwisu internetowego
• Related post – wordpress plugin Dlaczego nie znajduje połączeń dla krótkich słów kluczowych
• Co to jest statyczna strona internetowa
• 9 sposobów na zwiększenie SEO w każdej stronie www którą tworzysz
• Prosta strona internetowa jak wyjść poza ramy trójcy O nas, Oferta, Kontakt