Hallo
Wenn man meine Seite besucht, dann startet für ein Bild eine Animation. Das Bild ist erstmal nicht sichtbar und kommt per Animation von links in die Mitte zu der richtigen Postion. Soweit ok.
Kann ich diesen Effekt erst auslösen wenn der Besucher zu der geigneten Stelle gescrollt hat? Weil die Animation startet sobald man auf der Seite ist und das Bild sowieso nicht sehen kann.
Bis jetzt habe ich alles in CSS gemacht
Code
.myServiceIcon{
position: relative;
-moz-animation-name: dropHeader;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 0.8s;
-webkit-animation-name: dropHeader;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 0.8s;
animation-name: dropHeader;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 0.8s;
}
@-moz-keyframes dropHeader {
0% {
-moz-transform: translateX(-200px);
}
100% {
-moz-transform: translateX(0);
}
}
@-webkit-keyframes dropHeader {
0% {
-webkit-transform: translateX(-200px);
}
100% {
-webkit-transform: translateX(0);
}
}
@keyframes dropHeader {
0% {
transform: translateX(-120px);
}
100% {
transform: translateX(0);
}
}