Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JavaScript][CSS] Wykonywanie animacji css w kółko za pomocą JS
troian
post 18.02.2015, 22:57:18
Post #1





Grupa: Zarejestrowani
Postów: 184
Pomógł: 2
Dołączył: 3.02.2013

Ostrzeżenie: (0%)
-----

Witam, mam napisaną animację w css która sprawia że zdjęcie [div] powiększa się oraz zmniejsza, oto mam pytanko czy jest możliwość aby w JS wywoływać co np 30 sek tą animację? Tak aby się powtarzała.

Pierwsze wywołanie animacji
Kod
div.logo, div.tekst{opacity:0;-webkit-animation-name:bounceIn;animation-name:bounceIn;-webkit-animation-duration:750ms;animation-duration:750ms;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-fill-mode:forwards;animation-fill-mode: forwards;}


Kod Animacji
Kod
@-moz-keyframes fullexpand {0%{width:0px;}100%{width:100vh;}}
@-webkit-keyframes fullexpand {0% {width:0px;}100%{width: 100vh;};}
@-webkit-keyframes bounceIn{0%{opacity: 0;-webkit-transform: scale(0.3) translate3d(0,0,0);transform: scale(0.3) translate3d(0,0,0);}50%{opacity: 0.9;-webkit-transform: scale(1.3);transform: scale(1.3);}80%{opacity: 1;-webkit-transform: scale(0.89);transform: scale(0.89);}100%{opacity: 1;-webkit-transform: scale(1) translate3d(0,0,0);transform: scale(1) translate3d(0,0,0);}}
@keyframes bounceIn{0%{opacity: 0;-webkit-transform: scale(0.3) translate3d(0,0,0);transform: scale(0.3) translate3d(0,0,0);}50%{opacity: 0.9;-webkit-transform: scale(1.3);transform: scale(1.3);}80%{opacity: 1;-webkit-transform: scale(0.89);transform: scale(0.89);}100%{opacity: 1;-webkit-transform: scale(1) translate3d(0,0,0);transform: scale(1) translate3d(0,0,0);}}


Ten post edytował troian 18.02.2015, 23:00:03
Go to the top of the page
+Quote Post
freewalker
post 18.02.2015, 23:04:24
Post #2





Grupa: Zarejestrowani
Postów: 90
Pomógł: 4
Dołączył: 14.02.2015

Ostrzeżenie: (0%)
----- 

[HTML] pobierz, plaintext 
  1. $(document).ready(function(){  
  2.  
  3.  
  4. setTimeout(function(){
  5. 						animate_oo1();
  6. 						setTimeout(function(){ animate_oo2(); },200);
  7. 							},3000);	
  8.  
  9. function animate_oo1()
  10. 	{
  11. 					$("#o-first").animate({ marginTop: "-5px",marginLeft:"-5px", width:"112px",height:"111px" },150);
  12. 					$("#o-first > img").animate({ width:"112px",height:"111px" },150);
  13. 					setTimeout(function(){ 
  14. 											$("#o-first").animate({ marginTop:"0px",marginLeft:"0px",width:"102px",height:"101px" },150);
  15. 											$("#o-first > img").animate({ width:"102px",height:"101px" },150);
  16. 											setTimeout(function(){ animate_oo1(); },3000);
  17. 											},150);
  18. 	}
  19.  
  20. function animate_oo2()
  21. 	{
  22. 					$("#o-second").animate({ marginTop: "-5px",marginLeft:"-5px", width:"87px",height:"86px" },150);
  23. 					$("#o-second > img").animate({ width:"87px",height:"86px" },150);
  24. 					setTimeout(function(){ 
  25. 											$("#o-second").animate({ marginTop:"0px",marginLeft:"0px",width:"77px",height:"76px" },150);
  26. 											$("#o-second > img").animate({ width:"77px",height:"76px" },150);
  27. 											setTimeout(function(){ animate_oo2(); },3000);
  28. 											},150);
  29. 	}
  30.  
  31.  
  32. }); // end jQuery
[HTML] pobierz, plaintext


przykład animacji (aniomowane litery O O w napisie rainbowzOOm) http://www.rainbowzoom.pl
ale to z jQuery, zaoszczędzi Ci pisania wink.gif

w samym JS trzeba natrzaskać sporo linijek aby osiągnąć zamierzony efekt

Ten post edytował freewalker 18.02.2015, 23:05:58
Go to the top of the page
+Quote Post
troian
post 20.02.2015, 11:14:55
Post #3





Grupa: Zarejestrowani
Postów: 184
Pomógł: 2
Dołączył: 3.02.2013

Ostrzeżenie: (0%)
-----

Kod
http://altrias.pl/


oto adres do strony którą zrobiłem a tak wygląda fragment kodu css który powoduje efekt
[Chodzi mi tutaj o logo i napis pod nim]

Czy da się zrobić aby JS wykonywał ten efekt np co 15-20sek?
[Tylko bez wielkiego kombinowania bym prosił bo js to raczej słabo u mnie]

O może inaczej nie żeby aż tak się robiła, tylko żeby np powiększało się to o 5-10% i zmniejszało [Czas Trwania około 2/3sek]
Dużo było bo z takim efektem roboty?

Ten post edytował troian 20.02.2015, 11:16:34
Go to the top of the page
+Quote Post
freewalker
post 21.02.2015, 20:12:02
Post #4





Grupa: Zarejestrowani
Postów: 90
Pomógł: 4
Dołączył: 14.02.2015

Ostrzeżenie: (0%)
-----

oo widzę, że nowa firma startująca z usługami programowania, gdzie właściciele mają problem z podstawami, a później klienci przychodzą "do nas" bo ktoś nie dał rady i zamiast poprawiać stronę "takich" firm okazuje się, że lepiej napisać ją od nowa wink.gif

Nie ma, że w JS ci słabo, jeśli startujesz z takim projektem to polecam JS i jQuery - bez tego za dużo dynamiki nie osiągniesz w programowaniu stron, a co dopiero mówić o przesiadce i zrozumieniu HTML5, na który w końcu będziesz musiał się w przyszłości przerzucić tongue.gif

Nie uznaj tego posta jako dogryzanie, a tylko jako dobrą radę.

Efekt jaki chcesz da się szybko osiągnąć - http://api.jquery.com/animate/
jQ nie jest trudne i nawet nie znając JS możesz szybko się go nauczyć.

Pozdrawiam i życzę sukcesów
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 25.04.2025 - 05:25
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn