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

Gunnar CorreaGunnar Correa10/11/2021 - 80 acessos

Utilizando poucas linhas de HTML, CSS e Javascript nós conseguimos construir algo incrível.


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.


html css javascript js efeito efeito cortina imagem aparecer parcialmente div com imagem div com transparencia acessar elementos javascript input range

Compartilhe nas redes sociais



Gunnar Correa

Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web, Especialista em Tecnologias na Educação e Pós-graduando em Segurança da Informação. Começou seus estudos na área de programação quando era criança, e atualmente, está estudando desenvolvimento de jogos. É CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.


Fórum

Ficou com alguma dúvida? utilize nosso fórum de perguntas e respostas, lá nossa comunidade poderá te ajudar.

https://forum.satellasoft.com