0

I have been trying to create parallax scrolling with js and css. Everything works fine but I have one line of code which I need but I don't know why. The working code is given below.

CSS

/// Block Element
/// @access public
/// @param {String} $element - Element's name
@mixin element($element) {
    &__#{$element} {
        @content;
    }
}

/// Block Modifier
/// @access public
/// @param {String} $modifier - Modifier's name
@mixin modifier($modifier) {
    &--#{$modifier} {
        @content;
    }
}


.body {
    height: 2000px;
}
.layer {
    width: 100%;
    height: 800px;
    position: fixed;
    //z-index: -1;
    background-color: pink;

    @include element('1') {
        background-color: blue;
    }

    @include element('2') {
        background-color: red;
    }

    @include element('3') {
        background-color: green;
    }
}

Javascript

import "./index.scss";
import "./bootstrap/css/bootstrap.min.css";
window.onload = function () {
    let layers = window.document.querySelectorAll(".layer")
    console.log("Layers: " + layers);
    window.addEventListener("scroll", (event) => {
        let topDistance = window.pageYOffset;
        for (let i = 0; i < layers.length; i++) {
            let layer = <HTMLElement>layers[i];
            let depth = layer.dataset["depth"];
            let movement = -(topDistance * Number(depth))
            let translate3d = 'translate3d(0, ' + movement + 'px, 0)';
            layer.style['-webkit-transform'] = translate3d;
            layer.style['-moz-transform'] = translate3d;
            layer.style['-ms-transform'] = translate3d;
            layer.style['-o-transform'] = translate3d;
            layer.style.transform = translate3d;
        }
    });
}

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Introduction to web development blog </title>
    <link href="https://fonts.googleapis.com/css?family=Bungee+Shade|Oswald|Raleway" rel="stylesheet">
    <script src="bundle/index.js"></script>
</head>
<body class="body">
    <div class="hero">
        <h1>Boom</h1>
        <div class="layer layer__1" data-type="parallax" data-depth="0.5"></div>
        <div class="layer layer__2" data-type="parallax" data-depth="0.1">
            <h1>Layer 2</h1>
        </div>
        <div class="layer layer__3" data-type="parallax" data-depth="0.2"></div>

    </div>
</body>
</html>

This code works but if I remove 

.body {
    height: 2000px;
}

it no longer works. Why is this?

Thanks in advance.

mortonprod
  • 183
  • 3
  • 13

0 Answers0