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