Get started with protonet-jquery.inview CDN

ISC licensed

Lightweight plugin, Protonet-jquery.inview, triggers jQuery events for visible elements.

Tags:
  • jquery
  • inview

Stable version

Copied!

How to start using protonet-jquery.inview CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with protonet-jquery.inview CDN - cdnhub.io</title>
  <!-- Add the library CDN link -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.cdnhub.io/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script>
  <!-- Add your custom CSS if needed -->
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: #f1c40f;
      margin-bottom: 50px;
      position: relative;
    }
    .box.inview {
      background-color: #5cb85c;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box" id="box1">Box 1</div>
    <div class="box" id="box2">Box 2</div>
    <div class="box" id="box3">Box 3</div>
  </div>
  <!-- Add your custom JavaScript to initialize the library -->
  <script>
    $(function() {
      $('.box').inview({
        onShow: function(element) {
          $(element).addClass('inview');
        }
      });
    });
  </script>
</body>
</html>
Copied!
Copied!

All versions