Гирлянда для шапки сайта

Пример можно увидеть на этой странице

HTML:

<div class="gir_1" id="gir"></div>

1	<div class="gir_1" id="gir"></div>

CSS:

#gir {
	position: absolute;
	top: 0;
	left: 0;
	background-image:url('gir.png');
	height: 62px;
	width: 100%;
	overflow: hidden;
	z-index: 1;
	pointer-events: none
}  
.gir_1 {
	background-position: 0 0
}  
.gir_2 {
	background-position: 0 -62px
}  
.gir_3 {
	background-position: 0 -124px
}

#gir {

position: absolute;

top: 0;

left: 0;

background-image:url('gir.png');

height: 62px;

width: 100%;

overflow: hidden;

z-index: 1;

pointer-events: none

}

.gir_1 {

background-position: 0 0

}

.gir_2 {

background-position: 0 -62px

}

.gir_3 {

background-position: 0 -124px

}

Если вверху шапки достаточно места, то элемент с гирляндой можно зафиксировать, указав position: fixed; вместо position: absolute;.

В стиле используется картинка:

Скачать

JS:

function gir() {
	let nums = document.getElementById('gir').className; 
	if(nums == 'gir_1') {document.getElementById('gir').className='gir_2';}  
	if(nums == 'gir_2') {document.getElementById('gir').className='gir_3';}  
	if(nums == 'gir_3') {document.getElementById('gir').className='gir_1';} 
}  
setInterval(gir, 500);

function gir() {

let nums = document.getElementById('gir').className;

if(nums == 'gir_1') {document.getElementById('gir').className='gir_2';}

if(nums == 'gir_2') {document.getElementById('gir').className='gir_3';}

if(nums == 'gir_3') {document.getElementById('gir').className='gir_1';}

}

setInterval(gir, 500);

HTML:

CSS:

JS:

Смотрите также:

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