29 декабря 2011 в 16:22
Заказчик захотел бегущую строку на сайте, горизонтальная смотрится не очень и раздражает мерцанием... Искал с вертикальной прокруткой и нашел http://lobach.info/develop/javascript/slideup-scroller/
Ниже пример как его адаптировать к друпал 7 (содержимое файлов 1.js и 1.css(дополнен) взято из ДЕМО)
Строки по очереди плавно поднимаются вверх, стоят около 4 секунд затем поднимается следующая (в строках можно использовать ссылки)
1. Создать простой блок. (запомнить его номер, написан в строке адреса при редактировании)
2. Зайти в файл темы и создать копию файла block.tpl.php, эту копию переименовать в block--block--X.tpl.php (X-номер вашего блока)
3. Очистить Кэш
4. В файл block--block--X.tpl.php добавить:
в самый верх
<?php drupal_add_css('sites/all/libraries/scroller/1.css'); ?>
<?php drupal_add_js('sites/all/libraries/scroller/1.js'); ?>перед выводом переменной $content:
<?php
$content = strip_tags($content, '<b><a><strong>'); //Оставить только нужные теги
$con_arr = explode ("*" , $content); // Создать массив путём разделения разделитель - *
for ($x=-1; $x < count($con_arr); $x++) { // Цикл по массиву $con_arr первая строка техничаская поэтому первый див пустой, начало с (-1)
@$con_out .= "<div>" . trim(str_replace(" ", '', $con_arr[$x])) . "</div>\r\n"; //Сформировать див, предварительно вырезав лишние пробелы
}
$content = '<div class="scroller"><div id="frame">'. $con_out .'</div></div>';
?>5. В папке sites/all нужно создать папку libraries а внутри нее scroller. В папку scroller закинуть файлы 1.css и 1.js
Теоретически все, теперь можно проверять
В блок как обычно добавляете текст, допустим 3 анонса... Добавляете, после окончания каждого анонса кроме последнего ставите символ *. Звездочка служит пометкой что анонс кончился следовательно все что после нее до следующего появления * другой анонс.
В итоге сам текст помещенный в блок должен выглядеть примерно так:
анонс1 анонс1 анонс 1* анонс2 анонс2 анонс 2* анонс3 анонс3 анонс3
PS Разделитель можно поставить на другой символ заменив * на вашь символ (пункт 4), колличество строк теоретически не ограничено
PPS Если нужно брать заголовки последних новостей и показывать их так же то проще поставить модуль вьювс слайдшоу,преимущество этого варианта в том что управляется вручную... Исходники во вложении.
С темизацией выглятит так:
| Вложение | Размер |
|---|---|
 Исходные файлы | 1.41 КБ |
 sample.png | 8.67 КБ |
Комментарии
А ты объяснил заказчику, что с точки зрения обычного посетителя, сайты, где все шевелится, переливается и двигается:
1. Обрабатываются AdBlock.
2. При неудаче 1-го больше не посещаются.
Реально, задалбывает анимация без запроса. То есть развернуть что-нибудь анимировано при клике мышой - это одно. Если все шевелится без твоего участия - это совсем другое и must be dead.
Сайт не коммерческий, пытался объяснить в их понимании сайт с анимацией "более живой и интерактивный", это совковое представление не переубедить...
Vlk ты еще не видел что у них было на старой версии сайта, marquee с его торможениями и непонятной скоростью на самом видном месте заглавными буквами...