Animacja contentu na stronie Opcje

[swiezak]

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.

[timon27]

Tu porusza się 1 div.
Myślę że dasz radę bez wtyczek.

[swiezak]

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).

[johnny_b]

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/

[swiezak]

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:

Kod

$("#content").css('left', function(){ return $(this).offset().left; })
             .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/

Ten post edytował swiezak 9.03.2014, 19:42:47

[johnny_b]

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

[swiezak]

Dla zainteresowanych tematem.
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.