Первым делом
Прежде, чем перейти к танцам, поясню основную идею: я хочу добавить анимирование блоков при просмотре контента лендинга. Для этого есть куча готовых средств, и я воспользуюсь двумя - библиотекой и js-библиотекой , поскольку jquery и так у нас автоматом цепляется. Если в лендинге использовать стандартные блоки из доступных в Битрикс24, то мы запросто можем привязаться к конкретным стандартным классам, чтобы вызывать для них анимацию. Вот и вся сказка.
Теперь быль!
[spoiler]
Описываем блок, который будет добавлять анимацию на наши сайты:
$params = array( 'code' => 'vsm_animations', 'fields' => array( 'NAME' => 'Анимация контента', 'DESCRIPTION' => 'Анимация контента', 'SECTIONS' => 'other', 'PREVIEW' => 'https://www.bitrix24.ru/images/b24_screen.png', 'CONTENT' => ' <div class="landing-block landing-block-container animations-include"> Включить анимирование блоков </div>' ), 'manifest' => array( 'assets' => array( 'css' => array( 'https://xxx/landings/animate.css', 'https://xxx/landings/vsm_animate.css' ), 'js' => array( 'https://xxx/landings/vsm_animate.js', 'https://xxx/landings/jquery.viewportchecker.min.js' ) ), ), ); |
Самое важное в этом манифесте - это возможность прокинуть на лендинг внешние css и js файлы, что мы и делаем. Помимо готового animate.css, копаться в котором мы не будем ни за какие коврижки, посмотрим дополнительный vsm_animate.css. Он простой до безобразия:
.hidden{
opacity:0;
}
.visible{
opacity:1;
} |
function createAnimations () {
$('.animations-include').parent().addClass("hidden").height(0);
$('h1').addClass("hidden").viewportChecker({
classToRemove: 'hidden',
classToAdd: 'visible animated slideInUp',
offset: 50
});
$('h2').addClass("hidden").viewportChecker({
classToRemove: 'hidden',
classToAdd: 'visible animated slideInUp',
offset: 50
});
$('h3').addClass("hidden").viewportChecker({
classToRemove: 'hidden',
classToAdd: 'visible animated slideInUp',
offset: 50
});
$('.btn').addClass("hidden").viewportChecker({
classToRemove: 'hidden',
classToAdd: 'visible animated bounceInUp',
offset: 50
});
$('.landing-block-node-img').addClass("hidden").viewportChecker({
classToRemove: 'hidden',
classToAdd: 'visible animated fadeInRight',
offset: 50
});
$('.landing-block-node-text').addClass("hidden").viewportChecker({
classToRemove: 'hidden',
classToAdd: 'visible animated zoomIn',
offset: 50
});
}
;(function() {
BX(function() {
createAnimations();
});
})();
|
Регистрируем блок на нашем Битрикс24. Тут тоже ничего неожиданного, если вы не ленились смотреть вебинары про REST и про вебхуки в частности:
executeHook('landing.repo.register', $params);
function executeHook($method, $params) {
$queryUrl = 'https://xxx.bitrix24.ru/rest/yyy/zzzzzzzzzzzzz/'.$method.'.json';
$queryData = http_build_query($params);
$curl = curl_init();
curl_setopt_array($curl, array(
CURLOPT_SSL_VERIFYPEER => 0,
CURLOPT_POST => 1,
CURLOPT_HEADER => 0,
CURLOPT_RETURNTRANSFER => 1,
CURLOPT_URL => $queryUrl,
CURLOPT_POSTFIELDS => $queryData,
));
$result = curl_exec($curl);
curl_close($curl);
echo "<pre>";
print_r($result);
echo "</pre>";
return json_decode($result, true);
} |
Если все ок, идем в свой Битрикс24, открываем свой сайт и бросаем блок на нужную страницу:
публикуем и вот он, наш лендинг с анимацией:
