Scroll

Start the animation when the device enters the viewport. You define the distance between the top of the browser and your plugin holder and as soon as the distance is smaller than the given value, the animation will start.

... space intentionally left blank to push the device outside the viewport ...

Code

                    
<script>
    $('.prezento-holder').prezento({
      devices: [{
        name: 'imac',
        deviceImageSRC: './../images/imac.png',
        xLeftTop: 182,
        yLeftTop: 110,
        xRightBottom: 2106,
        yRightBottom: 1262,
        breakpoint: 1440,
        bgImgSrc : './../images/web-design-huge.jpg',
        bgTransitionDuration: '12s'
      },{
        name: 'macbookpro',
        deviceImageSRC: './../images/mbp.png',
        xLeftTop: 124,
        yLeftTop: 36,
        xRightBottom: 876,
        yRightBottom: 505,
        breakpoint: 860,
        bgImgSrc : './../images/web-design-large.jpg',
        bgTransitionDuration: '12s'
      },{
        name: 'ipad',
        deviceImageSRC: './../images/ipad.png',
        xLeftTop: 110,
        yLeftTop: 110,
        xRightBottom: 890,
        yRightBottom: 1144,
        breakpoint: 480,
        bgImgSrc : './../images/web-design-med.jpg',
        bgTransitionDuration: '15s'
      },{
        name: 'iphone',
        deviceImageSRC: './../images/iphone.png',
        xLeftTop: 40,
        yLeftTop: 134,
        xRightBottom: 440,
        yRightBottom: 830,
        breakpoint: 0,
        bgImgSrc : './../images/web-design-small.jpg',
        bgTransitionDuration: '4s'
      }], 
      startAfterScroll: true,
      distanceTop: 0.5
    });
</script>