Fancy Login

Dość popularny stał się ostatnio w Internecie Fancy Glowing Login Box oraz jego pierwowzór czyli DragonFish. Oba designy wnoszą bardzo ciekawie wyglądający ekran logowania, którymi zdecydowanie warto się zainteresować oraz pobawić. Oba jednak mają też swoje wady.

DragonFish jest dynamicznie generowany przez JavaScript bez użycia żadnych obrazków, co na słabszych komputerach może być cokolwiek problematyczne i np. wysypywać przeglądarkę (przynajmniej u mnie jak się Firefox zaczął włączać i jedną z otwartych zakładek było właśnie demko tego logowania to niestety program nie wytrzymał tego i się potulnie zawiesił).

Odpowiedzią na ten problem było właśnie Fancy Login, w którym nie ma w ogóle JavaScriptu – zamiast niego jest animowany gif w tle (swoją drogą jest tam bardzo dobry tutorial do Photoshopa). To też jest problematyczne, bo gif ten waży na ogół więcej niż 300KB, co jest jak dla mnie niedopuszczalne.

Można ten problem rozwiązać jednak przez zmianę podejścia i wykorzystanie tricku, albo dwóch. Przepis poniżej:

W Photoshopie wykonujemy pasek o dość dużej szerokości (min. 1000px) i wybranej przez nas szerokości. Generalnie można wykonać go według wskazówek z filmiku ze strony Fancy Login Boxa. Powinniśmy w ten sposób otrzymać coś takiego:

pasek1

Do tego jeszcze przydałoby się zrobić overlaya, który będzie zacieniał kanty przewijanego pod spodem obrazka. Overlay ten musi mieć wysokość i szerokość jak docelowy panel logowania. Wstępnie może to być pusty, przezroczysty obrazek z cieniem dookoła.

W pliku z naszym CSS-em dodajemy 2 linijki i odpowiadający temu kod w html:

#loginWrapper { 
    width:500px; 
    height:266px; 
    margin: 0px auto; 
    background: #111 url(pasek.png) repeat-x scroll left top;
} 

#loginWrapper div { 
    width:500px; 
    height:266px; 
    margin: 0px auto; 
    background: transparent url(overlay.png) no-repeat scroll left top; 
}
<div id="loginWrapper">  
    <div> (a tu twój kod ekranu logowania) </div> 
</div>  

Do szczęścia brakuje nam tylko kodu JavaScript, który będzie przewijał ten długi obrazek przez ciągła zmianę background-position (kod wymaga jQuery):

var scrollSpeed = 70; // Prędkość w milisekundach  
var current = 0; // Obecne położenie (X) 

function scrollBg() { //Przemieszczanie się w lewo o 5 pikseli  
    current -= 5; 
    $('#loginWrapper').css("background-position",current+"px 0"); } 
var init = setInterval("scrollBg()", scrollSpeed);  

Jak widać – kod jest bardzo prosty i zrozumiały – a otrzymany efekt jest całkiem porządny.

fancyLogin

W czym lepsze jest moje rozwiązanie? Po pierwsze – rozmiar (obrazki stworzone w podany sposób są niewielkie i ważą około 12KB mimo sporych wymiarów). Po drugie – prosty i generalnie kompatybilny kod JS, który przy okazji nie obciąża zbytnio procesora.

Oczywiście można sobie pomysł rozwinąć wedle uznania tworząc coś co jest bardziej podobne do poprzednich dwóch rozwiązań przez zrobienie pełnego paska oraz zakrywającego overlaya z dodatkowymi efektami po bokach; jednak trzeba się wtedy przygotować na znaczący wzrost objętości przewijanego obrazka (coś za coś, tak? :))

Referencje:

Animated background header in jQuery

DragonFish

Fancy Glowing Login Box