Witam serdecznie.
Szukam dobrego pluginu, jakiegoś tutorialu, który pomógłby mi w CMS Wordpress stworzyć animację contentu, jak poniżej:
Link 1
Do tej pory natknąłem się tylko na coś takiego, ale nie spełnia moich oczekiwań:
Link 2
Byłbym wdzięczny za wszelkie wskazówki i pomoc.
Pełna wersja: Animacja contentu na stronie
Tu porusza się 1 div.
Myślę że dasz radę bez wtyczek.
Myślę że dasz radę bez wtyczek.
Zupełnie nie mogę dobrać odpowiedniej animacji dla konkretnego div'a.
Do tego dochodzi fakt, że w tle pracuje Ajax (wtyczka Ajaxify Wordpress Site) i się rozsypuje to i owo.
Znacie może jakąs stronkę z tutorialami, które pomogłyby mi stworzyć tego typu animację w jQuery?
Chodzi mi o coś takiego, że dany div jest ukryty, po załadowaniu calej strony (div wyjezdza z prawej strony i przesuwa sie po linii prostej w lewą stronę do środka contentu. Po wybraniu kolejnej podstrony div (z poprzednią zawartością) przesuwa się w lewa stronę, a na jego miejsce pojawia się kolejna zawartość - z animacją jak na początku, czyli slide z prawej strony w kierunku lewej).
Do tego dochodzi fakt, że w tle pracuje Ajax (wtyczka Ajaxify Wordpress Site) i się rozsypuje to i owo.
Znacie może jakąs stronkę z tutorialami, które pomogłyby mi stworzyć tego typu animację w jQuery?
Chodzi mi o coś takiego, że dany div jest ukryty, po załadowaniu calej strony (div wyjezdza z prawej strony i przesuwa sie po linii prostej w lewą stronę do środka contentu. Po wybraniu kolejnej podstrony div (z poprzednią zawartością) przesuwa się w lewa stronę, a na jego miejsce pojawia się kolejna zawartość - z animacją jak na początku, czyli slide z prawej strony w kierunku lewej).
Witaj Swiezak.
Wiadomo szybciej i wygodniej z jQuery/UI. Ale do przesunięcia 1 diva nie skorzystałbym z jQuery -> jeżeli nie masz innych zastosowań. KISS.
http://jqueryui.com/show/
Wiadomo szybciej i wygodniej z jQuery/UI. Ale do przesunięcia 1 diva nie skorzystałbym z jQuery -> jeżeli nie masz innych zastosowań. KISS.
http://jqueryui.com/show/
Wiem, że mógłbym skorzystać np. z CSS3, ale nie wszystkie przeglądarki go wspierają.
Dzięki za link.
Tutaj małe demo, ale nie do końca to działa - mam problem z Ajaxem w tle:
A jesteś w stanie określić, co za bilbioteka jest zmuszona do pracy z przesuwaniem div'a w tym rozwiązaniu? - http://templates.cms-guide.com/45113/
Dzięki za link.
Tutaj małe demo, ale nie do końca to działa - mam problem z Ajaxem w tle:
Kod
$("#content").css('left', function(){ return $(this).offset().left; })
.animate({"left":"0px"}, "slow");
});
.animate({"left":"0px"}, "slow");
});
A jesteś w stanie określić, co za bilbioteka jest zmuszona do pracy z przesuwaniem div'a w tym rozwiązaniu? - http://templates.cms-guide.com/45113/
Jeżeli ktoś nie używa przeglądarki z css3 to prawdopodobnie nie będzie Twoim targetem! 
Tak na szybko, po wyłączeniu jQuery z tej stronki (odpalane lokalnie), nie uruchomił się slide. Więc zakładam, że to jQuery.
Pzdr, johnny_b
Tak na szybko, po wyłączeniu jQuery z tej stronki (odpalane lokalnie), nie uruchomił się slide. Więc zakładam, że to jQuery.
Pzdr, johnny_b
Dla zainteresowanych tematem.
Moje rozwiazanie (moze da sie prosciej, lepiej?):
Fragment kodu dla animacji przy pierwszym wejsciu na strone (tego mi brakowalo wczesniej):
w css #content ma ustawione domyslnie visibility: hidden.
Fragment kodu dla animacji po kliknieciu na jakis element na stronie:
Oczywiscie do pracy zostal zatrudniony rowniez Ajax.
Moje rozwiazanie (moze da sie prosciej, lepiej?):
Fragment kodu dla animacji przy pierwszym wejsciu na strone (tego mi brakowalo wczesniej):
Kod
$("#content").delay(1000).css({'left': $("#content").offset().left + $('#content').width()*2, 'visibility': 'visible'}).animate({'left':'0px'}, 800);
w css #content ma ustawione domyslnie visibility: hidden.
Fragment kodu dla animacji po kliknieciu na jakis element na stronie:
Kod
$("#content").delay(1000).animate({'right':($(window).width() - $("#content").width()) / 2 + $("#content").width()}, 800);
Oczywiscie do pracy zostal zatrudniony rowniez Ajax.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.