0

I'm making a web based presentation using the full width and height carousel of bootstrap for a client. It is a simple tutorial of how to create an account in the client's website and it consist on images only. However, I managed to put an image of a pointer that animates with jQuery and highlight the place where the user has to click. So far the animation works perfect but I need it to start when the user gets to see that slide, so I was wondering if it's possible to start the animation when you see that pointer then it starts moving.

This is my script:

$('.carousel').carousel({
    pause: true,
    interval: false
})
</script>
<script>
(function animation() {
    var options = {
        duration: 800,
        easing: 'linear'
    };
    $('.fill')
    .find('.pointer_fing')
    .animate({
        left: 36,
        top: 880
    },
    options
    )
    .animate({
        left: 866,
        top:694
    },
    options
    )
    .animate({
        left: 936,
        top: 350,
    },
    options
    )
    .animate({
        left: 936,
        top: 280,
    },
    $.extend(true, {}, options, {
        complete: function() {
            animation();
        }
    })
    );
})();
msrd0
  • 7,816
  • 9
  • 47
  • 82
San Rabid
  • 29
  • 5
  • Does this help? http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport – David Oct 08 '14 at 09:35
  • Please do not use "bootstrap" tag, use "twitter-bootstrap" since it means something else – Daniel Cheung Oct 12 '14 at 10:01

0 Answers0