Ir ao conteúdo
  • Cadastre-se
Diego M. Souza

Aparecer uma foto aos poucos

Recommended Posts

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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

Compartilhar este post


Link para o post
Compartilhar em outros sites

Compartilhar este post


Link para o post
Compartilhar em outros sites

Mano tu tem que achar um javascript que faz um show delay nos carregamentos de imagem, geralmente tem vários só pesquisar.

 

Eu baixo neste site o que eu não consigo fazer:

 

https://www.codigofonte.net/

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações 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

×