QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads How To Detect Element Entered Viewport

How To Detect Element Entered Viewport

revel-scroll

Many websites are implementing animations when a element enters the viewport. Now this is a popular web design technique. In this post I will provide the easiest way to detect if element entered viewport or not.


View Demo


Technique to detect element entering viewport

Here is the scenario for a div element we want to track.
logic

Here we can calculate if the div is available in viewport or not by using a simple condition:
offsetTop > pageYOffset and offsetTop < innerHeight + pageYOffset

This is the code for tracking it

<!doctype html>
<html>
    <head>
        <title>Reveal On Scroll Animations</title>
        <style>
            .div1
            {
                height: 400px;
                background-color: blue;
            }
           
            .div2
            {
                height: 220px;
                background-color: green;
            }
           
            .div3
            {
                height: 1000px;
                background-color: yellow;
            }
           
            .div4
            {
                height: 2000px;
                background-color: grey;
            }
        </style>
    </head>
    <body>
        <div class="div1" data-reveal="false"></div>
        <div class="div2" data-reveal="true"></div>
        <div class="div3" data-reveal="false"></div>
        <div class="div4" data-reveal="true"></div>
    </body>
    <script>
        function reveal()
        {
            var elements = document.querySelectorAll("[data-reveal][data-reveal='true']");
            var length = elements.length;
           
            for(var count = 0; count < length; count++)
           {
               /* offsetParent may not be the body if the element container is positioned. Therefore we need to find the distance from the body by adding all the offsetTop's of all offsetParent's.  */
               var offsetParentTop = 0;
               var temp = elements[count];
               do
               {
                   if(!isNaN(temp.offsetTop))
                   {
                        offsetParentTop += temp.offsetTop;
                   }
               }while(temp = temp.offsetParent)
               var pageYOffset = window.pageYOffset;
               var viewportHeight = window.innerHeight;      
               if(offsetParentTop > pageYOffset && offsetParentTop < pageYOffset + viewportHeight)
               {
                   console.log(elements[count].className + " is visible");
                }
            }
        }
       
        /* Attach event handlers to resize and scroll event */
        window.addEventListener("resize", reveal, false);
        window.addEventListener("scroll", reveal, false);
    </script>
</html>

scrollrevealjs for rescue

If you are too lazy to implement your own code for tracking it then you can use scrollrevealjs library.

Conclusion

In the above example we found viewport visibility for vertical alignment. You can use the same logic to write a code to detect horizontal alignment of a element in the viewport. For horizontal alignment you have to use offsetLeft, innerWidth and pageXOffset.

Jun 12, 2014Narayan Prusty
WordPress Custom Meta Boxes TutorialMultithreading In HTML5 Using Web Workers
Comments: 1
  1. clients6.coffee4well-being.com
    6 years ago

    Awesome issues here. I’m very happy to see your post.
    Thank you a lot and I am taking a look ahead to touch you.
    Will you kindly drop me a e-mail?

    ReplyCancel

Leave a Reply to clients6.coffee4well-being.com Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image8 years ago 1 Comment Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • Technique to detect element entering viewport
  • scrollrevealjs for rescue
  • Conclusion
Related Articles
  • Maintaining Aspect Ratio of iFrame in Responsive Site
  • Creating a Percentage of Webpage Scrolled Indicator
  • Creating A Simple Backdrop Effect
  • wikiHow Style Popup
  • CSS Specificity: Priortizing Selectors Rules
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license