Today, I want to make you aware of a small jQuery plugin I discovered and which opens new possibilities on your website ; it’s called jQuery.Visible.
jQuery.Visible allows you to check if an HTML element is within the browser viewport. The viewport is user’s visible area of a web page.
For example, you could use this jQuery script to activate a message, enable an animation or play a sound only when the user is actually viewing to an HTML element while scrolling.
To illustrate this plugin in action, please check the demo :
In this demo, I have made two blocks and a fixed text on the right which will change when the red block becomes visible. It’s a really simple manner of using this plugin but you can really get creative once you know how it works… And you’ll see that it’s super easy to integrate!
So how to use jQuery.visible on your website?
To integrate it, you only need to import one jQuery file into your website. This file is called jquery.visible.min.js and you can download it from the author’s GitHub. Then, simply add it to your HTML page after your jQuery import :
<script src="js/jquery.visible.min.js"></script>Now, let’s write the actual jQuery code. Since we want to check if an element is visible ON SCROLL, we will need to track the scroll position of the user on the webpage. For that, we can use the jQuery scroll event like this :
$(window).on('resize scroll', function() {
});I also added the resize event so in case the user resizes the browser’s window, our plugin will still work. Now, the biggest part is done… But we still haven’t use jQuery.visible yet, so let’s do it 🙂
With a simple condition, we can now check if the element is visible according to the user’s scroll position. To check if an element is in the viewport with jQuery.visible, we can use the most simple condition ever which is the following :
if($(".your_element").visible()) {
}At this point, we have all the informations in hands to make it work. Just add this condition inside your jQuery scroll event and reference the element you want to track. In the demo, the element class I want to track is called “.block_2”. When it becomes visible, I change a text and its color using jQuery and here is the complete code I wrote :
$(document).ready(function() {
// We use the jQuery scroll event
$(window).on('resize scroll', function() {
// If block_2 becomes visible, we change the text
if($(".block_2").visible()) {
$(".visible_state").html("RED BLOCK IS VISIBLE").css("color", "green");
}
// Let's change the text back if block_2 is not visible anymore
else {
$(".visible_state").html("RED BLOCK IS NOT VISIBLE").css("color", "red");
}
});
}); So, it was easy isn’t it?
Feel free to download the sources of the demo here :
If you have any questions, need any help or want to say something, feel free to leave a comment below…
… and don’t forget to subscribe if you want to receive new unique tutorials and source codes directly on your email :
