Para os desenvolvedores de sites, adicionar um efeito deslizante ou carrossel ao teor de exibição é uma necessidade muito comum. Existem tantos plug-ins de carrossel pagos e gratuitos. Muitos deles oferecem muitas opções de configuração úteis e efeitos dinâmicos.
Muitas vezes, se o seu projeto precisar de um carrossel leve, não requer muitos recursos. Ao mesmo tempo, seu projeto é usar o Bootstrap (a estrutura front-end de código aberto mais popular). Você pode consultar o componente oficial de bootstrap.
Este artigo mostrará como adicionar efeitos interessantes de animação ao bootstrap carousel. Ao mesmo tempo, verifique se esse componente JS é amplamente expandido e iniciado rapidamente.
Introdução ao Animate.css
Para fazer o efeito de animação que me escrevi digno de louvor, usei uma famosa biblioteca de animação CSS3 de código aberto, que é vividamente chamado Animate.css. Escrito por Dan Eden.
Este é o código que me permite focar na tarefa em questão, em vez de explicar as animações do CSS3.
Usando o Animate.css requer 2 etapas:
1. Introduce Animate.Min.css no documento HTML.
2. Adicione a classe animada YourChosenanimation aos elementos a serem animação na página da web.
Em seguida, você usa o nome da classe sobre as animações que você vê no site Animate.css para substituir a sua verificação.
Introdução ao componente de bootstrap carousel
O componente Bootstrap Carousel possui três partes principais.
--- O carrossel indica o número de páginas exibidas no slide , fornecendo ao usuário uma pista visual e fornecendo uma navegação deslizante.
--- Entrada de carrossel , uma classe chamada .Carousel-Inner, contida na borda externa. Representa cada controle deslizante independente. As imagens podem ser colocadas em cada imagem. Você também pode adicionar um título. Você também pode adicionar o nome da classe de captura de carrossel no elemento HTML. O Bootstrap terá seu próprio estilo. Podemos adicionar animações através desses elementos.
--- Finalmente, há a seta de controle de carrossel , que é a função que permite ao usuário deslizar para frente e para trás.
Para simplesmente exibir a demonstração, nenhuma imagem será adicionada. Concentre -se primeiro no quadro do carrossel como uma animação.
Construção de estrutura HTML
Aqui estão os que você precisa citar em seu projeto:
jQuery
CSS e JavaScript da Bootstrap
Animate.css
Uma folha de estilo e documentação JS.
Para acelerar o processo de desenvolvimento, os modelos e os arquivos necessários são referenciados no site oficial da Bootstrap.
Abaixo está o código de bootstrap carousel :
<div id = "Carousel-Exemplo-Genérico" Data-ride = "Carousel"> <!-Indicadores-> <ol> <li data-target = "#carousel-expleric-genérico" Data-slide-to = "0"> </li> <li data-taarget = "#carousel-expleric" Data-slide-to = " Data-Target = "#Carousel-Exemplo-Genérico" Data-Slide-to = "2"> </li> </ol> <!-Wrapper for Slides-> <div role = "ListBox"> <!-Primeiro slide-> <div> <d> <H3 Data-animation = "Animated Hateftfilt"> isto é a Caption 1 é a legenda para slide 1 </h3> <botão data-animation = "animado zoominup"> button </butut> </div> </div> <!-/.item-> <!-segundo slide-> <div> <div> <h3 data-animation = "animado bouncewnan"> </span> </h3 <h3 Esta é a legenda para slide 2 </h3> <botão data-animation = "animado zoominright"> button </button> </div> </div> <!-/.item-> <!-terceiro slide-> <div> <div> <h3 data-animation = "animated zoomftnleft"> <panath "</h3> h3 Legenda para slide 3 </h3> <botão data-animation = "lightspeedin"> button </button> </div> </div> <!-/.item-> </div> <!-/.Carousel-inner-> <!-controla-> <a href = "#carousel-expleric-genic" Role = "Data" aria-hidden = "true"> </span> <span> anterior </span> </a> <a href = "#carousel-expler-generic" role = "button" data-slide = "next"> <span Aria-hidden = "true"> </span> <span> span </span> </a> </div> <!-/.
Se o código acima não estiver errado, você verá um carrossel que pode ser executado ao abrir no navegador. Tudo acima não contém uma linha de código JavaScript. Se você não adicionar imagens,
Basta adicionar o valor da altura da minia de altura ao bloco de classe .Carousel .Item no documento CSS para impedir o colapso do carrossel.
Adicione um atributo de animação-Animação de dados aos elementos dentro do título do carrossel, usando esta biblioteca de animação especial como seu valor.
Se você deseja experimentar outras animações da biblioteca Animate.CSS, use o nome da classe de animação de sua escolha, em vez do valor da propriedade de animação de dados.
Utilizamos o valor do atributo de animação de dados no código JavaScript.
Embora um carrossel automático simples possa ser encontrado em alguns casos, temos mais controle sobre este caso.
Na primeira etapa, nessa direção, remova o valor de "carrossel" do elemento e inicialize o valor do atributo de rodovias de dados sem gravar nenhum código. No entanto, pretendemos usar o código JS para controlar o carrossel, portanto, essa propriedade de ré de dados é desnecessária.
Adicione o estilo CSS ao carrossel
Agora use sua criatividade para adicionar estilos ao título do carrossel, de acordo com suas preferências. As regras de estilo que vou escrever são demos que funcionam sem problemas.
Mais especificamente, aumentamos o controle das propriedades de atraso da animação. Defina quando cada animação iniciar (observe que, para demonstração simples, o prefixo do navegador é omitido)
.Carousel-Caption H3: Primeiro filho {Animação-Delay: 1s;}. Caption de carrossel H3: Nth-Child (2) {Animation-Delay: 2s;}. Botão de Caption Carousel {Animation-Delay: 3s;}No snippet de código acima, verifique se a animação do elemento começa de maneira ordenada. Outros efeitos podem ser feitos. Por exemplo, você pode selecionar os dois primeiros títulos para aparecer ao mesmo tempo. Depois, há o botão. Você pode decidir por si mesmo e se divertir.
Escreva o código jQuery:
Começamos a inicializar este carrossel e adicionar o código ao seu arquivo JavaScript personalizado:
var $ mycarousel = $ ('#carousel-expler-generic'); // Inicialize carousel $ mycarousel.carousel ();Criamos o carrossel dinamicamente e, em seguida, vamos resolver essa animação.
Para animar o título do primeiro slide, o script deve ser executado após o carregamento da página no navegador. A apresentação de slides subsequente entra em nosso campo de visão em animação e nosso código é executado no evento Slide.bs.carousel. Significando que o mesmo código é executado duas vezes: a página carrega uma vez e o evento Slide.bs.Carousel uma vez.
Como gostamos de seguir o princípio do não repetição, pretendemos encapsular nosso código nas funções e referenciá-las quando apropriado.
Código:
function doanimations (elems) {var animendev = 'webkitanimationend animationend'; elems.each (function () {var $ this = $ (this), $ animationType = $ this.data ('animação'); // Adicione as classes Annate.css a // os elementos a serem animados // remover «Classe.css. $ this.removeclass ($ animationType); FunctionDoNimations ($ FirstanImatingElems); // Faça uma pausa no carrossel $ mycarousel.carousel ('pausa'); // Anexe nossa função doanimations () ao slide de // serengsels.blesels.bresels.carousel Events $ myCarousel ('thebs.bs.Carousel', function (função) {) e selemels.sinEmels.Carousel.Carousel (slide./sinEmEnSels.AtiMELSEL.CAROUSEL.CAROUSEL (e selemEn.Ements.sinEmels. $ (e.RelatedTarget) .find ("[Animação de dados ^= 'animado']");Vamos analisar o código acima.
Veja a função Doanimations ()
As tarefas executadas por essa função doanimations () são as seguintes.
Começa por strings de cache que contêm o nome do evento AnimationEnd na variável. Este evento nos diz que você pode ter adivinhado quando cada animação termina. Precisamos de informações para este ponto, porque após o término de cada animação, removemos a classe Animate.css. Se não fizermos a remoção, o título do carrossel terá apenas uma animação uma vez, ou seja, apenas exibindo um slide específico no primeiro carrossel.
var animationEndEv = 'webkitanimationend animationend';
Em seguida, nossa função percorre cada elemento que queremos ter animação e obter o valor da propriedade da animação de dados. Pense no que é mencionado acima, esse valor contém a classe Animate.css que queremos adicionar ao elemento para que tenha um efeito de animação.
elems.each (function () {var $ this = $ (this), $ animationType = $ this.data ('animação'); // etc ...});Finalmente, a função DoanImations () aumenta dinamicamente cada elemento da classe Animate.css para executar a animação. Quando a animação termina, uma escuta de evento também é anexada. Após o término da animação, removemos a classe adicionada do Animate.css. Isso garante que o próximo carrossel esteja de volta à área atual. (Você tenta excluir este código e ver o que acontece)
$ this.addclass ($ animationType) .One (animendev, function () {$ this.RemoveClass ($ animationType);});A primeira animação do título
Quando a página é carregada no navegador, animamos o conteúdo no primeiro slide:
var $ FirstanimatingElems = $ mycarousel.find ('. Item: primeiro') .find ("[Data-animação ^= 'animado']"); doanimations ($ FirstAnimatingElems);Neste código, encontramos a primeira luz, queremos obter o valor do atributo de animação do título da animação usando a animação de dados. Em seguida, passamos a variável $ FirstanimatingElems como um parâmetro para a função Doanimations () e, em seguida, executamos a função.
Função de parada de carrossel
Quando o primeiro conteúdo da tela é executado, interrompemos essa função de carrossel.
$ mycarousel.carousel ('pausa');
Este é um recurso no qual o componente de bootstrap carousel impede a rotação constante. A rotação constante pode deixar os visitantes infelizes.
Nesse caso, recomendo garantir que o carrossel não faça um loop diretamente para a próxima luz até que todas as animações estejam em execução. Isso pode ser controlado definindo a opção "intervalo" no código de inicialização:
$ mycarousel.carousel ({interval: 4000});Na minha opinião, um título infinito de carrossel pula toda vez que o slide para a vista não é ideal.
Animação do título do slide do carrossel
As etapas descritas abaixo são necessárias para se tornar visível para o título de carrossel animado de cada slide.
Primeiro, adicionamos um ouvinte de evento no slide.bs.carousel.
O evento dispara imediatamente quando o método da instância do slide é chamado.
$ mycarousel.on ('slide.bs.carousel', function (e) {// faça coisas ...});Em seguida, selecionamos as luzes atuais e encontramos os elementos que queremos adicionar animações. O código a seguir usa a propriedade .relatedTarget do evento Slide.bs.carousel para vincular a animação.
var $ animatelems = $ (e.RelatedTarget) .find ("[Data-animação ^= 'animado']");
Finalmente, chamamos a função doanimations () e passamos $ animatingElems como um parâmetro.
doanimations ($ animatelems);
Se você ainda deseja aprender em profundidade, clique aqui para aprender e anexar dois tópicos interessantes a você: Bootstrap Learning Tutorial Bootstrap Tutorial Practical Tutorial
Maravilhoso compartilhamento de tópicos: jQuery Picture Carousel JavaScript Imagem Carousel Bootstrap Picture Carousel
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.