Banner flutuante que acompanha a barra de rolagem em 5 minutos

Avião com banner flutuante
  • 17 de out de 2014
  • 21923 Visualizações
  • 33 Comentários

Tudo o que é simples e objetivo dispensa maiores comentários, então vamos ao que interessa:

Código HTML

<div id="float-banner" class="float-banner"><img src="banner.gif"></div>

Eu coloquei uma classe "float-banner" e o ID também "float-banner", mas fique atento, pois ambos possuem objetivos diferentes. 

Basicamente, a classe é atrelada ao estilo do CSS, e o ID é o identificador do elemento para que o jQuery reconheça-o com melhor performance.

Então, aqui está o código CSS

.float-banner {
    position: absolute;
    left: 50%;
    width: 200px; height: 200px;
    margin-top: 200px; margin-left: -200px;
}

Importante destacar o uso do position, left e margin-left. A combinação dessas propriedades faz com que seu banner apareça sempre centralizado na tela.

E, finalmente, o código jQuery/Javascript

jQuery(document).ready(function() {
    $(window).scroll(function () {
        set = $(document).scrollTop()+"px";
        jQuery('#float-banner').animate(
            {top:set},
            {duration:1000, queue:false}
        );
    });
});

Simples não?

TAGS: jquery, banner, banner flutuante, tiagomatosweb

Deixe um comentário


33 Comentários

    • Fala Thiago, inserir esse código num site que ainda não está on line. Acontece que o botão fechar não funciona e para essa linha de código: {duration:1000, queue:false} quer dizer a duração que o banner fica flutuando? eu mudei pra "duration:1000" e ele não sumiu. como fazer pra colocar o botão sobre a imagem ?

      • Olá Junior,

        Não, o duration é a velocidade da animação. Se você quiser remover o banner automaticamente após X segundos você pode usar setTimeout.



        setTimeout(function() {

           jQuery('#float-banner').remove();

        }, 3000);



        Esse função vai ser executada após 3 segundos. Caso vcê queria aumentar o tempo é só amentar o número que é em milisegundos.



        Abs.

    • Olá Thiago. Consegui resolver a questão das sobreposiçoes da imagens! Mas preciso colocar um link na imagem e um link para fechar o banner! Poderia me ajudar? Grato desde já.

      • Você poderia usar <div id="float-banner" class="float-banner"><a href="meu-link"><img src="banner.gif"></a></div> para link na imagem.

        Você pode criar um outro link para fechar assim



        <div id="float-banner" class="float-banner">

        <a href="meu-link"><img src="banner.gif"></a>

        <a href="javascript:void(0)" id="close-banner">Close</a>

        </div> 



        e no jQuery



        $('#close-banner').on('click', function() {

        $('#float-banner').remove();

        });



        Não testei mas deve funcionar.



        Abs.

    • Olá, parabéns pelo blog! Uma dúvida, inseri na minha loja virtual, funcionou perfeitamente, só um pequeno detalhe: em alguns pontos aparece na frente das demais imagens e hora atrás. Como poderia corrigir esse detalhe, de forma que fique sempre na frente? Grato e sucesso.

    • Bom dia Tiago, tudo certo? Poderia me tirar uma dúvida? consigo adaptar este banner para que o mesmo apareça no momento que a página é carregada e não somente depois que o usuario desça com o scrool? Desde já muito obrigado.

      • Olá Vinícius blza?

        Esse banner aparece justamente quando a página é carregada e quando você da um scroll, ele flutua de acordo com o scroll.



        Abs

    • Olá. Gostaria de saber como faço para colocar um botão de fechar nesse script, poderia me ajudar? Obrigado.

      • Olá Vinicius, você pode usar uma ação no link e esconder o banner, algo do tipo:



        $('.my-link').on('click', function() {

          $
        ('#float-banner').hide();

        })

    • desculpa não entendi o primeiro código, onde eu aplico ele ?? obrigado

      • Olá Rubens, poderia ser mais específico em o que não entendeu? ABs.

    • Parabéns pelo empenho em colaborar com os iniciantes.

    • Olá, este codigo poderia ser usado para colocar um selo SSL flutuante no canto inferior direito de minha pagina? Pois pelo script fornecido pela certificadora ele fica sempre depois do footer na pagina. Grato.

      • Sim, certamente funcionaria! Basta vc colocar o código dentro da div do nosso script.

    • Tiago Boa tarde ,Por favor eu em um site de anuncio ele me pede para gerir um anuncio html , e colar em minha pagina ,plataforma do iluria , mas nao tenho informaçao nenhuma de onde colar Poderia me ajudar desde ja obrigado

      • Olá Luiz,

        Sim, posso ajudar mas não entendi exatamente o que precisa. Poderia explicar melhor?

    • Oi Tiago ! Estou inciando na Profissão, tenho me esforçado bastante, mas não consegui fazer funcionar seu Código. Também não localizei o erro destacado abaixo: "float-banner e no arquivo de CSS e JS está com #banner-float e .banner-float." Vc poderia divulgar novamente o Código com eventuais por inteiro, só para fazer um cola-copia. kkk Desculpe pedir isso, mas é que estou começando e tudo é difícil !

      • Olá Joaquin, siga os passos dos post e use tudo como float-banner e que irá funcionar. Se não conseguir, me avisa!

    • https://jsfiddle.net/9dy4c2ud/ o código esta assim até agora

      • Não identifiquei o element #float-banner2 presente no seu html.

    • amigo aqui não esta dando certo , a img aparece certo no canto direito mas ela não fica flutuante quando desço a pagina do meu site

    • Sensacional!!! Direto ao ponto, funcionou aqui, obrigada por compartilhar o seu conhecimento!

      • Valeu Camila! Bom saber que esse post ajudou em algo! Apareça e compartilhe o seu.

    • Olá Tiago, Existem um erro no artigo, o ID e CSS está com float-banner e no arquivo de CSS e JS está com #banner-float e .banner-float.

      • Caramba! Náo havia percebido isso Bruno. Vocë é cara, olho de águia! hahaha. Grande abraço e obrigado!

    • Eu não estou conseguindo fazer ele flutuar...
      fiz um arquivo .css com o comando css que você colocou acima!
      mas o script eu não sei como fazer...
      faço um arquivo .js ou coloco no corpo da pagina?
      obrigado desde já!

      • Opa Gabriel, o script você pode colocar na própria página, mas recomendo criar um arquivo .js e colocar lá dentro.

        Compartilha seu código no www.jsfiddle.net e aí vamos ver como está.

    • Parabéns muito bom. Tem como colocar sempre do lado direito, em vez de centrado.

      • Olá Segio, sim tem sim! O seu CSS deve ficar (nem testei, mas deve funcionar):

        .banner-float {

           position: absolute;

           width: 200px; height: 200px;

           margin-top: 200px; margin-right: 0px

        }

    • Olá, no caso, se eu quiser limitar para o banner flutuar entre 200 px no topo e 100 px no rodapé, teria como? tipo, ele nao subir mais que os 200 px do topo e os 100 da parte de baixo o que teria que mexer, tem ideia?

      • Sim, tem como você verifica isso pelo javascript fazendo uma verificação de quanto já rolou. Aí você compara com o valor que vc quer e decide se rola mais ou não!

      • Fabio Augusto Pinheiro
      • 27 de Jan de 2015
      • Responder

      Simples demais, me ajudou pra caramba e foi a forma mais correta e simples que encontrei pra resolver o que eu deseja para minha pagina, Grato demais, continue assim Tiago Matos.

      • Olá Fabio, obrigado meu caro! Bom saber que te ajudou de alguma forma! Apareça sempre!