Программирование HTML Снегопад на Web-странице Thu, June 22 2017  

Поделиться

нашли опечатку?

Пожалуйста, сообщите об этом - просто выделите ошибочное слово или фразу и нажмите Shift Enter.


Снегопад на Web-странице Печать
Добавил(а) Vels   

Когда наступают новогодние праздники, хочется дарить новогоднее настроение себе, своим близким, друзьям и незнакомым людям. Этому доброму делу может послужить снегопад на странице сайта, который реализуется на языке JavaScript. В статье рассмотрен пример создания странички с таким эффектом на примере использования программы WYSIWYG Web Builder 5.5 rus и CMS Joomla.

WYSIWYG Web Builder - программа для создания веб-страниц, которая автоматически создает HTML-код, в то время, как Вы просто размещаете объекты, т.е. знание HTML от вас совершенно не требуется. Просто перетащите необходимые объекты в любое место страницы. После этого останется только закачать получившиеся файлы на сервер (по протоколу ftp, например), с помощью встроенного инструмента "Публикация" (добавлю от себя, что лучше не пользоваться публикацией, а только экспортом, если у Вас нет лицензии). Программа имеет практически все возможности MS Frontpage, но содержит значительно больше инструментов для работы с объектами (изображения, текст, таблицы и т.д.). Для того, чтобы на страничке начали падать снежинки, нужно установить в неё скрипт Snow Effect (это один из множества доступных для установки скриптов).

[WYSIWYG Web Builder]

Итак, процесс по шагам:

1. Делаем новый веб сайт или открываем имеющийся.
2. Выбираем в меню Вставка -> Дополнительно -> использовать готовый java script.
3. Указываем название скрипта Snow Effect, вставляем в страницу.

Имеется единственная настройка этого скрипта, в которой Вы можете вставить любую картинку на ваш выбор - вместо предлагаемой снежинки.

Если у Вас нет скрипта Snow Effect, его можно поискать на страничке автора [1], или скачать здесь.

[Joomla]

В этой системе вставка JavaScript в код статьи стандартными средствами - с использованием встроенных в эту систему визуальных редакторов HTML – проблематична, поскольку эти редакторы вырезают, либо портят код в тегах < script></script>. Такое поведение абсолютно правильное с точки зрения безопасности – чтобы авторы статей не могли простыми методами добавить в статью вредоносный код. Однако обойти проблему можно, если у пользователя, от имени которого вставляем JavaScript, отключить визуальный редактор. Лучше всего это сделать у суперпользователя admin, и именно под этим пользователем добавлять код JavaScript.

Если мы хотим, чтобы снегопад был на всех страницах, то необходимо скрипт Snow Effect добавить в любой модуль, который выводится на всех страницах (например, рекламный). Если мы хотим, чтобы снежинки падали только на определенной странице (например, на главной), то необходимо добавить JavaScript Snow Effect только в соответствующую статью (которая отображается на главной странице). В этом примере я рассмотрю добавление скрипта в модуль. Начнем:

1. Отключаем у пользователя admin визуальный редактор. Логинимся под логином admin в панель управления, идем в раздел Пользователи, выбираем пользователя Администратор, заходим в редактирование его параметров и в выпадающем списке, где выбирается редактор, выбираем «Нет визуального редактора». Сохраняем установки.

2. Вставляем код скрипта в модуль. Заходим в раздел Модули сайта, выбираем понравившийся модуль (например, отображающийся на всех страницах в левой полосе - Реклама), заходим в его редактирование, в HTML-редакторе, где правится код модуля, методом copy-paste вставляем код скрипта Snow Effect, ограниченный тегами < script>. Сохраняем модуль.

3. В доступное для скрипта место кладем картинку снежинки snow.gif (полный путь до картинки, включающий название файла, указан в коде скрипта). По умолчанию это корневой каталог сайта.

В заключение хочу добавить, что эффект падающих снежинок в окне Internet Explorer сильно загружает процессор. Увы, красота требует жертв!..

[Ссылки]

1. Welcome to JavaScript program JSnow v0.2 site:altan.hr.

 

Добавить комментарий


Защитный код
Обновить

Top of Page