Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!
Подобные просьбы и вопросы - будут игнорироваться!
Летучие мыши на Хэллоуин, летающие по странице веб-сайта, с помощью jQuery
Дата добавления: 12.10.2020 - 09:18
Категория: Хаки / Дополнения
Добавил: Buger
Количество просмотров: 202
Количество комментариев: 0
Размер файла: 12.7 Kb
Рейтинг материала: 5.0 / 1
БЕСПЛАТНО
рейтинг
5.0
/
голосов
1
Необычный плагин jQuery, разработанный для Хэллоуина, который отображает рой летучих мышей (или любые другие изображения), летающие по веб-странице.
Легко внедрять и настраивать. Летучие мыши анимированы с использованием техники Sprite Sheet Animation.
1. Загрузите пакет и подключите JavaScript halloween-bats.js после подключенной последней библиотеки jQuery на странице веб-сайта.
2. Инициализируем плагин и готово.
3. Заменяем изображение летучей мыши по умолчанию.
4. Затем настройте лист спрайтов соответствующим образом.
5. Настройка свойства z-index.
6. Определяем, где применить анимацию. По умолчанию: body.
Легко внедрять и настраивать. Летучие мыши анимированы с использованием техники Sprite Sheet Animation.
Как использовать:
1. Загрузите пакет и подключите JavaScript halloween-bats.js после подключенной последней библиотеки jQuery на странице веб-сайта.
Код
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/halloween-bats.js"></script>
<script src="/path/to/halloween-bats.js"></script>
2. Инициализируем плагин и готово.
Код
window.halloweenBats = $.halloweenBats({
// здесь опции
})
// здесь опции
})
3. Заменяем изображение летучей мыши по умолчанию.
Код
window.halloweenBats = $.halloweenBats({
image: 'bats.png'
});
image: 'bats.png'
});
4. Затем настройте лист спрайтов соответствующим образом.
Код
window.halloweenBats = $.halloweenBats({
// path to the image
image: 'bats.png',
// total amount of bats
amount: 5, // Bat amount.
// image width
width: 35,
// frame height
height: 20,
// total amount of frames
frames: 4,
// animation speed
speed: 20,
// Higher value = slower
flickering: 15
});
// path to the image
image: 'bats.png',
// total amount of bats
amount: 5, // Bat amount.
// image width
width: 35,
// frame height
height: 20,
// total amount of frames
frames: 4,
// animation speed
speed: 20,
// Higher value = slower
flickering: 15
});
5. Настройка свойства z-index.
Код
window.halloweenBats = $.halloweenBats({
zIndex: 10000
});
zIndex: 10000
});
6. Определяем, где применить анимацию. По умолчанию: body.
Код
window.halloweenBats = $.halloweenBats({
target: '#container'
});
target: '#container'
});
Поделись с друзьями:
