Jump to content
  • Sign Up

Alguém sabe como criar o efeito de "andar pela imagem"?


Recommended Posts

Saber não sei, mas sei que é possível com JS e CSS e Html.

 

Primeiro tem que ver como colocar uma imagem numa área, mas que ela não seja expandida nem reduzida.

Sendo a área menor que a imagem, aparece então só um pedaço da imagem, ocupando toda a área.

Esse pedaço tem parâmetros para definir o deslocamento na área.

 

Ao alterar estes parâmetros a imagem parece se deslocar.

 

Mas tem que alterar os parâmetros dentro de um loop e ainda dar um tempinho entre cada frame.

Caso contrário aparecerá tão rápido que veremos apenas duas imagens a inicial e a final.

 

Então teria que pesquisar essas tecnologias e em conjunto conseguirá o resultado.

1) Imagem dentro de uma área, sem expandir ou reduzir.

2) Como setar os parâmetros de posição desta imagem dentro da área.

3) Loop em e temporização em JS.

Talvez seja necessário dar um refresh.. a cada frame.. aí só fazendo e testando pra ver se precisa

Link to comment
Share on other sites

Nao sei entendi bem o que você esta perguntando, se você se refere ao "efeito de transição" de "slides" que acontece na mudança dos quadros em que aparece as bandeira e a inscrição "jul 1941" para o quadro em que aparece a foto de Isuruko Yamamoto... se levamos em consideração que o o videomaker vez no After Effects(eu faria lá), basta animar os quadro em que aparecer as bandeiras em uma "comp" e o quadro da foto do militar em outra "comp", em uma terceira "comp" animaria a transição entre as duas, aqui vale lembrar que existe diversos modo de fazer isso no After, desde animar manualmente a posição das "comp" ligadas a um "nulo" ou usar uma transição totalmente automatizada! O borrado q você ver é simplesmente ligando o "motion blur" na hora de render a "comp" final.

Link to comment
Share on other sites

  • 2 weeks later...
Em 30/08/2019 às 12:45, Xeviousbr disse:

Saber não sei, mas sei que é possível com JS e CSS e Html.

 

Primeiro tem que ver como colocar uma imagem numa área, mas que ela não seja expandida nem reduzida.

Sendo a área menor que a imagem, aparece então só um pedaço da imagem, ocupando toda a área.

Esse pedaço tem parâmetros para definir o deslocamento na área.

 

Ao alterar estes parâmetros a imagem parece se deslocar.

 

Mas tem que alterar os parâmetros dentro de um loop e ainda dar um tempinho entre cada frame.

Caso contrário aparecerá tão rápido que veremos apenas duas imagens a inicial e a final.

 

Então teria que pesquisar essas tecnologias e em conjunto conseguirá o resultado.

1) Imagem dentro de uma área, sem expandir ou reduzir.

2) Como setar os parâmetros de posição desta imagem dentro da área.

3) Loop em e temporização em JS.

Talvez seja necessário dar um refresh.. a cada frame.. aí só fazendo e testando pra ver se precisa

 

Em 30/08/2019 às 15:05, Nick_Boy 84 disse:

Nao sei entendi bem o que você esta perguntando, se você se refere ao "efeito de transição" de "slides" que acontece na mudança dos quadros em que aparece as bandeira e a inscrição "jul 1941" para o quadro em que aparece a foto de Isuruko Yamamoto... se levamos em consideração que o o videomaker vez no After Effects(eu faria lá), basta animar os quadro em que aparecer as bandeiras em uma "comp" e o quadro da foto do militar em outra "comp", em uma terceira "comp" animaria a transição entre as duas, aqui vale lembrar que existe diversos modo de fazer isso no After, desde animar manualmente a posição das "comp" ligadas a um "nulo" ou usar uma transição totalmente automatizada! O borrado q você ver é simplesmente ligando o "motion blur" na hora de render a "comp" final.

 

Valeu, eu consegui depois de muito custo achar um tutorial.

Agora algo mais simples que não sei, como faço o efeito de "colar" a imagem como nos 2:25 do mesmo vídeo? Eles usam um efeito que faz parecer que a imgem foi colada, da tropa japonesa

Link to comment
Share on other sites

Isso é mais simples ainda! rsrsr as "fitas" provavelmente são apenas um vetor exportando em .png com transparecia(canal alfa) não existe magica amigo, tudo é montando manualmente na "comp" do after. Posicione redimensionando os cartazes/clipes etc.. no espaço da "comp",  depois é só colocar as fitas .png com transparecia por cima. 

Link to comment
Share on other sites

  • 2 weeks later...
Em 16/09/2019 às 22:24, Nick_Boy 84 disse:

Isso é mais simples ainda! rsrsr as "fitas" provavelmente são apenas um vetor exportando em .png com transparecia(canal alfa) não existe magica amigo, tudo é montando manualmente na "comp" do after. Posicione redimensionando os cartazes/clipes etc.. no espaço da "comp",  depois é só colocar as fitas .png com transparecia por cima. 

Vixe, sou mais leigo do que imaginei rs Não faço ideia de como fazer isso, sera que tem tutorial? Pensei que era uma transição adicionada na imagm

Link to comment
Share on other sites

  • 2 weeks later...

Acho que esse aqui do artista Bruno Aun pode te ajudar. é antigo, mas você pode usar como ponto de partida para teus estudos. vale dizer que o canal ta cheio de tutoriais. A tempos, era uma das poucas fontes de after effects em português br.

 

  • Curtir 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Create New...

Redes-Wi-Fi-capa-3d-newsletter.png

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!