Анимация

Тема в разделе "JavaScript", создана пользователем typus, 12 май 2015.

Модераторы: ZiX
  1. typus

    typus

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

    ZiX Коддинг, Парсинг

    Moderator
    Регистр.:
    9 июл 2011
    Сообщения:
    1.390
    Симпатии:
    580
    Посмотрите jquery waypoint, кажется он там используется.
     
  3. Solus_Rex

    Solus_Rex

    Регистр.:
    15 янв 2012
    Сообщения:
    425
    Симпатии:
    181
    Есть у меня ощущение, что это можно сделать просто стилями, без скриптов.
    Что-нибудь вроде этого:
    Перейти по ссылке
    Можно и как-нибудь поизящнее.
     
  4. typus

    typus

    Регистр.:
    25 июл 2007
    Сообщения:
    645
    Симпатии:
    160
    спасибо, возможно, как то похоже - в примере фиксированный png-объект, фон под ним соотв-но при скролле меняется.
    У меня же объекты не фиксированные, и фон весь не меняется, только заполнить (любым эффектом) объект.
    Может быть, что то с параллаксом...

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

    Absolute Крокодил ;)

    Регистр.:
    9 авг 2009
    Сообщения:
    379
    Симпатии:
    192
    Как-то так?
    Перейти по ссылке

    :)
     
    typus и Solus_Rex нравится это.
  6. Solus_Rex

    Solus_Rex

    Регистр.:
    15 янв 2012
    Сообщения:
    425
    Симпатии:
    181
    А как сделать чтобы при скролле вверх обратно всё верталось?
    может присваивать z-index, а не задавать его жёстко?
     
    Последнее редактирование: 13 май 2015
  7. Absolute

    Absolute Крокодил ;)

    Регистр.:
    9 авг 2009
    Сообщения:
    379
    Симпатии:
    192
    Код:
    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 - просто для подстраховки, чтобы браузер точно знал какой слой ставить вверх, а какой вниз.
     
    Последнее редактирование: 13 май 2015
    typus и Solus_Rex нравится это.
  8. typus

    typus

    Регистр.:
    25 июл 2007
    Сообщения:
    645
    Симпатии:
    160
    Да, как то так, спасибо - в ближайшее время протестирую со своими рисунками )
     
  9. typus

    typus

    Регистр.:
    25 июл 2007
    Сообщения:
    645
    Симпатии:
    160
    не получается таким образом корректно вернуть первую картинку при обратном скролле - начинает моргать между первой и второй картинкой.
    А в остальном вроде работает...
    ps. добавил эффект в свой проект, вот еще какой вопрос возник - как сделать небольшую задержку в выполнении скрипта? Дело в том, что в проекте по данным рисункам уже отрабатываются скрипты - выезд слева и справа, в принципе, конфликтов нет, все скрипты отрабатывают нормально, но получается что как бы одновременно, и эффект от смены картинки несколько теряется, так как практичкски он отрабатывает в момент, когда картинка в самом низу экрана. Т.е. первой картинки - пустой или ч.б., практически не видно. Хотелось бы чтобы смена происходила ну где то в центре экрана. Пробовал добавить время для скрипта, в принципе, лучше, но хотелось бы усилить эффект такой задержкой. Или довести до ума возврат в первой картинке при обратном скролле.
    А так все чудно получается...
     
    Последнее редактирование: 19 май 2015
  10. Absolute

    Absolute Крокодил ;)

    Регистр.:
    9 авг 2009
    Сообщения:
    379
    Симпатии:
    192
    В каком браузере?
    Для появления например так:
    Код:
    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');
    }
    });
    Это если контейнер лежит где-то внизу.
     
    Последнее редактирование: 19 май 2015
    typus и Solus_Rex нравится это.