scale content scroll down

[ta_io]

i am trying to make a header with text (my logo) and this text while you make scroll down be scale. if does anyone know how make it .

        #header
        {

            height: 100%;
            max-width: 100%;
            margin: 0 auto;
            position: relative;
        }
        #logo-nav{
            top: 0;
            z-index: 2;
            padding: 22px 0;
            height: 35px;
            display: block;
            width: 100%;
            left: 50%;
            transform: translateX(-50%);
            pointer-events: all;
            overflow: hidden;
            text-align: center;
            align-items: center;
            font-family: "nimbu";
            background-color: white;
             position: fixed;
            font-size: 36px;
            line-height: 40px;

}

        #logo
        {
            margin-top: 0px;
            overflow: hidden;
            height: 32px;
            width: 100%;
            z-index: 2;
            position: relative;
            letter-spacing: 2px;
            text-align: center;
            text-transform: uppercase;

       }

[Shikkediel]

Here’s a simple demo I made a while back:

codepen.io/anon/pen/QQjzJP

[ta_io]

Shikkediel thanks !!! i saw you work before but i have a problem, when i scroll the font-size is less ok, but the logo go up (https://gph.is/g/4wnnx2Z) i wanna scale in the same position like this (https://giphy.com/gifs/ywy3OjHDLat1httHND)

[Shikkediel]

I’m afraid I’m not able to tell what the issue might be from that image… maybe you could post a live demo or a link.

[ta_io]

this is what i have https://codepen.io/ta_io/pen/pYwoeR

and this is what i want https://objectsofcommoninterest.com/

[Shikkediel]

Not sure how to get it as smooth looking as that page…

codepen.io/anon/pen/xBrwBQ

Scaling is likely better by the way.

[Author]

Posts