1

Exemplo: Zoom do Reveal
Objetivo: Estudar a mecânica e aparência do Zoom com as melhores soluções algorítmicas.

- Da problemática da aparência:
1 - Ao inspecionar a tag < section > buscando o padrão de cor preta do background
(detalhe do background >> círculos levemente brancos ao centro) o mesmo apresenta uma cor diferente na inspeção (pink(background: #ff5e99;)) da apresentada no slide.

- Da problemática da mecânica:
1 - Fazer com que o texto central receba um efeito zoom que ultrapasse os limites da tela.
2 - O texto torna-se opaco a medida que vai se distanciando do centro da tela.

Update 1

div {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin-left: 200px;
  margin-top: 50px;
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 350ms;
  -webkit-transform: translate(150%, 150%);
  -webkit-transform: scale(1.1, 1);
  -webkit-transition: translate 2s;
  animation-name: zoom;
  animation-duration: 550ms;
  transform: translate(150%, 150%);
  transform: scale(1.1, 1);
  transition: translate 2s;
  -ms-transform: scale(1.1, 1);
}

@keyframes zoom {
  from {
    opacity: 1;
    -webkit-transform: scale3d(0.7, 0.7, 0.7);
    transform: scale3d(1, 1, 1);
  }
  10% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    margin-left: 200px;
    margin-top: 50px;
    visibility: hidden;
  }
}

.zoom {
  -webkit-animation-name: zoom;
  animation-name: zoom;
}
<div>Test</div>

3
  • Cara boa parte disso tudo vc resolve com CSS principalmente usando transform scale() translate(), opacity, @keyframes e medias em % ou vw vh... Se for um projeto pequeno da pra fazer praticamente só com CSS e quase nada de JS ou jQuery para chegar em um resultado bem próximo... Mas se o plugin já faz tudo pq não usa-lo? Será que vale a pena reinventar a roda no seu projeto?
    – hugocsl
    13/09/2018 às 17:39
  • Olá @hugocsl obrigado por responder, é sim um projeto pequeno, sem a necessidade de todo o framework reveal.js, fiz um update, pode ajudar-me a ajustar as propriedades de zoom e background negro com circulos brancos?
    – user31050
    13/09/2018 às 19:22
  • Vou tentar fazer um modelo básico, mas será básico ok como se fosse apenas a primeira transição apenas, depois vc pode adaptar ou fazer o resto das transições etc. Assim que eu tiver um exemplo viável eu respondo pra ti
    – hugocsl
    13/09/2018 às 19:47

1 Resposta 1

1

Como tinha te falado esse é um exemplo bem básico, fiz meio na correria, mas acho que vai abrir sua cabeça para ver que só com CSS vc consegue algo bem próximo disso. Com calma e umas linhas a mais de código vc consegue adaptar no seu projeto. Logicamente só seria viável para algo pequeno, poucas páginas. Mas já é um começo pra vc ir testando as possibilidades.

As técnicas usadas são basicamente, scale(), blur(), opacity, e um checkbox para passar o slide, mas dependendo um radio buttom seja melhor. Aqui tem um exemplo de troca de slide só com CSS que fiz em outra resposta tb só com CSS: Scroll vertical por seções (como se fosse um slide)

Veja como ficou o resultado:

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
input {
    display: none;
}
.slide {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    background-image: radial-gradient(circle, #999, #000);
    background-repeat: no-repeat;
    background-size: cover;
}
.slide label {
    border-top: 50px solid rgba(255,255,255,0.5);
    border-bottom: 50px solid transparent;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    position: absolute;
    bottom: 0px;
    right: 20px;
    cursor: pointer;
}
.slide label:hover {
    border-top: 50px solid #fff;
}
.efeito {
    font-family: sans-serif;
    font-size: 8vw;
    color: #fff;
    opacity: 1;
    filter: none;
}
@keyframes testex {
    0% {
        transform: scale(1);
        opacity: 1;
        filter: none;
    }
    99% {
        transform: scale(20);
        opacity: 0;
        filter: blur(5px);
    }
    100% {
        transform: scale(20);
        opacity: 0;
        filter: blur(5px);
        display: none;
        z-index: -999;
    }
}
#bn1:checked ~ #sn1 {
    animation: testex 1s forwards;
}

#sn2 {
    opacity: 0;
    transition: all 1s;
}

#bn1:checked ~ #sn2 {
    opacity: 1;
}
<input type="checkbox" name="" id="bn1">

<section class="slide" id="sn1">
    <label for="bn1"></label>
    <div class="efeito">
        <span>1 texto 123</span>
    </div>
</section>

<section class="slide" id="sn2">
    <label for="bn1"></label>
    <div class="efeito">
        <span>2 texto 456</span>
    </div>
</section>

2
  • Ficou muito bom @hugocsl, valeu man!
    – user31050
    15/09/2018 às 19:22
  • @user31050 a estrutura aqui do HTML não é a melhor, o código da outra resposta que citei acho que seria melhor para um ponto de partida. Basta pegar o efeito que coloquei nessa resposta e adaptar no slide da outra, pois achei que ficou mais bem feito :)
    – hugocsl
    15/09/2018 às 19:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .