Forum PHP.pl > [JavaScript][CSS] Wykonywanie animacji css w kółko za pomocą JS

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript][CSS] Wykonywanie animacji css w kółko za pomocą JS

troian

18.02.2015, 22:57:18

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);}}

freewalker

18.02.2015, 23:04:24

[HTML] pobierz, plaintext 
$(document).ready(function(){  
 
 
setTimeout(function(){
						animate_oo1();
						setTimeout(function(){ animate_oo2(); },200);
							},3000);	
 
function animate_oo1()
	{
					$("#o-first").animate({ marginTop: "-5px",marginLeft:"-5px", width:"112px",height:"111px" },150);
					$("#o-first > img").animate({ width:"112px",height:"111px" },150);
					setTimeout(function(){ 
											$("#o-first").animate({ marginTop:"0px",marginLeft:"0px",width:"102px",height:"101px" },150);
											$("#o-first > img").animate({ width:"102px",height:"101px" },150);
											setTimeout(function(){ animate_oo1(); },3000);
											},150);
	}
 
function animate_oo2()
	{
					$("#o-second").animate({ marginTop: "-5px",marginLeft:"-5px", width:"87px",height:"86px" },150);
					$("#o-second > img").animate({ width:"87px",height:"86px" },150);
					setTimeout(function(){ 
											$("#o-second").animate({ marginTop:"0px",marginLeft:"0px",width:"77px",height:"76px" },150);
											$("#o-second > img").animate({ width:"77px",height:"76px" },150);
											setTimeout(function(){ animate_oo2(); },3000);
											},150);
	}
 
 
}); // 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

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

troian

20.02.2015, 11:14:55

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?

freewalker

21.02.2015, 20:12:02

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

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ć

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

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.