Efeito reiniciar quando sai da tela

Front-end CSS
#1

Olá!
Alguém saberia me informar como faço para o transition ou o vídeo iniciar apenas quando está sendo exibido na tela e ao sair resetar?

Um exemplo é o site da Apple: Recursos do iPhone 13 e iPhone 13 mini - Apple (BR)

Obrigado.

#2

Olha é dificil saber logo de cara, mas, parece que esses efeitos foram feitos CSS.

Para ter aqui algum exemplo precisa melhorar sua pergunta que talvez alguém que tenha excelentes conhecimentos em CSS (que não é o meu caso) possa ter algum exemplo.

#3

da pra fazer de forma simples usando javascript mesmo, existe uma função nativa no js chamada getBoundingClientRect que facilita todo o trabalho.

O método Element.getBoundingClientRect() retorna o tamanho de um elemento e sua posição relativa ao viewport.
Fonte: Element.getBoundingClientRect() - APIs da Web | MDN

lembrando que a estilização aqui é apenas pra teste, nao precisa colocar o position semelhante no seu codigo.

<div id="main">
  <div class="box"></div>
  <div id="message">Scrola pra baixo pra ver a caixa</div>
</div>

#main {
  position: relative;
  height: 1500px;
}

.box {
  border: 1px solid #666;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 506px;
}

#message {
  position: fixed;
  top: 0;
  background: #fff;
}

function isInViewport(el) {
    const rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)

    );
}

//box é nosso elemento alvo, queremos saber se ele ta na tela ou nao
const box = document.querySelector('.box');

//apenas um feedback visual do que tá rolando
const message = document.querySelector('#message');

document.addEventListener('scroll', function () {
    //se box estiver dentro do nosso viewport ele vai mudar o texto de #message
    const messageText = isInViewport(box) ?
        'a caixa ta visivel no viewport' :
        'epa, cade a caixa?';

    message.textContent = messageText;

}, {
    passive: true
});

demo

Aí vc pode aplicar a lógica de dar play no video sempre que o componente estiver em tela, fora isso vc mostra uma img como cover, ou sei lá, aí depende de vc

3 curtidas
#4

Consegui encontrar uma maneira de pausar e iniciar. Estou buscando como reiniciar o vídeo ao scrollar, por enquanto apenas pausa.
Segue o código:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="myVid" width="100%" muted controls autoplay>
  <source type="video/mp4" src="http://html5demos.com/assets/dizzy.mp4">
</video>

var myvid = $('#myVid')[0];
$(window).scroll(function(){
  var scroll = $(this).scrollTop();
  scroll > 70 ? myvid.pause() : myvid.play()
})

Exemplo:

Obrigado pela sua resposta, me guiou por aqui.

#5

Troquei

myvid.pause()

por

myvid.load()

Obrigado a todos.

#6

Boa!

Por enquanto o seu código deve estar pequeno, mas quando for crescendo o problema pode ocorrer, sempre evite usar o var, quando vc declara com var consegue utiliza-lo fora do seu escopo.

O ideal é usar o let, que vai se manter sempre naquele escopo e nao vai respingar pra fora.

Um pouco sobre o assunto:
Javascript: qual a diferença entre VAR e LET? - { Dicas de Javascript }.

2 curtidas