Como fazer uma mudança de página web de fotos com tempo

Um web designer feminina no trabalho em seu computador portátil

Se a sua página Web é maçante ou completamente cheio de imagens, você pode considerar armazenar suas imagens em uma apresentação de slides. Usando imagens dinâmicas que mudam ao longo do tempo pode adicionar interesse e aumentar o quanto você é capaz de mostrar com espaço limitado. Embora existam inúmeras abordagens para criar imagens dinâmicas dentro de uma página Web, talvez o mais simples é usando o simples coleção de métodos de codificação conhecidos coletivamente como HTML5.

A dinâmica Web

  • Hypertext Markup Language, ou HTML, é a língua original do World Wide Web. HTML consiste de marcação que descreve como um navegador exibirá o texto de uma página. As primeiras versões do HTML não permitem muito dinamismo ou interatividade dentro do navegador, mas isso mudou rapidamente como a Web evoluiu. Originalmente, os desenvolvedores exibido conteúdo dinâmico através de um software plug-in como Java Applets, Flash ou Silverlight, mas hoje a maioria dos navegadores pode nativamente lidar com HTML5, que é projetado com conteúdo dinâmico em mente. HTML5 é simplesmente uma combinação de marcas especializadas, um estilo e esquema de idioma abrangente chamado Cascading Style Scripts, e uma linguagem de script chamada de javascript que permite que o código seja executado em browsers.

A biblioteca jQuery



  • Para exibir a mudar as imagens em uma página da Web, você não precisa escrever um roteiro de animação completa a partir do zero. Existem várias bibliotecas que fazem animação simples de fazer. A biblioteca javascript mais comumente utilizado é chamado de JQuery. JQuery simplifica a sintaxe javascript e inclui muitas funções prontas, incluindo vários para animar imagens. Para usar a biblioteca jQuery, você pode baixar a biblioteca e hospedá-lo você mesmo ou você pode apontar para uma biblioteca que o Google hospeda para uso público. Basta incluir o seguinte em sua seção de cabeçalho HTML:

    Após a página é carregada, o script irá exibir cada uma das suas imagens, por sua vez. O atraso é definido pelo número de milissegundos na função setInterval perto do fim do script. Aqui, 5000 é o equivalente a cinco segundos.

Animações avançadas

  • Depois de entender os conceitos básicos de HTML5, você pode explorar mais animações previamente para dar seu slide mostrar mais flash ou polonês. Você pode escrever um script que desliza imagens através da página Web ou desaparece uma imagem em outra. Você pode permitir que seus usuários para parar a apresentação de slides, ou determinar a sua velocidade. Porque JQuery pode se referir a qualquer coisa na página, você pode até mesmo incluir texto em suas animações.

De esta maneira? Compartilhar em redes sociais:

LiveInternet