How to change content on "island" as it passes down?

Pretty much I want to have the "island" that scrolls down to change into something else when it passes underneath the information. I know that the "island" is a png file, but is it possible to have two different png's, slightly altered to show transition from top to bottom. For example, before the information, the island has two people on it, but below the content, it has three once it touches down on land.

Hi

This would be customisation request, so I can only give tips, because we do not suppor customisations.

I would use an additional javascript and make a condition to replace the image depending on scrolling position. Here is an example:

Code: Select all

<script type="text/javascript">
    (function($) {$(document).ready(function() {
        if($(document).scrollHeight > 600) {
            $('.gkp-island').css('background-image','../images/parallax/island.png');
    });})(jQuery)
</script>