Глючный полосатый фон на CSS3 и jQuery

Разместил: Apocalypse
23 июля 2016

Неплохой пример того, как средствами CSS3 и jQuery можно реализовать глючный фон Для начала посмотрите ДЕМО Моё тестирование в редакторе: КЛИК Установка: 1#: В самый низ вашего CSS вставьте:

html,body{
background-color:#333;
height:100%;
overflow:hidden;
width:100%;
}

div.container {
background-color: #4c9ee8;
height: 100%;
margin: 0;
overflow: hidden;
position: relative;
top: 0;
left: 0;
width: 100%;
}

div.blocks {
transition: background-color 5s;
background-color: #4c9ee8;
display: block;
height: 100%;
position: relative;
width: 100%;
}

.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

.clearfix {
display: inline-block;
}

div.blocks div {
border: solid 4px #67b2f8;
border-width: 0 0 0 32px;
transition: background .9s, height 1s, width .8s;
background: transparent;
display: block;
float: left;
height: 50px;
margin: 0;
padding: 0;
width: 5%;
}

div.blocks div.lighten {
background: #6fb7f9;
width: 8%;
}

div.blocks div.darken {
background: #54a2ea;
height: 40%;
}

.bgLite {
background-color: #67b0f2 !important;
}

.randA {
color: #fff;
}

html,body{

background-color:#333;

height:100%;

overflow:hidden;

width:100%;

}

div.container {

background-color: #4c9ee8;

height: 100%;

margin: 0;

overflow: hidden;

position: relative;

top: 0;

left: 0;

width: 100%;

}

div.blocks {

transition: background-color 5s;

background-color: #4c9ee8;

display: block;

height: 100%;

position: relative;

width: 100%;

}

.clearfix:after {

content: ".";

display: block;

clear: both;

visibility: hidden;

line-height: 0;

height: 0;

}

.clearfix {

display: inline-block;

}

div.blocks div {

border: solid 4px #67b2f8;

border-width: 0 0 0 32px;

transition: background .9s, height 1s, width .8s;

background: transparent;

display: block;

float: left;

height: 50px;

margin: 0;

padding: 0;

width: 5%;

}

div.blocks div.lighten {

background: #6fb7f9;

width: 8%;

}

div.blocks div.darken {

background: #54a2ea;

height: 40%;

}

.bgLite {

background-color: #67b0f2 !important;

}

.randA {

color: #fff;

}

2#: HTML + jQuery коды примера:

<div class="container clearfix">
<div class="blocks"></div>  
</div>

<script>
var total = 400;

$(function() {
for (var i = 1; i < total; i++) {
$(".blocks").prepend('<div class="b' + i + '">');
}
});

function blockA() {
$(".blocks div").removeClass("lighten");
randNumA = Math.floor(Math.random() * total) + 1;
$(".randA").text(randNumA);
$(".blocks div.b" + randNumA).addClass("lighten");
}

function blockB() {
$(".blocks div").removeClass("lighten");
randNumB = Math.floor(Math.random() * total) + 1;
$(".blocks div.b" + randNumB).addClass("lighten");
}

function blockC() {
$(".blocks div").removeClass("darken");
randNumB = Math.floor(Math.random() * total) + 1;
$(".blocks div.b" + randNumB).addClass("darken");
}

function blockD() {
$(".blocks div").removeClass("darken");
randNumB = Math.floor(Math.random() * total) + 1;
$(".blocks div.b" + randNumB).addClass("darken");
}

var bgStatus = 1;

function backgroundShift() {
if (bgStatus === 1) {
$(".blocks").addClass("bgdivte");
bgStatus = 0;
} else {
$(".blocks").removeClass("bgdivte");
bgStatus = 1;
}
}

setInterval(function() {
backgroundShift();
}, 6000);

(function loopA() {
var rand = Math.round(Math.random() * (300 - 100)) + 100;
setTimeout(function() {
blockA();
blockB();
loopA();
}, rand);
}());

(function loopB() {
var rand = Math.round(Math.random() * (300 - 100)) + 100;
setTimeout(function() {
blockC();
blockD();
loopB();
}, rand);
}());
</script>

</div>

var total = 400;

$(function() {

for (var i = 1; i < total; i++) {

$(".blocks").prepend('<div class="b' + i + '">');

}

});

function blockA() {

$(".blocks div").removeClass("lighten");

randNumA = Math.floor(Math.random() * total) + 1;

$(".randA").text(randNumA);

$(".blocks div.b" + randNumA).addClass("lighten");

}

function blockB() {

$(".blocks div").removeClass("lighten");

randNumB = Math.floor(Math.random() * total) + 1;

$(".blocks div.b" + randNumB).addClass("lighten");

}

function blockC() {

$(".blocks div").removeClass("darken");

randNumB = Math.floor(Math.random() * total) + 1;

$(".blocks div.b" + randNumB).addClass("darken");

}

function blockD() {

$(".blocks div").removeClass("darken");

randNumB = Math.floor(Math.random() * total) + 1;

$(".blocks div.b" + randNumB).addClass("darken");

}

var bgStatus = 1;

function backgroundShift() {

if (bgStatus === 1) {

$(".blocks").addClass("bgdivte");

bgStatus = 0;

} else {

$(".blocks").removeClass("bgdivte");

bgStatus = 1;

}

setInterval(function() {

backgroundShift();

}, 6000);

(function loopA() {

var rand = Math.round(Math.random() * (300 - 100)) + 100;

setTimeout(function() {

blockA();

blockB();

loopA();

}, rand);

}());

(function loopB() {

var rand = Math.round(Math.random() * (300 - 100)) + 100;

setTimeout(function() {

blockC();

blockD();

loopB();

}, rand);

}());

</script>

Метки: Background CSS3 Glitch jQuery Lines Глюк Глючный Полосатый Фон

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Читайте также:

Вы точно не робот?

0 Комментарий

Межтекстовые Отзывы

Посмотреть все комментарии

fapalnaapo

@Al-Sher, но как я понимаю эта реклама подгружаеться в обход сайт или поверх сайта типо того

2023-04-20 22:03:09

Al-Sher

@fapalnaapo, не, ну поверх сайта она не может подгружаться. Если ток через плагины
юкоз по факту только свой js может вставлять, который изменяет твой html(ну или iframe)

2023-04-20 23:01:45

fapalnaapo

@Al-Sher, я раньше ее ломал эту рекламу через

.iframe{width: 0px;display:none; opacity: 0.0;
position: absolute;}

но с ней ломалась часть сайта, а теперь это не работает

2023-04-21 06:49:30

Apocalypse

@fapalnaapo, эх... За любые махинации с рекламой на сайте будет перманентный бан...

2023-04-23 21:35:34

Всевидящее око

Новый комментарий от пользователя Atom: «В каталоге статей точно не работает, попробовал всё менять, бесполезно/ С разных сайтов попробовал все варианты.» в материале Удаление материала ссылкой для всех модулей by uWnd

2023-04-23 21:36:57

Всевидящее око

Новый комментарий от пользователя Apocalypse: «Скорее всего требуется модернизация. Скрипту тыща лет, а в Козе с тех пор была куча изменений» в материале Удаление материала ссылкой для всех модулей by uWnd

2023-04-23 21:38:11

fapalnaapo

@Apocalypse, я Особенный 😀 c 2012 полет нормлаьный 😆

2023-04-25 12:50:21

fapalnaapo

я даже учавствую в конкурсе лучшего сайта 🤡

2023-04-25 12:52:02

fapalnaapo

тоесть топ 100

2023-04-25 12:52:36

Apocalypse

@fapalnaapo, "я даже учавствую в конкурсе лучшего сайта" 😅

2023-04-27 09:14:15

......

Для публикации сообщений в чате необходимо авторизоваться

Глючный полосатый фон на CSS3 и jQuery

Читайте также:

Посетители сайта

Панель управления

Июнь 2023
Пн	Вт	Ср	Чт	Пт	Сб	Вс
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

Глючный полосатый фон на CSS3 и jQuery

Читайте также:

Случайный размер букв на jQuery by Apocalypse

Оригинальная галерея в стиле полароид через плагин PikaChoose на jQuery

Эластичное горизонтальное выпадающее меню на CSS3

Посетители сайта

Панель управления