Ir ao conteúdo
  • Cadastre-se

Aparecer uma foto aos poucos


Posts recomendados

Eai galera, sou novo aqui no fórum e preciso de uma ajuda. Essa é a parte superior do meu projeto de TCC, e eu quero fazer com que a imagem apareça aos poucos da esquerda para a direita, dando um efeito que as notas estão saindo da saxofone, sabe ? e eu não sei como eu posso fazer isso. Será que alguém poderia me ajudar ? Grato.

Capturar.PNG

Link para o comentário
Compartilhar em outros sites

  • Moderador

@Diego M. Souza Olá, seja bem vindo em nosso Fórum do Clube do Hardware.

Você tem N opções de como resolver isso!

 

1)editar a imagem separando nota por nota e criando um gif animado quadro a quadro.

2)Separar o bloco inteiro das notas e acrescentar um efeito de slide via jQuery. O bloco das notas precisa ser com fundo transparente, dá um trabalho para editar mas vale a pena.

3)Editar a imagem, retirando as notas e fazer elas aparecerem quadro a quadro via jQuery.

 

Ou usar o CSS animations que também dá certo!

 

Dessas aí, a segunda opção é a mais fácil. 

Para isso use o photoshop para separar o bloco de notas da imagem. Depois com estas duas imagens, você deixa uma estática e outra com efeito corrediço da esquerda para a direita.

Existem outros meios.. por exemplo animação com canvas, mas aí o nível de dificuldade é extremo.

Link para o comentário
Compartilhar em outros sites

  • Moderador

@Diego M. Souza o que quer  saber exatamente? Não tenho  muito o que falar. Basicamente você edita em qualquer programa de edição, o photoshop por exemplo, separa as notas do resto da imagem... trate as imagens se necessário que fique melhor visualmente.. depois é só por a mão na massa e aprender a fazer as animações via jQuery OU  CSS 3

Link para o comentário
Compartilhar em outros sites

  • Moderador
Link para o comentário
Compartilhar em outros sites

  • Moderador

@Diego M. Souza

Antes de fazer a sua animação, você precisa ter os recursos  para ela.

Como mencionei anteriormente. Para que dê certo a sua ideia primeiro tens que separar da imagem a parte que ficará em movimento. No caso as notas musicais.

 

Depois disso um dos segredos para que a sua imagem seja animada corretamente é utilizar no elemento "pai" o atributo overflow: hidden

 

veja este exemplo: http://codepen.io/mattiabericchia/pen/azNyBo

 

Faça o teste: Na classe .loader no css, retire a linha do atributo overflow para ver o que acontece.  

Já a animação em si,  você precisa estudar o uso de keyframes. 

Então como lição para o desenvolvimento do seu TCC, estude meticulosamente cada linha de código tanto da estrutura HTML quanto do CSS.

 

PS: Não é necessário intervenção do javascript, como citado pelo @Ebsturbius

Link para o comentário
Compartilhar em outros sites

  • Moderador

@Ebsturbius

3 minutos atrás, Ebsturbius disse:

É mais um código deste tamanho deu a mesma batata do Java :eek:

Não.

Pelo contrário. é menor. 

Ele só foi escrito linha por linha para melhor entendimento, mas é possível diminuir consideravelmente a quantidade de linhas escrita pelo CSS.   Além disso, é mais leve  e mais rápido que o javascript

 

PS: java é diferente de javascript, embora tenha "java" no meio. Não pode abreviar nem encurtar o nome. São duas linguagens completamente diferentes pois se você fala em java, logo pensa-se na linguagem java. Aquela que é interpretada por uma JVM.  Falo isso para que você não confunda e também não confundir os outros!

  • Curtir 2
Link para o comentário
Compartilhar em outros sites

Visitante
Este tópico está impedido de receber novas respostas.

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

×
×
  • Criar novo...