Alterar gradualmente a cor

StackOverflow https://stackoverflow.com/questions/1750380

Pergunta

Como o logotipo no canto superior esquerdo da tela muda gradualmente a cor como uma rolagem? Eu acho que está feito no jQuery. Se você não sabe o código, pode me indicar um tutorial que pode? Obrigado.

http://www.shopdev.co.uk/blog/

ATUALIZAÇÃO: Obrigado a todos, eu publiquei uma versão funcional do código abaixo,

<html>

    <head>            

        <script type="text/javascript" src="jquery.js"></script>

        <script type="text/javascript">

            $(document).ready(function(){

                // load the logo transition
                $("#logo span").css("opacity","0");
                $("#logo span").css("display","block");
                // logo animation
                $("#logo").hover(function() {
                    $("#logo span").stop().animate({opacity:1},'slow');
                }, function() {
                    $("#logo span").stop().animate({opacity:0},'slow');
                });


            });

        </script>

        <style type="text/css">
            #logo span{
                background: url(logo2.gif) no-repeat scroll center bottom;
                width:257px;
                height:75px;
                position:absolute;
            }
            img{
                border:0;
            }
        </style>

    </head>

    <body>

        <div id="logo"><a href="#"><span></span><img src="logo.gif"/></a></div>

    </body>

</html>
Foi útil?

Solução

Você tentou olhar para o código -fonte para a página? É uma mudança de opacidade.

// load the logo transition
$("#logo span").css("opacity","0");
$("#logo span").css("display","block");
// logo animation
$("#logo").hover(function() {
    $("#logo span").stop().animate({opacity:1},'slow');
}, function() {
    $("#logo span").stop().animate({opacity:0},'slow');
});

Portanto, uma imagem sobre outra imagem, com a frente entrando e saindo gradualmente. Não é uma mudança de cor.

Observe o aviso acima do código:

// whoah there...  This source code is copyright ShopDev.  By all means, use this website as a source of inspiration - just don't plagiarize! //

Outras dicas

Defina a imagem azul como o fundo da div. Adicione a imagem vermelha na div como uma imagem normal para que ela cubra a imagem em segundo plano. Você pode colocá -lo em um período. No mouse, você altera a opacidade da imagem vermelha para que a imagem azul seja exibida. Isso é fácil de animar no jQuery. No MouseOut, faça o oposto.

Clique com o botão direito do mouse na página e clique em "Exibir fonte". Sua resposta está no bloco JavaScript nas 40 primeiras linhas do arquivo. (Sua suposição de jQuery está correta)

Tem duas imagens de logotipo. um azul vermelho. O vermelho é mostrado por padrão. A imagem do logotipo tem uma extensão de irmãos e sua imagem em segundo plano é o logotipo azul. Span tem uma opacidade de 0. Quando o mouse sobre a opacidade do span é gradualmente muda para 1

Provavelmente duas imagens que estão "desbotadas" com opacidade do CSS. Quando um é de opacidade máxima, o outro tem o mínimo. A transição é tornada minha opacidade crescente e abaixando outra

Nosredna está correto, mas se você quer algo mais simples que possa usar sem ser atacado pelo plágio;

Primeiro, você precisará de um PNG de 24 bits ou uma imagem GIF com uma parte transparente - o exemplo possui líquido transparente.

Certifique-se de incluir jQuery, jQuery-ui (porque ele adiciona CSS Background Color Animation) e seu efeito de pairar da imagem

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(function(){

        $("#logo")
            .css({"backgroundColor: "#fff"})
            .hover(function() {
               $(this).stop().animate({backgroundColor: "#f00"}, 'slow');
            }, function() {
               $(this).stop().animate({backgroundColor: "#fff"}, 'slow');
            });

    });
</script>

Então no corpo cair na sua imagem com o ID correto

<img src="mylogo.png" id="logo" width="100" height="100" />
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top