Scoll

Add Animation to Translated Box in Merged Table Column on Scrooll

by Akram kamal

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div style="height:300px; background:yellow">Scrool Drown Please</div>
<table class="table">
    <tr>
        <td rowspan="28"><span id="map">New Users</span></td>
    </tr>
    <tr>
        <td>555 77 855</td>
    </tr>
    <tr>
        <td>555 77 855</td>
    </tr>
    <tr>
        <td>555 77 855</td>
    </tr>
    <tr>
        <td>555 77 855</td>
    </tr>
    <tr>
        <td>555 77 855</td>
    </tr>
    <tr>
        <td>555 77 855</td>
    </tr>
    <tr>
        <td>555 77 855</td>
    </tr>
    <tr>
        <td>555 77 855</td>
    </tr>
    <tr>
        <td>555 77 855</td>
    </tr>
    <tr>
        <td>555 77 855</td>
    </tr>
    <tr>
        <td>555 77 855</td>
    </tr>
    <tr>
        <td>555 77 855</td>
    </tr>
    <tr>
        <td>555 77 855</td>
    </tr>
    <tr>
        <td>555 77 855</td>
    </tr>
    <tr>
        <td>555 77 855</td>
    </tr>
    <tr>
        <td>555 77 855</td>
    </tr>
    <tr>
        <td>555 77 855</td>
    </tr>
    <tr>
        <td>555 77 855</td>
    </tr>
    <tr>
        <td>555 77 855</td>
    </tr>
    <tr>
        <td>555 77 855</td>
    </tr>
    <tr>
        <td>555 77 855</td>
    </tr>
    <tr>
        <td>555 77 855</td>
    </tr>
    <tr>
        <td>555 77 855</td>
    </tr>
    <tr>
        <td>555 77 855</td>
    </tr>
    <tr>
        <td>555 77 855</td>
    </tr>
    <tr>
        <td>555 77 855</td>
    </tr>
    <tr>
        <td>555 77 855</td>
    </tr>
</table>
<div style="height:300px;background:yellow" ">Scrool Up Please</div>

CSS

#map {
    display: inline-block;
    transform: rotate(-90deg) translate(-100px, -30px);
    color: #ed217c;
    white-space: nowrap;
}

JavaScript

$(window).scroll(function(e) {
    console.log(scrollY)
    var transform = "rotate(-90deg) translate(" +
        (-scrollY - 100) + "px, -30px)"
    $("#map").css("transform", transform)

})