X
  • Дизайн та розробка сайту
  • Дизайн і створення сайтів. Розробка тем для WordPress. Створення Landing Page.
  • office@gnatkovsky.com.ua
  • @vgnat
  • Написати мені
Замовити послугу

Анимированный Flash кот на сайт

Приклад
  • 2024-03-28
  • 6043 переглядів

  • Дизайн та розробка сайту

Доброго времени суток. 🙂

Недавно наткнулся на одну интересную штуку в виде анимированного флеш котика, который реагирует на движение курсора. По своей сути штуковина бесполезная, но прикольная. Можно установить на свой сайт для развлечения посетителей и оживления дизайна сайта, если он соответствует такой анимации.

Анимированный Flash кот на сайт

То что получится у нас в итоге можно посмотреть в примере ниже или скачать. Единственное, о чем хочу предупредить сразу - так как котейка выполнен во Flash, в браузерах использующих движок Хромиум, возможна не работа анимации. Вместо нее Вам будет предлагаться включить анимацию. Лично у меня, как и у многих Flash - анимация в Хроме и в Опере включена уже давно, но вдруг у кого это не так, то будет выводится сообщение с просьбой включить.



Пример




Скачать


Пример сообщения из Opera .

СОобщение включит Флеш

Чтобы добавить такой блок себе на сайт, нужно сделать всего лишь несколько основных шагов. Для начала скачать архив с файлами, он доступен по кнопке выше. Залейте файлы на сайт, например туда, где лежат файлы страницы.

Теперь нужно, в зависимости от того, где вы хотите разместить котейку, добавить код вызова анимации. Открываете нужный вам файл и в его HTML код, добавляете следующие строки:

<div class="koteika">
<object type="application/x-shockwave-flash" data="kot.swf" allowfullscreen="true">
<param name="wmode" value="transparent" />
<embed src="kot.swf" />
<img src="koteika.png">
</object>
</div>

Тут все просто. Анимация подключается через object, но сперва он заключен в блок с классом - koteika. Это как бы контейнер, фоном которого является трава и он задает позиционирование объекта на странице.

Во второй и четвертой строке, идет подключение флеш файла с анимацией - kot.swf. В нашем случаи все файлы лежат в той же папки что и страница, если у вас, например, они будут лежать в разных, то путь нужно указать соответственно, например papka/kot.swf.

Также в пятой строке подключается картинка koteika.png, которая будет выводится в случаи если в браузере не разрешена Flash анимации. Как и kot.swf тут тоже нужно указывать правильный путь, если файлы лежат не в той же папке что и файл в который вы добавили наш HTML код.

Следующим шагом будет добавление стилей для корректного отображение нашего блока с травой и котейкой. Для этого в свой файл стилей нужно добавить вот такой код. Если вы не очень ориентируетесь в файле стилей и не знаете где и что за что отвечает, то просто добавьте код в его конец.

.koteika {
    width:500px;
    height:180px;
    position:absolute;
    z-index:1;
    left:50%;
    margin-left:-250px;
	background:url(green.png) no-repeat bottom;
}
.koteika object{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Стили можете править как угодно, в зависимости от вашей фантазии и потребностей. Можете заменить траву или вообще ее убрать, разместить анимацию в сайдбаре и тд, менять размеры блока, позиционирование и тд.

Как и писал в начале, это просто украшение для сайта и не больше. Сейчас уже Flash отходит на задний план и тот же движок Хромиум, что лежит в основе многих браузеров, часто по умолчании Flash не показывает. Все же, если Вы захотите, то всеравно можете установить себе эту анимацию на сайт.

На этом все, спасибо за внимание. 🙂

Якщо Вам була корисна моя праця, можете фінансово підтримати сайт або відключити блокувальник реклами, що займе 2 хвилини :)

Хочу підтримати фінансово Хочу відключити блокувальник

Оцініть статтю
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 5, в среднем: 5 из 5
Читайте також