Кто-нибудь знает, как добиться эффекта плавного изменения цвета фона, как в логотипе заголовка life.com ?
Я бы рекомендовал использовать метод анимации JQuery UI.Это позволяет вам изменять свойства CSS, такие как фон, в течение определенного периода времени.См. http://jqueryui.com/demos/animate/ для получения дополнительной информации.
вот вам тот же эффект:
<head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { spectrum(255, 255, 255); }); function spectrum(i, j , k){ var hue = 'rgb(' + i + ',' + j + ',' + k + ')'; $('body').css( { backgroundColor: hue }); var i = i-1; if(i < 1) { var j = j-1; } if(j < 1) { var k = k-1; } if(k < 1) { var i = 255; var j = 255; var k = 255;} setTimeout ( "spectrum(" + i +"," + j + "," + k + ")", 100 ); } </script> </head> </body> </html>
Они используют javascript для периодического изменения цвета фона div, содержащего изображение логотипа.
Попробуйте это с помощью jquery:
<head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { setInterval ( "spectrum()", 1000 ); }); function spectrum(){ var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')'; $('body').css( { backgroundColor: hue }); } </script> </head> </body> </html>
Вы хотели бы использовать что-то вроде hover fade redux .