Анимация

[typus]

Приветствую, хочу сделать одну фишку, но знаний маловато, объясню на примере, что я хотел бы.
Вот Для просмотра ссылки Войди или Зарегистрируйся - в process - реализована анимация по скрллу - иконки появляются и изчезают, и линия утолщается.
Я бы хотел очень похожее, например, чтобы иконки были черно-белыми, или в виде контуров, и по скроллу заполнялись бы цветом. Т.е. у меня есть несколько контурных рисунков, по скроллу хотелось бы плавно заменить их на цветные. Где то подобное конечно видел, но сходу не могу найти что то..
В примере все это реализовано на js+ccs3, хотелось бы по возможности не выходить за эти рамки...

 

[ZiX]

Приветствую, хочу сделать одну фишку, но знаний маловато, объясню на примере, что я хотел бы.
Вот Для просмотра ссылки Войди или Зарегистрируйся - в process - реализована анимация по скрллу - иконки появляются и изчезают, и линия утолщается.
Я бы хотел очень похожее, например, чтобы иконки были черно-белыми, или в виде контуров, и по скроллу заполнялись бы цветом. Т.е. у меня есть несколько контурных рисунков, по скроллу хотелось бы плавно заменить их на цветные. Где то подобное конечно видел, но сходу не могу найти что то..
В примере все это реализовано на js+ccs3, хотелось бы по возможности не выходить за эти рамки...

Посмотрите jquery waypoint, кажется он там используется.

 

[Solus_Rex]

Я бы хотел очень похожее, например, чтобы иконки были черно-белыми, или в виде контуров, и по скроллу заполнялись бы цветом. Т.е. у меня есть несколько контурных рисунков,

Есть у меня ощущение, что это можно сделать просто стилями, без скриптов.
Что-нибудь вроде этого:
Для просмотра ссылки Войди или Зарегистрируйся
Можно и как-нибудь поизящнее.

 

[typus]

Есть у меня ощущение, что это можно сделать просто стилями, без скриптов.
Что-нибудь вроде этого:
Для просмотра ссылки Войди или Зарегистрируйся
Можно и как-нибудь поизящнее.

спасибо, возможно, как то похоже - в примере фиксированный png-объект, фон под ним соотв-но при скролле меняется.
У меня же объекты не фиксированные, и фон весь не меняется, только заполнить (любым эффектом) объект.
Может быть, что то с параллаксом...

Посмотрите jquery waypoint, кажется он там используется.

спасибо, гляну.

 

[Absolute]

Я бы хотел очень похожее, например, чтобы иконки были черно-белыми, или в виде контуров, и по скроллу заполнялись бы цветом.

Как-то так?
Для просмотра ссылки Войди или Зарегистрируйся

 

[Solus_Rex]

Как-то так?
Для просмотра ссылки Войди или Зарегистрируйся

А как сделать чтобы при скролле вверх обратно всё верталось?
может присваивать z-index, а не задавать его жёстко?

 

[Absolute]

А как сделать чтобы при скролле вверх обратно всё верталось?

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 - просто для подстраховки, чтобы браузер точно знал какой слой ставить вверх, а какой вниз.

 

[typus]

Как-то так?
Для просмотра ссылки Войди или Зарегистрируйся

Да, как то так, спасибо - в ближайшее время протестирую со своими рисунками )

 

[typus]

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. добавил эффект в свой проект, вот еще какой вопрос возник - как сделать небольшую задержку в выполнении скрипта? Дело в том, что в проекте по данным рисункам уже отрабатываются скрипты - выезд слева и справа, в принципе, конфликтов нет, все скрипты отрабатывают нормально, но получается что как бы одновременно, и эффект от смены картинки несколько теряется, так как практичкски он отрабатывает в момент, когда картинка в самом низу экрана. Т.е. первой картинки - пустой или ч.б., практически не видно. Хотелось бы чтобы смена происходила ну где то в центре экрана. Пробовал добавить время для скрипта, в принципе, лучше, но хотелось бы усилить эффект такой задержкой. Или довести до ума возврат в первой картинке при обратном скролле.
А так все чудно получается...

 

[Absolute]

не получается таким образом корректно вернуть первую картинку при обратном скролле - начинает моргать между первой и второй картинкой.

В каком браузере?

А в остальном вроде работает...
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');
}
});

Это если контейнер лежит где-то внизу.