QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Bitcoin BankingBuy, Sell, Store and Earn Interest
  • 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
    5 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 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`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

Image6 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
Freelance: I am available
@narayanprusty
Hi, I am a full-stack developer - focusing on JavaScript, WordPress, Blockchain, DevOps, Serverless and Cordova. You can outsource your app development to me.





Will get back to you soon!!!
WordPress
ReactJS
Meteor
Blockchain
Serverless
Kubernetes
DevOps
DB & Storage
Ejabberd
Let's get started
My Books

2014 - 2015 © QNimate
All tutorials MIT license