КОнтакты, предложения, отзывы

.rar или .zip
Вложение
Онлайн-чат
На этом сайте, вы найдёте полезную информацию, практические советы в области веб-программирования, веб-дизайна и веб-разработок в целом. Мы с удовольствием поделимся с вами реальными примерами и решениями задач, связанных с jQuery , JavaScript , PHP и MySQL , версткой сайтов , поможем разобраться новичкам с современными технологиями, такими как Ajax , HTML5 , CSS3 и многими другими.

jQuery создаём эффекты при скролле

Пару дней назад написал такой вот скрипт. Он не делает ничего из рада вон выдающегося, просто при скролле добавляет каждому выбранному элементу два класса, один основной, один рандомный из массива или убирает в зависимости от его положения на странице.

var objForAnim = {
  posts: $(".grid_box"),
  weelEvt: (/Firefox/i.test(navigator.userAgent)) ? 'DOMMouseScroll' : 'mousewheel',
  magicClasses: ['spaceInUp', 'spaceInRight', 'spaceInLeft', 'spaceInDown', 'swap', 'vanishIn', 'perspectiveDownRetourn', 'perspectiveUpRetourn', 'perspectiveLeftRetourn', 'perspectiveRightRetourn', 'slideUpRetourn', 'slideDownRetourn', 'slideLeftRetourn', 'slideRightRetourn'],
  getRandClass: function() {
    var arr = this.magicClasses,
      max = arr.length - 1,
      rand = Math.floor(Math.random() * (max + 1));
    return arr[rand];
  }
}

$(window).on(objForAnim.weelEvt, function(e) {
  var evt = e.originalEvent ? e.originalEvent : e,
    delta = evt.detail ? evt.detail * (-40) : evt.wheelDelta;

  objForAnim.posts.each(function() {
    var $this = $(this),
      randomClass = objForAnim.getRandClass();
    if (delta < 0) {
      if ($('body, html').scrollTop() + $(window).height() > $this.offset().top) {
        if (!$this.hasClass('magictime')) {
          $this.addClass('magictime ' + randomClass);
          $this.data('magicClass', randomClass);
        }
      }
    } else {
      if ($('body, html').scrollTop() < $this.offset().top) {
        $this.removeClass('magictime ' + $this.data('magicClass')).removeData('magicClass');
      }
    }
  });
});

А сама магия именно в этих двух css-классах и заключается,в которых описаны анимации magic.css Я выбрал подходящие классы и созздал из них массивчик. Дальше при прокртке колесом мыши вниз функция getRandClass берёт случайный класс и добавляет его элементу плюс добавляет основной класс, в котором описана длительность анимации и её fill-mode. При прокрутке вверх если элемент вышел из поля видимости, рандомный класс убирается, но остаётся основной, который не даст добавить ещё один рандомный класс при прокрутке вниз.

И тут внизапно меня посетила мысль сделать что-то красивое. Смотрим что получилось

changeLog

Плагин написан

2016.06.13
jpgjpg

Войдите или Зарегистрируйтесь чтобы оставить комментарий

Комментарии


    Яндекс.Метрика Яндекс.Метрика