knob

jQuery Knob, czyli w wolnym tłumaczeniu przełącznik jQuery, to dość wygodny w obsłudze i atrakcyjny w użytkowaniu skrypt, za sprawa którego możemy zaprezentować określoną wartość w postaci diagramu kołowego. Do tego, tak zaprezentowany przełącznik, może zostać wykorzystany do pobrania wartości od użytkownika, to za sprawą API i polecenia:data-readOnly=true/false. Prócz tego, do dyspozycji zostały oddane polecenia, za pomocą których można ustalić minimalną bądź też maksymalną dostępną wartość czy też można wpłynąć na sam wygląd diagramu.

Przekazywanie wartości odbywa się na zasadzie drag’n'drop. Gorąco polecam, gdyż skrypt można wykorzystać do wielu zadań, począwszy od prezentowania informacji w atrakcyjna dla oka sposób, kończąc na pobieraniu wartości od użytkownika w nietypowy, oklepany sposób.

Demo Pobierz



css

Nowa specyfikacja CSS, oznaczona numerem 3 ma naprawdę ogromne możliwość. Na dowód, wiele już skryptów prezentowałem na łamach bloga. Dziś kolejny, który wpisuje się do kanonu prezentującego niesamowite możliwości kaskadowych arkuszy styli.

Skrypt animuje tekst, na pięć różnych sposobów, gdzie do każdego z nich jest osobna demonstracja. Ostatni jest chyba najbardziej efektowny.

Niestety użytkownicy nielubianego Internet Explorera  efektu nie uraczą, jako że przeglądarka ta nie obsługuje animacji CSS, przynajmniej tak twierdzi autor.

Demo Pobierz



envision

Envision.js to dość atrakcyjna biblioteka, za pomocą której przygotujecie różnej maści wykresy na swoją stronę internetową. Do wyboru jest pięć różnych wizualizacji, zaczynając od wykresów – aktualizujących się bez konieczności przeładowania strony, kończąc na statycznych wykresach finansowych.

Każdy wykres posiada panel nawigacyjny z pomocą którego suwakami można wybrać zakres wyświetlanych informacji, a także oś czasu – za pomocą której można przeglądać przebieg krzywej na przestrzeni czasu. Skrypt korzysta z HTML5.

Demo Pobierz



rhinoslider

Skryptów do przewijania grafik, treści czy materiałów video prezentowałem już naprawdę sporo. Dziś kolejny, nieco inny niż konkurencja. Jego główną zaletą jest to, że użytkownik za pomocą wygodnego interfejsu jest sam w stanie ustawić sposób prezentowania materiałów czy też wybrać efekt przejścia pomiędzy nimi.

Spośród pięciu zakładek, użytkownik może wybrać rodzaj animacji spośród ogromnej listy, wybrać formę i rodzaj nawigacji pomiędzy kartami czy też dodać dodatkowe style.

Demo Pobierz



walkme

Przeglądając niektóre serwisy internetowe, odnoszę wrażenie – że przydałaby się osoba, która usiadła obok mnie i wytłumaczyła mi o co właściwie w danym serwisie internetowym chodzi. Oczywiście na myśli mam zarówno serwisy, których twórcy nie mają pojęcia o podstawowych zagadnieniach usability, ale także o serwisach w których jest zbyt dużo treści. Najgorzej jest jednak z bardziej złożonymi aplikacjami internetowymi, z których by korzystać  sprawnie – trzeba poświęcić im sporo czasu.

WalkMe, aplikacji w postaci internetowego przewodnika, szczególnie w tym ostatnim przypadku może być bardzo użyteczna. W jaki sposób działa? Otóż po jej implementacji, w prawym dolnym rogu serwisu internetowego pojawia się zakładka, w której użytkownik znajdzie spis treści do pomocy w serwisie.

…czytaj dalej



panojs

Publikowanie i zarządzanie zdjęciami o wysokiej rozdzielczości, na stronie internetowej od zawsze było wielkim problemem. Bo jak pogodzić ze sobą chęć udostępnienia takich zdjęć, z ograniczonymi możliwościami przeglądarek? Oczywiście standardowym rozwiązaniem jest publikowanie miniatur i odnoszenie do zdjęcia właściwego, nie jest to jednak rozwiązanie problemu, a tylko jego obejście.

PanoJS3 z pewnością pomoże rozwiązać ten problem. Otóż skrypt ten, pozwala na publikowanie wysokiej jakości jak zdjęć i umożliwia wygodne ich przeglądanie. Zdjęcia publikowane są w odpowiednim boksie, którego wielkość możemy sami regulować. Znajdują się w nim również przyciski nawigacji do powiększania czy też pomniejszania zdjęcia, a w bocznej części boksu – mamy miniaturkę zdjęcia informującą nas, który aktualnie element oglądamy.

…czytaj dalej



timeline

Okazuje się, że bardzo niechciana oś czasu, zamiast standardowego profilu na Facebooku przyjęła się, pomimo początkowych niechęci użytkowników. Jak każda nowość wymagała ona trochę czasu, przyzwyczajenia się użytkowników – by w pełni docenili jej zalety. Od niedawna, oś czasu dostępna jest także dla stron firmowych i z tego co obserwuje – bardzo chętnie one z niej korzystają, a  nawet uzupełniają ważne daty ze swojej działalności.

Jeśli podoba Wam się taki styl prezentowania informacji, to mam dla Was coś naprawdę ciekawego. Skrypt osi czasu, który zaraz będziecie mogli zobaczyć w bardzo podobny sposób potrafi prezentować wybrane dane.

…czytaj dalej



Form

Do przygotowania atrakcyjnego formularza logowania potrzeba przede wszystkim trochę wyobraźni i znajomości CSS, najlepiej w wersji 3. U mnie jakoś nigdy to nie chciało się ze sobą połączyć, ale na szczęście są serwisy, które potrafią skutecznie człowieka wyręczyć i to z jakim efektem. Serwis tympanus jest Wam bardzo dobrze znany, a za kolejną produkcje z pewnością polubicie go jeszcze bardziej. Tym razem świetnej jakości panel logowania, wystylizowany do granic możliwości, ale to nie wszystko. Dostępne są trzy rodzaje skryptu, co je od siebie różni? Kliknijcie w przycisk Join Us na każdej z prezentacji by się przekonać :-)

Demo Pobierz



jquerypath

Ciężko było nadać sensowną nazwę dla powyższego skryptu i nie do końca wiem czy to się udało. Do czego właściwie służy skrypt? Prezentuje on treści podczas przewijania strony w sposób niestandardowy. Co to znaczy? Otóż treści w miarę przewijania strony, pojawiają się według określonego, zróżnicowanego toru. Ta ścieżka, jest z góry ustalona i co ciekawe, będziecie mogli ją podejrzeć, ewentutalnie edytując kod – przygotować ją po swojemu. Efekt końcowy jest zachwycający.

Skrypt nada się z pewnością do stworzenia raczej prostych stron, o niewielkiej objętości. Doskonały sposób, by na jego podstawie zbudować np. portfolio. Dodam, że do nawigacji w skrypcie może posłużyć scroll w myszce, ale także klawiatura (spacja, strzałki). Robi wrażenie, prawda?

Demo Pobierz



jquery-plugin-example

Serwis Pinterest, wraz z uzyskaniem wielkiej popularności, zaczął stanowić pewien stylistyczny trend. Jak często teraz obserwuję, w sieci pojawia się co raz więcej serwisów internetowych, które prezentują swoje treści właśnie na styl Pinterest. O ile jest on dla mnie dość mało czytelny i przejrzysty, o tyle ja nic do gadania w kwestiach trendów nie mam, pozostaje się tylko i wyłącznie przystosować ;-)

Jeżeli taka stylistka Wam odpowiada i chcecie zaimplementować ją w swoim serwisie, wówczas z pewnością przyda się Wam narzędzie o nazwie The Wookmark jQuery Plugin, który automatycznie rozmieści wszelkie boksy w taki sposób, jaki widoczny jest to w serwisie Pinterest, czyli tak by jak najmniejsza ilość miejsca na stronie została pusta ( skrypt automatycznie wykrywa wielkość boksów a następnie umieszcza je w kolumnach).

…czytaj dalej