Code Ready | Frontend

✅ Создание крутого баннера



Удивляйте каждого с впечатляющим баннером, созданным с использованием SCSS и всего четырех строк кода JS. В этой анимации черный фон следует за курсором меняя цвет текста и его обводку. ⬇️

<section>

    <h2>Black <br> <span>Friday</span></h2>

    <div class="black"></div>

  </section>

section {

    font-family: 'Poppins',sans-serif;

    position: relative;

    width: 100%;

    height: 100vh;

    background: white;

    display: flex;

    justify-content: center;

    align-items: center;

    overflow: hidden;

    .black {

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        background: white;

        mix-blend-mode: difference;

    }

    h2 {

        font-size: 20vw;

        text-align: center;

        line-height: 0.75em;

        text-transform: uppercase;

        font-weight: 800;

    }

    span {

        font-size: 18.2vw;

        color: transparent;

        -webkit-text-stroke: 0.3vw #000;

    }

}

"use strict";

let black = document.querySelector('.black');

window.onmousemove = function(e) {

    let x = e.clientX;

    black.style.left = x + 'px';

}

@code_ready | #практика #scss #js