I need help, I can’t get this script to work

Asked

Viewed 41 times

-1

I wanted to make the effect of that video: https://www.youtube.com/watch?v=lZ-OO7x75Rc. If anyone can help me, I’d appreciate it. 

*
{
    margin: 0;
    padding: 0;
}
body
{
    height: 200vh;
    background: #111;
}
section
{
    position: absolute;
    width: 100%;
    height: calc(100% - 200px); 
    background: #2abbff;
}
section .curve
{
    position: absolute;
    bottom: -200px;
    height: 200px;
    width: 100%;
    transform-origin: top;
}
section .curve img
{
    width: 100%;
    height: 100%;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <section>
        <span class="curve">
            <img src="curve.png">
        </span>
    </section>
    <script type="text/javascript">
        var scroll = document.querySelector('.curve');
        window.addEventListener('scroll', function() {
            var value = 1 + window.scrollY/-500;
            scroll.style.transform = 'scaleY(${value})';
        })
    </script>
</body>
</html>

html css css3

1 answer

1


The error is in the following excerpt:

scroll.style.transform = 'scaleY(${value})';

See that you assign a string to the style Transform property.

But actually, this should be a string template:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/template_strings

So to correct, do it this way:

scroll.style.transform = `scaleY(${value})`;

With this, your code will look like this (I put another image as an example):

*
{
    margin: 0;
    padding: 0;
}
body
{
    height: 200vh;
    background: #111;
}
section
{
    position: absolute;
    width: 100%;
    height: calc(100% - 200px); 
    background: #2abbff;
}
section .curve
{
    position: absolute;
    bottom: -200px;
    height: 200px;
    width: 100%;
    transform-origin: top;
}
section .curve img
{
    width: 100%;
    height: 100%;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <section>
        <span class="curve">
            <img src="https://toppng.com/uploads/preview/blue-line-curve-11563055957kdsgnz0xar.png">
        </span>
    </section>
    <script type="text/javascript">
        var scroll = document.querySelector('.curve');
        window.addEventListener('scroll', function() {
            var value = 1 + window.scrollY/-500;
            scroll.style.transform = `scaleY(${value})`;
        })
    </script>
</body>
</html>

Browser other questions tagged html css css3

You are not signed in. Login or sign up in order to post.