GoldenLine
Zaloguj się
Mateusz Ch

Mateusz Ch Felietonista
motoryzacyjny

Temat: Przycinający się przewijany pasek "Partnerzy"

Witam,

Chciałbym sobie wstawić na stronę taki (albo podobny) gadżet "Partnerzy" jak jest tu: http://tptd.pl/ (na dole strony) tyle tylko, że jest jeden mankament; otóż irytuje mnie to, że ten pasek się przycina - wpada w takie - nazwijmy to - drgania.

Czy macie może na oku podobny (identyczny) gadżet do tego z TPTD.pl, ale taki nieprzycinający się, ewentualnie taki, który swymi "przycinkami" nie wytrąca człowieka z równowagi? :) Może wiecie i doradzicie mi, pod jakimi hasłami mam takiego gadżetu szukać?

Z góry dziękuję za pomoc.

Pozdrawiam
Link do wypowiedziLink
Krzysztof Kurzawa

Krzysztof Kurzawa Web / Mobile
Developer

Temat: Przycinający się przewijany pasek "Partnerzy"

Nic nie mogę wyguglać a dwie strony które znałem i mają takie coś mają autorskie skrypty.

W jQuery jest dosyć prosto to napisać i mozliwe że do tak zaawansowanych rzeczy nie ma pluginów:-)
Link do wypowiedziLink

konto usunięte

Temat: Przycinający się przewijany pasek "Partnerzy"

Bo może zamiast kopiować nieudolne rozwiązania zrobić to poprawnie (czyli bez animacji)?
Link do wypowiedziLink
Mateusz Ch

Mateusz Ch Felietonista
motoryzacyjny

Temat: Przycinający się przewijany pasek "Partnerzy"

Piotr L.:
Bo może zamiast kopiować nieudolne rozwiązania zrobić to poprawnie (czyli bez animacji)?

Gdybym wiedział, jak zrobić to bez animacji, to nie zakładałbym tutaj tematu. Zarówno w jQuery, jak i w JS jestem amatorem.
Link do wypowiedziLink
Piotr Potera

Piotr Potera Frontend Developer,
UI/UX designer

Temat: Przycinający się przewijany pasek "Partnerzy"

Przesuwanie po jednym pikselu w relatywnie długich jednostkach czasu, szczególnie ruchem jednostajnym zawsze daje kijowe efekty no ale kiedyś nie było mocy na nic innego. Skrypt na tej stronie pamięta mój drugi komputer w życiu, kupiony gdzieś w 1998 ;-)

Użyj jQuery.animate() lub pluginu jquery.tools.js. Jeśli chcesz super płynie - CSS3 transformations.
Link do wypowiedziLink
Krzysztof Kurzawa

Krzysztof Kurzawa Web / Mobile
Developer

Temat: Przycinający się przewijany pasek "Partnerzy"

Piotr P.:
Użyj jQuery.animate() lub pluginu jquery.tools.js. Jeśli chcesz super płynie - CSS3 transformations.
No ale do transformacji też trzeba by użyć JavaScript (chyba że się mylę?).

Jeśli miałoby to być bez JavaScript to CSS3 animations ale to będzie sżło do lewej i później do prawej wracać (box z partnerami).
Link do wypowiedziLink
Adam Pawliczek

Adam Pawliczek Usability expert, UX
designer,
Interaction
specialist

Temat: Przycinający się przewijany pasek "Partnerzy"

Ja bym zmienił mechanikę: niech animacja przesuwa się szybko i o "jedno logo" i się następnie zatrzymuje na kilka sekund, po czym przesuwa o kolejne jedno logo. To naprawdę jest bez znaczenia, efekt będzie ten sam, logosy będą czytelne a animacja nie będzie się "zacinać".

Przy okazji: jeżeli logosy miałyby być klikalne to tym bardziej łatwiej userowi kliknąć w nie-poruszający się link.
Link do wypowiedziLink
Piotr Potera

Piotr Potera Frontend Developer,
UI/UX designer

Temat: Przycinający się przewijany pasek "Partnerzy"

Jeśli miałoby to być bez JavaScript to CSS3 animations ale to będzie sżło do lewej i później do prawej wracać (box z partnerami).

Przykład na szybko, bez Javascript. Oglądać na Chrome/Safari, bo pisałem pod webkitem ;-)Ten post został edytowany przez Autora dnia 02.08.13 o godzinie 14:52
Link do wypowiedziLink
Mateusz Ch

Mateusz Ch Felietonista
motoryzacyjny

Temat: Przycinający się przewijany pasek "Partnerzy"

Adam P.:
Ja bym zmienił mechanikę: niech animacja przesuwa się szybko i o "jedno logo" i się następnie zatrzymuje na kilka sekund, po czym przesuwa o kolejne jedno logo. To naprawdę jest bez znaczenia, efekt będzie ten sam, logosy będą czytelne a animacja nie będzie się "zacinać".

Przy okazji: jeżeli logosy miałyby być klikalne to tym bardziej łatwiej userowi kliknąć w nie-poruszający się link.
Zacznę od końca. Po najechaniu kursorem, w tym gadżecie, animacja się zatrzymuje.

Teraz początek. Wiem, co masz na myśli. Wypatrzyłem coś takiego na jednej ze stron http://grupadesantowa.pl/ , ale nie wiem, jak ten slider "wyłowić" ze źródła strony ;)
A sam tego nie napiszę, gdyż się na tym nie znam. Jedynie cokolwiek wiem o CSS-ie.Ten post został edytowany przez Autora dnia 02.08.13 o godzinie 15:14
Link do wypowiedziLink
Krzysztof Kurzawa

Krzysztof Kurzawa Web / Mobile
Developer

Temat: Przycinający się przewijany pasek "Partnerzy"

Piotr P.:
Jeśli miałoby to być bez JavaScript to CSS3 animations ale to będzie sżło do lewej i później do prawej wracać (box z partnerami).

Przykład na szybko, bez Javascript. Oglądać na Chrome/Safari, bo pisałem pod webkitem ;-)

No ale tak jak pisałem użyte jest CSS3 Animations:-)

Ale dzięki, znam animacje ale zainspirowałeś mnie prostym lecz świetnym myśleniem - div z klasa "cloned" dzięki czemu animacja idzie od nowa ale nie widać że się tak jakby cofa do punktu 0%:-) - to samo ostatnio robiłem ale to było na rotate 360 stopni więc rozwiązanie samo wyszło. Czasami brakuje abstrakcyjnego myślenia ale jakbym miał to zrobić na CSS3 Animations to bym wymyślił:-)
Link do wypowiedziLink
Mateusz Ch

Mateusz Ch Felietonista
motoryzacyjny

Temat: Przycinający się przewijany pasek "Partnerzy"

Dzięki za odpowiedzi.
Ogólnie tematyka CSS jest mi znana, a zatem wiem, że w przypadku takich sliderów sprawa nie wygląda wcale tak kolorowo. Żeby wszystko wyglądało tak, jak należy, to wszystkie zdjęcia musiałyby być tych samych rozmiarów (a trudno, aby każdy baner pochodzący z innych stron edytować). Oczywiście, można dodać parametry szerokości i wysokości, ale wtedy zdjęcia wyglądają nienaturalnie.

Pomysł Piotra jak najbardziej mi się podoba, jednakże taki slider dotyczy tylko linków/tekstu, a to samo w sobie nie zachęca ludzi do oglądania, a tym bardziej klikania w linki.

Wybrałem więc nieco inną opcję, i dodałem prosty wysuwany boczny panel po lewej stronie. Może nie jest to mistrzostwo świata, ale na pewno jest to lepsza opcja niż przycinający się przesuwany pasek.
Efekty możecie zobaczyć tutaj:
http://www.mateuszchomicki.pl/
Link do wypowiedziLink
Piotr Potera

Piotr Potera Frontend Developer,
UI/UX designer

Temat: Przycinający się przewijany pasek "Partnerzy"

Pomysł Piotra jak najbardziej mi się podoba, jednakże taki slider dotyczy tylko linków/tekstu,

Pomysł Piotra wynikał tylko i wyłącznie z lenistwa ;-) Nikt ci nie broni wstawić tam obrazków. Jeśli chodzi o różne rozmiary, to można sobie z tym poradzić budując dookoła nich container i centrować je w pionie i poziomie, dodając jakieś delikatne tło. Dodatkowo, większe można przeskalować do rozmiarów tych mniejszych.

a to samo w sobie nie zachęca ludzi do oglądania, a tym bardziej klikania w linki.

A przewijane bannery wręcz przeciwnie. Ludzie tylko czekają by klikać w linki! ;-)
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

Pojawiająca się "ramka"




Wyślij zaproszenie do
Anuluj