This is a great piece of code that allows you to run a script when an element is physically visible on the screen. The 'on-screen' is very important here as most jQuery scripts of this nature will run if the item is present and that could be if it's not visible in the viewport, or even hidden as display: none. This script explicitly runs when an element is physically shown/appears/comes into view on the screen and also includes elements that may be triggered by other phased events and this make sit particularly useful for interactions.

jQuery Run Script when element is Visible OnScreen

Example Usage with client link

We used this code on a client's photography website to dynamically switch the body class derived from photography of different tonalities - light & dark. The aim was to dynamically change the colour of the logo depending on whether a slide was dark and therefore needed a light version of the logo, or light and therefore needed a light version of the logo. It works seamlessly and you can view it in action on Robert Shack Photography website.

NB the 'transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd' is very important in this application as the class should not change until the slider CSS transition has completed and that's another useful bit of jQuery code.