Как реализовать такое?
Здраствуйте!Нужно реализовать такое,есть примеры?
http://www.fyi.tv/ при скроле хеадер менят цвет,как это сделать? нашел такую,но цвет меняется быстро http://www.webdesignerdepot.com/2014...s3-and-jquery/ это скрипт который я скачал,теперь как сделать чтоб при скроле цвет менялся плавно? header{ position: fixed; width: 100%; text-align: center; font-size: 72px; line-height: 108px; height: 108px; background: #335C7D; color: #fff; font-family: 'PT Sans', sans-serif; text-align: left; // set animation -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } header.sticky { font-size: 24px; line-height: 48px; height: 48px; background: #efc47D; text-align: left; padding-left: 20px; } </style> </head> <body> <!-- our markup --> <header><h1>Sticky Header</h1></header> <!-- an image for demonstration purposes --> <img src="bg.jpeg" width="100%" height="2000" alt="Big Image"/> <!-- import jQuery --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <!-- write script to toggle class on scroll --> <script> $(window).scroll(function() { if ($(this).scrollTop() > 1){ $('header').addClass("sticky"); } else{ $('header').removeClass("sticky"); } }); |
dan4o, ну а это 0.4s тебе ни о чем не говорит?
|
извините,спасибо большое))))))))))))(
|
а как сделать кроссбраузерным?тестил на опере и експлорер не работает.а в остальных работает отл
|
dan4o, хз что тебе надо.
|
смысле?
|
|
Часовой пояс GMT +3, время: 13:00. |