2 replies [Last post]
mrkidd85
mrkidd85's picture
Offline
newbie
Leeds
Last seen: 4 years 51 weeks ago
Leeds
Timezone: GMT+1
Joined: 2015-08-20
Posts: 2
Points: 3

Hi guys - I have installed the following CSS class to a module on my site so it zooms in.

.classname {
-webkit-animation: cssAnimation 1s 1 ease;
-moz-animation: cssAnimation 1s 1 ease;
-o-animation: cssAnimation 1s 1 ease;
}
@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(0deg) scale(0.1) skew(1deg) translate(0px); }
to { -webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
}
@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(0deg) scale(0.1) skew(1deg) translate(0px); }
to { -moz-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
}
@-o-keyframes cssAnimation {
from { -o-transform: rotate(0deg) scale(0.1) skew(1deg) translate(0px); }
to { -o-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
}

However - I would like to change this so the animation only becomes available when the user scrolls to the module.

Currently, the animation works but by the time the user scrolls to it, it is already there.

How do I change this?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 7 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi mrkidd85, You could use

Hi mrkidd85,
You could use JavaScript to change an style or class which triggers the animation when the user has scrolled far enough.
Sorry I don't remember the code off my head but a quick google search should sort you out.

mrkidd85
mrkidd85's picture
Offline
newbie
Leeds
Last seen: 4 years 51 weeks ago
Leeds
Timezone: GMT+1
Joined: 2015-08-20
Posts: 2
Points: 3

Thanks pal, not too

Thanks pal, not too knowledged with Javascript but I'll give it a try.