Анимация при скролле

Форум /

Привет, ребят! Никто не сталкивался с такой задачей: есть landing page состоящий из 5 блоков (height:100%, width:100%). Нужно трегирить события для каждого блока при его появлении, чтобы управлять анимацией (появился блок при скролле, плавно появился заголовок, при исчезновении - пропал, и т.д.). Подскажите, как это лучше реализовать (для каждого блока писать свой i-bem.js код или привязать все к общему блоку) , может кто-то уже делал подобное, ведь анимация сейчас в моде. Просьба сторонние библиотеки не предлаагать, только i-bem.js.

8 years ago

kompolom

Если я правильно понял задачу, то есть https://github.com/bem-contrib/bem-scrollspy

8 years ago

godfreyd

Вы автор? Круто. Правильно поняли. Сделал следующее. 1) В bower.json в зависимости добавил:

  "dependencies": {
"bem-components": "2.4.0",
 "bem-scrollspy": "0.1.6"
}

2) В make.js к уровням переопределения следующее:

 { path: 'libs/bem-scrollspy/common.blocks', check: false },

3) Далее две команды npm install и ./node_modules/.bin/enb make

4) Для проверки к одному из 5 блоков в index.bemjson примиксовал блок scrollspy

block: 'home',
mix: { block: 'scrollspy' },

5) В файле home.js

 modules.define('home', ['i-bem__dom'], function (provide, BEMDOM) {

provide(BEMDOM.decl(this.name, {
    onSetMod: {
        'js': {
            'inited': function () {

               var ss = this.findBlockOn('scrollspy');

              ss.on('scrollin', function() { this.setMod('animation', 'progress'); }, this);                  
              ss.on('scrollout', function() { this.setMod('animation', 'stop'); }, this); 

            }
        }
    },
  }));
   });

Не вижу модификаторов. Что не так?

8 years ago

kompolom

В зависимостях правильно прописали?

8 years ago

godfreyd

Вообще не сделал)))) Нужно что-то типа такого home.deps.js???

({
mustDeps: [
  {
    block: 'scrollspy'
  }
]
   })

8 years ago

godfreyd

Теперь сделал, все равно ничего.

8 years ago

kompolom

А в сборку попадает код из библиотеки, не проверяли?

8 years ago

godfreyd

Попадает. Если в home.js добавляю метод ss.setOffset(0); то сразу же появляется модификатор animation-progress.

8 years ago

kompolom

возможно событие 'scrollin' происходит до того как на него подписываетесь.

Чтобы оставлять комментарии, необходимо авторизоваться.