Thu, 2015-08-20 17:28
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?
Thu, 2015-08-20 19:27
#1
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.
Thu, 2015-08-20 20:07
#2
Thanks pal, not too
Thanks pal, not too knowledged with Javascript but I'll give it a try.