Archiwa kategorii: Kodowanie

Scrollorama – skrypt do tworzenia ciekawych stron internetowych

scrollorama

Możemy tworzyć naprawdę ciekawe i nowatorskie strony używając skryptu scrollorama. Budowa stron różni się znacząco od standardowego podejścia. Mianowicie tworzy się strony jedna pod drugą. Przełączanie między stronami realizowane jest nie przez linki, ale dzięki scrollowaniu strony. Dzięki temu mamy większe szanse, że osoba odwiedzająca stronę przejrzy ją w całości. Takie rozwiązanie idealnie nadaje się do prostych stron WWW, w których liczy się prosta informacja i bajer. Wspomniany bajer polega na tym że w trakcie srollowania przesuwane są różne elementy strony w różny sposób co daje naprawdę ciekawe efekty.

Framework: jQuery
Demo: http://johnpolacek.github.com/scrollorama/
Licencja: MIT, GPL

Textualizer – skrypt jquery dp prezentacji sloganów

textualizer

Textualizer to skrypt, który pozwala w efektowny sposób zaprezentować tekst. Animacja tekstu przypomina nieco zielone napisy z matrixa. Skrypt świetnie nadaje się do prezentacji sloganów reklamowych. Przy konfigurowaniu skryptu, napisy możemy podawać w formie tablicy, dodatkowo konfigurujemy czas wyświetlania napisu, prędkość w jakiej układa się on na stronie oraz wyśrodkowanie w pionie tekstu względem div-a. Skrypt działa na wszystkich przeglądarkach.

Framework: jQuery
Demo: http://kiro.me/textualizer/
Link: https://github.com/krisk/textualizer
Licencja: MIT, GPL

jQuery Transit – biblioteka jQuery to tworzenia przejść i przekształceń

jQuery transit

Biblioteka jQuery Transit oferuje szeroki zakres animacji elementów HTML. Można jej używać jako alternatywy dla .animate, ułatwieniem jest to że występuje podobna składnia. Biblioteka jQuery Transit wykorzystuje CSS3, dlatego nie jest kompatybilna ze starszymi przeglądarkami.

jQuery transit

 

Framework: jQuery
Demo: http://ricostacruz.com/jquery.transit/
Licencja: MIT

jRumble – wibrujące obiekty w jQuery

Prosty skrypt napisany na frameworku jQuery. Za jego pomocą można tworzyć wibrujące i kręcące się obiekty. Skrypt umożliwia nam skonfigurowanie wielu parametrów dotyczących ruchu. Obiekty mogą reagować również reagować na działania myszy (np. kliknięcie). Skrypt świetnie się nadaje, aby w ciekawy sposób zwrócić uwagę. O ile dobrze pamiętam Internet Explorer nadal ma problemy z obsługą niektórych efektów. Dotyczy to obracania obiektów.

jrumble jquery

Framework: jQuery
Demo: http://jackrugile.com/jrumble/
Licencja: MIT

Stylesheet switcher – skrypt jQuery do zmiany CSS

stylesheet switcher

Malutki i prosty skrypt, który pozwala za jednym kliknięciem zmienić plik arkusza stylów czyli atrybut href w znaczniku link. Dodatkowo style pozostają również po odświeżeniu, ponieważ informacja o aktualnym pliku zapisywana jest w ciasteczkach.

Framework: jQuery
Demo: http://www.kelvinluck.com/assets/jquery/styleswitch/index.html
Download: http://www.kelvinluck.com/assets/jquery/styleswitch/styleswitch.zip

KeyBoarder – skrypt do prezentacji przycisków klawiatury – CSS

KeyBoarder

Prosty skrypt za pomocą którego będziemy mogli prezentować klawisze klawiatury. Dokładnie mówiąc wystarczy użyć odpowiednich class, aby nasz znacznik przypominał przycisk klawiatury. Mamy do dyspozycji kilka stylów do wyboru. Dodatkowo możemy użyć „pusików” i w ten sposób prezentować skróty klawiszowe do jakiś programów. Paczka oprócz stylów zawiera skrypt JavaScript, dzięki któremu możemy sprawdzać kod danego przycisku.

Demo: http://metgate.org/KeyBoarder/
Github: https://github.com/lsauer/keyboarder
Licencja: MIT

1200 Grid System – szeroki framework CSS

1200GridSystem_thumb.jpg

1200GridSystem to framework CSS. Stanowi on ramę pod rozplanowanie układu strony WWW. Odpowiedni przydział class do znaczników HTML, pozwoli w szybki sposób stworzyć przejrzysty i prawidłowo wyświetlany układ strony. Szerokość jaka jest możliwa z tym frameworkiem to 1200 pikseli. Jest to jeden z z szerszych frameworków bowiem najbardziej popularne są 960 pikseli. Jednak myślę że to się będzie zmieniać, bowiem coraz więcej ludzi ma szersze monitory oraz urządzenia typu tablet. Tak więc szerokości stron prawdopodobnie będą oscylować między szerokimi optymalnymi dla monitorów a wąskimi dla urządzeń mobilnych. Polecam również artykuł o skrypcie Adapt.js , który zmienia pliki CSS w zależności od wielkości okna przeglądarki.

Link: http://sampsonresume.com/1200/
Download: http://sampsonresume.com/1200/1200GridSystem.zip