![Украсьте елку сниппет для сайта](/uploads/posts/2023-12/1703430422_1.webp)
Я сделал предложение своей жене на третий день знакомства, и всю жизнь жалел лишь о двух потерянных днях...
13-ноября-2022, 20:16 439 0
Скоро, скоро Новый год и Рождество или наоборот. Но всё уже готовятся к этим праздникам. Вебмастера тоже не исключение. И каждый веб-мастер стремится украсить свой блог. Будь то снег , красивая метель или гирлянда. В отличие от прошлых опубликованных сниппетов гирлянд, данная анимированная гирлянда использует для работы по мимо CSS, ещё и скрипты. Суть заключается в использовании картинки в формате PNG и скрипта, который показывает данную картинку частями. Давайте приступим к установке:
HTML
<div id="garland" class="garland_4"><div id="nums_1">1</div></div><div style="position:absolute;top:-1000px"></div>
CSS
<style type="text/css">
#garland {position:absolute;top:0;left:0;background-image:url('https://lenger.kz/uploads/web/christmas-lights.png');height:36px;width:100%;overflow:hidden;z-index:99}
#nums_1 {padding:100px}
.garland_1 {background-position: 0 0}
.garland_2 {background-position: 0 -36px}
.garland_3 {background-position: 0 -72px}
.garland_4 {background-position: 0 -108px}
</style>
JS
<script type="text/jаvascript">
function garland() {
nums = document.getElementById('nums_1').innerHTML
if(nums == 1) {document.getElementById('garland').className='garland_1';document.getElementById('nums_1').innerHTML='2'}
if(nums == 2) {document.getElementById('garland').className='garland_2';document.getElementById('nums_1').innerHTML='3'}
if(nums == 3) {document.getElementById('garland').className='garland_3';document.getElementById('nums_1').innerHTML='4'}
if(nums == 4) {document.getElementById('garland').className='garland_4';document.getElementById('nums_1').innerHTML='1'}
}
setInterval(function(){garland()}, 600)
</script>
CSS
#gir {
position:fixed;
top:0;
left:0;
background-image:url('https://lenger.kz/uploads/web/christmas-lights.png
');
height:36px;
width:100%;
overflow:hidden;
z-index:99
}
#nums_1 {padding:100px}
.gir_1 {background-position: 0 0}
.gir_2 {background-position: 0 -36px}
.gir_3 {background-position: 0 -72px}
Свойство position:fixed заставляет гирлянду прикрепиться к верней части окна.
JS
function gir() {
nums = document.getElementById('nums_1').innerHTML
if(nums == 1) {document.getElementById('gir').className='gir_1';document.getElementById('nums_1').innerHTML='2'}
if(nums == 2) {document.getElementById('gir').className='gir_2';document.getElementById('nums_1').innerHTML='3'}
if(nums == 3) {document.getElementById('gir').className='gir_3';document.getElementById('nums_1').innerHTML='1'}
}
setInterval(function(){gir()}, 500)
Скорость мерцания устанавливается параметром setInterval
Вот в принципе и всё, в итоге получаем простую, красивую анимированную гирлянду на сайт. Всех с наступающими зимними праздниками!!!