Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Animacie pomocou JS

Aktivity
Avatar
oopssk21
Člen
Avatar
oopssk21:21.1.2016 21:06

Zdravim.Prosim vas mohol by niekto pomoct upravit JS kod ktory by mal robit animaciu fotiek (fadeOut a fadeIn). Problem je v tom ze prvy prikaz (fadeOut) sa spravi iba pre prvu fotku a zastavi sa na druhej a skonci a neporacuje dalej.Dakujem za kazdu radu.
CSS kod:

@-webkit-keyframes hvr-wobble-to-top-right {
16.65% {
-webkit-transform: translate(8px, -8px);
transform: translate(8px, -8px);
}

33.3% {
-webkit-transform: translate(-6px, 6px);
transform: translate(-6px, 6px);
}

49.95% {
-webkit-transform: translate(4px, -4px);
transform: translate(4px, -4px);
}

66.6% {
-webkit-transform: translate(-2px, 2px);
transform: translate(-2px, 2px);
}

83.25% {
-webkit-transform: translate(1px, -1px);
transform: translate(1px, -1px);
}

100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}

@keyframes hvr-wobble-to-top-right {
16.65% {
-webkit-transform: translate(8px, -8px);
transform: translate(8px, -8px);
}

33.3% {
-webkit-transform: translate(-6px, 6px);
transform: translate(-6px, 6px);
}

49.95% {
-webkit-transform: translate(4px, -4px);
transform: translate(4px, -4px);
}

66.6% {
-webkit-transform: translate(-2px, 2px);
transform: translate(-2px, 2px);
}

83.25% {
-webkit-transform: translate(1px, -1px);
transform: translate(1px, -1px);
}

100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}

.pice{
position: absolute;
height: 60px;
width: 200px;
display: block;
border: 1px solid red;

}

.hvr-sweep-to-right {
color: white;
font-weight: normal;
text-transform: uppercase;
text-decoration: none;
font-size: 2.344em;
vertical-align: center;
position: absolute;
background: rgb(225,132,37);
display: inline-block;
padding: 10px 10px 10px 10px;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.9s;
transition-duration: 0.9s;
z-index: 2;
opacity: .854122; /* prehliadnost*/
top: 300px; /* odsadenie z hora */
left:470px ;
}

.hvr-sweep-to-right:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: white;
color: rgb(225,132,37);
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.9s;
transition-duration: 0.9s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active {
color: rgb(225,132,37);
}
.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}

.hvr-sweep-to-right:active{
border: solid 4px rgb(225,132,37);

}

.fotky {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;

}
.fotky img {
position: absolute;
top: 0;
left: 0;
right: 0px;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
z-index: 1;

}

p{
display: block;
position: absolute;
font-size: 2em;
margin: 0 0 0 0;
top: 580px;
left: 80px;
z-index: 8;
color: white;
}

#Supp{
display: block;
position: absolute;
font-size: 2em;
margin:0 0 0 0;
top: 580px;
left: 130px;
color: white;

}

div.souhrn {
display:none
}

sup{
position: relative;
top: 8px;
font-size: 0.83em;
}

.sipka{
margin-right: 5px;
}

blockquote{
display: block;
position: absolute;
z-index: 10;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 30px;
color: white;
top: 350px;
margin: 10 auto;
left: 405px;
background-color:rgb(225,132,37);
opacity: 0.8;
padding-left: 5px;
padding-right: 5px;
}

JS kod:

var fotky=$('.fotky');
setInterval(function(){

fotky.children(':last').fadeOut(1500, function(){

this.fotky.children(':last').prependTo(fotky);

});

},1500);
 
Odpovědět
21.1.2016 21:06
Avatar
David Hynek
Tvůrce
Avatar
Odpovídá na oopssk21
David Hynek:21.1.2016 23:04

asi neporadím, ale nemělo by to projít všechny dotčené prvky a přidat jim tu funkci?
Proto to funguje jen u první, protože je to jen na první spuštěné.

Nahoru Odpovědět
21.1.2016 23:04
Čím víc vím, tím víc věcí nevím.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 2 zpráv z 2.