Aprenda a fazer o efeito de cortina nas imagens do seu site

Curso Escrevendo testes automatizados com PHPUnit

Efeito de cortina são aqueles na qual parte do elemento fica visível parcialmente, porém, conforme uma div sobreposta vai sumindo, o conteúdo de baixo vai sendo revelado.

Hoje nós vamos ver como criar esse feito com HTML, CSS e um pouco de Javascript para adicionar um comportamento dinâmico.

Confira a nossa videoaula abaixo.

Scripts efeito de cortina

Agora que você já aprendeu a criar esse incrível efeito de cortina, confira abaixo todos os códigos utilizados durante a aula.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SatellaSoft - Efeito imagem</title>

    <link rel="preload" href="assets/css/style.css" as="style">
    <link rel="preload" href="assets/js/script.js" as="script">

    <link rel="stylesheet" href="assets/css/style.css">

</head>

<body>

    <div class="container">
        <div class="effect" id="dv-effect"></div>
    </div>

    <input type="range" min="0" max="100" value="100" id="range">

    <script src="assets/js/script.js"></script>
</body>

</html>

style.css

.container {
    background-image: url("../img/bg_regina.png");
    background-position: center;
    background-size: cover;
    width: 200px;
    height: 350px;
    position: relative;
}

.container .effect {
    background-color: rgba(0, 0, 0, .7);
    width: 100%;
    right: 0;
    position: absolute;
    height: 100%;
}

script.js

'use strict'

document.querySelector('#range').addEventListener('input', e => {
    changeWidth(e.target.value);
});

function changeWidth(value) {
    document.querySelector('#dv-effect').style.width = `${value}%`;
}

Por hora é isso, nos vemos na próxima.