Zoom in on icon page transition in Javascript

  css, html, javascript, scroll

Here is my html(only a part of the content matters)

<div class="cont">
    <div class="main">
        <div class="text_main">
            <header class="selectDisable">
                <p>lorem ipsum</p>
                <h2>lorem ipsum</h2>
            </header>
            <p class="description">&nbsp;&nbsp;&nbsp;&nbsploremememamdnabdauidfsatttttttttasfdasfdfsadufasdsadasdasdsadasdasdasdasdasd</p>
            <p class="copyright">&copy;<span id="date"></span> Lorem Ipsum</p>
        </div> 
        <div class="illustration_main" >
            <img class="selectDisable" src="illustrations/final final.png">
        </div>
    </div>
    <div class="arrow">
        <img class="selectDisable, arrow_true" src="icons/down-arrow-svgrepo-com.svg">
    </div>
    <div class="directors">

    </div>
</div>

And css

.arrow > img{
    width:120px;
}
.arrow_true{
    position:absolute;
    top:40%;
    right:56%
}

The .arrow contains an SVG of an arrow that is pointing downwards. What I want to do is when scrolling down, the arrow will both gradually get bigger until it covers the page as well as rotating 90 degrees to the right. Right after the arrow covers the screen, my next page willdly in from the bottom. I tried different scroll detection methods but none work.

Source: Ask Javascript Questions

LEAVE A COMMENT