Search code examples
javascriptviewportfade

fade in/out, by ratio of viewport

Because of some necessary parts of this concept, it's needed that the viewportratio is >=1:1 but also <=2:1.

When it isn't a value between 1:1 and 2:1, there should a div container fade in, where I have a text message in it. But when the viewport ratio is then corrected to a fitable value, it should fade out automatically.

This check should happen every time, when the Viewport dimension changes, not only when the page is loading.

Could someone help me with that problem?

Solution

  • Check out this JSfiddle: https://jsfiddle.net/ChefGabe/e1vfhyuw/ (you can resize the output window to simulate a page resize)

    Lines 1 and 2 are Event listeners. DOMContentLoaded is fired after the HTML is parsed on page load. resize is fired on resize (duh).

    (Edit: DOMContentLoaded won't work in JSfiddle, but it should work in a real scenario)

    I used this StackOverflow question to get the width and height of the browser.

    Hope that helped!