Анимация

typus

Мой дом здесь!
Регистрация
25 Июл 2007
Сообщения
895
Реакции
241
Приветствую, хочу сделать одну фишку, но знаний маловато, объясню на примере, что я хотел бы.
Вот Для просмотра ссылки Войди или Зарегистрируйся - в process - реализована анимация по скрллу - иконки появляются и изчезают, и линия утолщается.
Я бы хотел очень похожее, например, чтобы иконки были черно-белыми, или в виде контуров, и по скроллу заполнялись бы цветом. Т.е. у меня есть несколько контурных рисунков, по скроллу хотелось бы плавно заменить их на цветные. Где то подобное конечно видел, но сходу не могу найти что то..
В примере все это реализовано на js+ccs3, хотелось бы по возможности не выходить за эти рамки...
 
Приветствую, хочу сделать одну фишку, но знаний маловато, объясню на примере, что я хотел бы.
Вот Для просмотра ссылки Войди или Зарегистрируйся - в process - реализована анимация по скрллу - иконки появляются и изчезают, и линия утолщается.
Я бы хотел очень похожее, например, чтобы иконки были черно-белыми, или в виде контуров, и по скроллу заполнялись бы цветом. Т.е. у меня есть несколько контурных рисунков, по скроллу хотелось бы плавно заменить их на цветные. Где то подобное конечно видел, но сходу не могу найти что то..
В примере все это реализовано на js+ccs3, хотелось бы по возможности не выходить за эти рамки...
Посмотрите jquery waypoint, кажется он там используется.
 
Я бы хотел очень похожее, например, чтобы иконки были черно-белыми, или в виде контуров, и по скроллу заполнялись бы цветом. Т.е. у меня есть несколько контурных рисунков,
Есть у меня ощущение, что это можно сделать просто стилями, без скриптов.
Что-нибудь вроде этого:
Для просмотра ссылки Войди или Зарегистрируйся
Можно и как-нибудь поизящнее.
 
Есть у меня ощущение, что это можно сделать просто стилями, без скриптов.
Что-нибудь вроде этого:
Для просмотра ссылки Войди или Зарегистрируйся
Можно и как-нибудь поизящнее.
спасибо, возможно, как то похоже - в примере фиксированный png-объект, фон под ним соотв-но при скролле меняется.
У меня же объекты не фиксированные, и фон весь не меняется, только заполнить (любым эффектом) объект.
Может быть, что то с параллаксом...

Посмотрите jquery waypoint, кажется он там используется.
спасибо, гляну.
 
Последнее редактирование:
А как сделать чтобы при скролле вверх обратно всё верталось?
Код:
var tempScrollTop, currentScrollTop = 0;
$(window).scroll(function(){
currentScrollTop = $(window).scrollTop();
if (tempScrollTop < currentScrollTop ) {
$('.overdiv').fadeIn(750, 'swing');
}
else if (tempScrollTop > currentScrollTop ) {
$('.overdiv').fadeOut(750, 'swing');
}
tempScrollTop = currentScrollTop;            
                 });
может присваивать z-index, а не задавать его жёстко?
Зачем? z-index - просто для подстраховки, чтобы браузер точно знал какой слой ставить вверх, а какой вниз.
 
Последнее редактирование:
Код:
var tempScrollTop, currentScrollTop = 0;
$(window).scroll(function(){
currentScrollTop = $(window).scrollTop();
if (tempScrollTop < currentScrollTop ) {
$('.overdiv').fadeIn(750, 'swing');
}
else if (tempScrollTop > currentScrollTop ) {
$('.overdiv').fadeOut(750, 'swing');
}
tempScrollTop = currentScrollTop;          
                 });

не получается таким образом корректно вернуть первую картинку при обратном скролле - начинает моргать между первой и второй картинкой.
А в остальном вроде работает...
ps. добавил эффект в свой проект, вот еще какой вопрос возник - как сделать небольшую задержку в выполнении скрипта? Дело в том, что в проекте по данным рисункам уже отрабатываются скрипты - выезд слева и справа, в принципе, конфликтов нет, все скрипты отрабатывают нормально, но получается что как бы одновременно, и эффект от смены картинки несколько теряется, так как практичкски он отрабатывает в момент, когда картинка в самом низу экрана. Т.е. первой картинки - пустой или ч.б., практически не видно. Хотелось бы чтобы смена происходила ну где то в центре экрана. Пробовал добавить время для скрипта, в принципе, лучше, но хотелось бы усилить эффект такой задержкой. Или довести до ума возврат в первой картинке при обратном скролле.
А так все чудно получается...
 
Последнее редактирование:
не получается таким образом корректно вернуть первую картинку при обратном скролле - начинает моргать между первой и второй картинкой.
В каком браузере?
А в остальном вроде работает...
ps. добавил эффект в свой проект, вот еще какой вопрос возник - как сделать небольшую задержку в выполнении скрипта?
Для появления например так:
Код:
setTimeout(function() { $('.overdiv').fadeIn(750, 'swing'); }, 1500);
Здесь 1500 - время в миллисекундах. По прошествии этого времени функция будет выполнена. Для исчезания соответственно заменить fadeIn на fadeOut.
Хотелось бы чтобы смена происходила ну где то в центре экрана.
Так наверное как-то:
Код:
var contHeight = $('.underdiv').height()/2; // если с поправкой на высоту контейнера
var hfWin = $(window).height()/2-contHeight;
var offsetCont = 0;
$(window).scroll(function(){
offsetCont = $('.underdiv').offset().top -$(window).scrollTop();
if (hfWin > offsetCont) {
$('.overdiv').fadeIn(750, 'swing');
}
else if (hfWin < offsetCont) {
$('.overdiv').fadeOut(750, 'swing');
}
});
Это если контейнер лежит где-то внизу.
 
Последнее редактирование:
Назад
Сверху