CSS / HTML5 / Wordpress / Скрипты для uCoz / Эффекты для сайта
2

Глючная страница 404 на HTML5 и CSS3

Разместил: Apocalypse
11 марта 2016

Скачать Очень интересная страничка с ошибкой 404. Надпись постоянно подёргивает и создаётся впечатление, что страницу глючит Для начала посмотрите ДЕМО Моё тестирование в редакторе: КЛИК Установка: Как правило, создаётся новый файл 404.htm и наполняется следующим содержимым: 1#: HTML код вставьте в body:

<div id="notfound"></div>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/svg.js/1.0.0-rc.8/svg.min.js"></script>
<script type="text/javascript" src="http://strangeplanet.fr/files/misc/perlin-noise-simplex.js"></script>

2#: CSS код вставьте перед /head:

<style>
@font-face {
font-family:'Ubuntu';
font-style:normal;
font-weight:700;
src:local('Ubuntu Bold'), local('Ubuntu-Bold'), url('http://themes.googleusercontent.com/static/fonts/ubuntu/v4/0ihfXUL2emPh0ROJezvraD8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}
html, body {
padding:0; margin:0;
height:100%; width:100%;
}
body {
font-family:"Calibri",sans-serif;
background:radial-gradient(#fff, #ccc);
background:radial-gradient(#ffffff, #fdfdfd 16%, #fbfbfb 33%, #f8f8f8 49%, #efefef 66%, #dfdfdf 82%, #bfbfbf 100%);  
}
#notfound {
margin:0 auto;
}
#notfound svg {
-webkit-animation: noise 2s linear infinite;
animation: noise 2s linear infinite;
}
@-webkit-keyframes noise {
0%, 3%, 5%, 42%, 44%, 100% { -webkit-transform: scaleY(1); }  
4.3% { -webkit-transform: scaleY(1.7); }
43% { -webkit-transform: scaleX(1.5); }
}
@keyframes noise {
0%, 3%, 5%, 42%, 44%, 100% { transform: scaleY(1); }  
4.3% { transform: scaleY(1.7); }
43% { transform: scaleX(1.5); }
}
p {
text-align:center;
}
p.small {
font-size:0.8em;
opacity:0.5;
}
</style>

<style>

@font-face {

font-family:'Ubuntu';

font-style:normal;

font-weight:700;

src:local('Ubuntu Bold'), local('Ubuntu-Bold'), url('http://themes.googleusercontent.com/static/fonts/ubuntu/v4/0ihfXUL2emPh0ROJezvraD8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');

}

html, body {

padding:0; margin:0;

height:100%; width:100%;

}

body {

font-family:"Calibri",sans-serif;

background:radial-gradient(#fff, #ccc);

background:radial-gradient(#ffffff, #fdfdfd 16%, #fbfbfb 33%, #f8f8f8 49%, #efefef 66%, #dfdfdf 82%, #bfbfbf 100%);

}

#notfound {

margin:0 auto;

}

#notfound svg {

-webkit-animation: noise 2s linear infinite;

animation: noise 2s linear infinite;

}

@-webkit-keyframes noise {

0%, 3%, 5%, 42%, 44%, 100% { -webkit-transform: scaleY(1); }

4.3% { -webkit-transform: scaleY(1.7); }

43% { -webkit-transform: scaleX(1.5); }

}

@keyframes noise {

0%, 3%, 5%, 42%, 44%, 100% { transform: scaleY(1); }

4.3% { transform: scaleY(1.7); }

43% { transform: scaleX(1.5); }

}

p {

text-align:center;

}

p.small {

font-size:0.8em;

opacity:0.5;

}

</style>

3#: Исполняемый скрипт вставьте после /body:

<script type="text/javascript">
if (!SVG.supported) {
alert('SVG not supported !');
} else {
// parameters
var a = 40,
speed = 50,
points = [
[, , 1, 1, , , 1, 1, , , 1, 1, 1, 1, 1, 1, , , 1, 1, , , 1, 1],
[, 1, 1, , , 1, 1, , , 1, 1, , , 1, 1, , , 1, 1, , , 1, 1, ],
[1, 1, 1, 1, 1, 1, , , 1, 1, , , 1, 1, , , 1, 1, 1, 1, 1, 1, , ],
[, , , 1, 1, , , 1, 1, , , 1, 1, , , , , , , 1, 1, , , ],
[, , 1, 1, , , 1, 1, 1, 1, 1, 1, , , , , , , 1, 1, , , , ]
],
colors = ['#ED1156', '#ED194E', '#ED2247', '#ED2B3F', '#EE3438',
'#EE3D31', '#EE4529', '#EF4E22', '#EF571A', '#EF6013', '#F0690C',
'#E8720E', '#E17B10', '#D98512', '#D28E14', '#CB9816', '#C3A118',
'#BCAA1A', '#B4B41C', '#ADBD1E', '#A6C721', '#96C62F', '#87C53E',
'#78C44D', '#69C35C', '#5AC26B', '#4AC17A', '#3BC089', '#2CBF98',
'#1DBEA7', '#0EBDB6', '#0EBAB0', '#0EB8AA', '#0EB5A4', '#0EB39E',
'#0EB098', '#0EAE92', '#0EAB8C', '#0EA986', '#0EA680', '#0EA47B',
'#269376', '#3F8372', '#58736E', '#71626A', '#895266', '#A24262',
'#BB315E', '#D4215A'
],
shadowColors = ['#0055ff', '#ff0000'],
textColors = ['#012C33', '#12575E'];
// computed parameters
var a2 = a / 2,
h = Math.round(a2 * Math.sqrt(3) * 100) / 100,
grid = [points[0].length, points.length],
size = [(grid[0] / 2 + 0.5) * a + a * 2, grid[1] * h + a * 3],
nb_colors = colors.length,
objects = [],
groups = [];
// init canvas
var container = document.getElementById('notfound');
container.style.width = size[0] + 'px';
container.style.height = size[1] + 'px';
var simplex = new SimplexNoise(),
paper = SVG(container).size(size[0], size[1]).viewbox(0, 0, size[0],
size[1]);
up = paper.defs().path('M' + a2 + ',0 l' + a2 + ',' + h + ' l-' + a +
',0 l' + a2 + ',-' + h),
down = paper.defs().path('M0,0 l' + a + ',0 l-' + a2 + ',' + h + ' -' +
a2 + ',-' + h),
shadow = [paper.group(), paper.group()];
// draw objects
for (var l = 0; l < grid[1]; l++) {
objects[l] = [];
groups[l] = paper.group();
for (var c = 0; c < grid[0]; c++) {
if (!points[l][c]) {
continue;
}
var rnd = Math.round((simplex.noise(c / 10, l / 10) + 1) / 2 *
nb_colors),
cid = rnd - Math.floor(rnd / nb_colors) * nb_colors,
pos = [c * a2 + a, l * h + a],
use;
if ((l % 2 == 0 && c % 2 == 0) || (l % 2 == 1 && c % 2 == 1)) {
use = up;
} else {
use = down;
}
var el = paper.use(use).move(pos[0], pos[1]).style('fill:' + colors[
cid]).data('i', rnd);
groups[l].add(el);
objects[l][c] = el;
shadow[0].use(use).move(pos[0], pos[1]);
shadow[1].use(use).move(pos[0], pos[1]);
}
}
// draw text
var text = paper.text('Page not found!').font({
family: 'Ubuntu, Calibri',
size: a
}).opacity(0.7).cx(size[0] / 2 - a2).y(size[1] - a - a2);
shadow[0].add(text.clone());
shadow[1].add(text.clone());
text.fill(paper.gradient('linear', function(stop) {
stop.at(0, textColors[0]);
stop.at(1, textColors[1]);
}).from(0, 0).to(0, 1));
// animate shadows
shadow[0].back().fill(shadowColors[0]).animate(speed * 4).loop().during(
function(i) {
if (i < 0.1) this.move(-a / 4, 0);
else if (i >= 0.8) this.move(a / 12, 0);
if (i < 0.1) this.opacity(0.1);
else if (i >= 0.4 && i < 0.5) this.opacity(0.5);
else if (i >= 0.7 && i < 0.8) this.opacity(0.3)
else if (i >= 0.9) this.opacity(0.6);
else this.opacity(0);
});
shadow[1].back().fill(shadowColors[1]).animate(speed * 6).loop().during(
function(i) {
if (i < 0.1) this.move(a / 4, 0);
else if (i >= 0.8) this.move(-a / 12, 0);
if (i < 0.1) this.opacity(0.1);
else if (i >= 0.4 && i < 0.5) this.opacity(0.5);
else if (i >= 0.7 && i < 0.8) this.opacity(0.3)
else if (i >= 0.9) this.opacity(0.6);
else this.opacity(0);
});
var counter = 0;
setInterval(function() {
// animate position
for (var l = 0, i = groups.length; l < i; l++) {
if (Math.random() < 0.5) {
groups[l].x(Math.round(Math.random() * a / 5));
}
}
// animate colors        
for (var l = 0, i = objects.length; l < i; l++) {
for (var c = 0, j = objects[l].length; c < j; c++) {
if (!objects[l][c]) {
continue;
}
var cid = objects[l][c].data('i') + counter;
cid -= Math.floor(cid / nb_colors) * nb_colors;
objects[l][c].style('fill:' + colors[cid]);
}
}
counter++;
if (counter == nb_colors) {
counter = 0;
}
}, speed);
}
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

if (!SVG.supported) {

alert('SVG not supported !');

} else {

// parameters

var a = 40,

speed = 50,

points = [

[, , 1, 1, , , 1, 1, , , 1, 1, 1, 1, 1, 1, , , 1, 1, , , 1, 1],

[, 1, 1, , , 1, 1, , , 1, 1, , , 1, 1, , , 1, 1, , , 1, 1, ],

[1, 1, 1, 1, 1, 1, , , 1, 1, , , 1, 1, , , 1, 1, 1, 1, 1, 1, , ],

[, , , 1, 1, , , 1, 1, , , 1, 1, , , , , , , 1, 1, , , ],

[, , 1, 1, , , 1, 1, 1, 1, 1, 1, , , , , , , 1, 1, , , , ]

colors = ['#ED1156', '#ED194E', '#ED2247', '#ED2B3F', '#EE3438',

'#EE3D31', '#EE4529', '#EF4E22', '#EF571A', '#EF6013', '#F0690C',

'#E8720E', '#E17B10', '#D98512', '#D28E14', '#CB9816', '#C3A118',

'#BCAA1A', '#B4B41C', '#ADBD1E', '#A6C721', '#96C62F', '#87C53E',

'#78C44D', '#69C35C', '#5AC26B', '#4AC17A', '#3BC089', '#2CBF98',

'#1DBEA7', '#0EBDB6', '#0EBAB0', '#0EB8AA', '#0EB5A4', '#0EB39E',

'#0EB098', '#0EAE92', '#0EAB8C', '#0EA986', '#0EA680', '#0EA47B',

'#269376', '#3F8372', '#58736E', '#71626A', '#895266', '#A24262',

'#BB315E', '#D4215A'

shadowColors = ['#0055ff', '#ff0000'],

textColors = ['#012C33', '#12575E'];

// computed parameters

var a2 = a / 2,

h = Math.round(a2 * Math.sqrt(3) * 100) / 100,

grid = [points[0].length, points.length],

size = [(grid[0] / 2 + 0.5) * a + a * 2, grid[1] * h + a * 3],

nb_colors = colors.length,

objects = [],

groups = [];

// init canvas

var container = document.getElementById('notfound');

container.style.width = size[0] + 'px';

container.style.height = size[1] + 'px';

var simplex = new SimplexNoise(),

paper = SVG(container).size(size[0], size[1]).viewbox(0, 0, size[0],

size[1]);

up = paper.defs().path('M' + a2 + ',0 l' + a2 + ',' + h + ' l-' + a +

',0 l' + a2 + ',-' + h),

down = paper.defs().path('M0,0 l' + a + ',0 l-' + a2 + ',' + h + ' -' +

a2 + ',-' + h),

shadow = [paper.group(), paper.group()];

// draw objects

for (var l = 0; l < grid[1]; l++) {

objects[l] = [];

groups[l] = paper.group();

for (var c = 0; c < grid[0]; c++) {

if (!points[l][c]) {

continue;

}

var rnd = Math.round((simplex.noise(c / 10, l / 10) + 1) / 2 *

nb_colors),

cid = rnd - Math.floor(rnd / nb_colors) * nb_colors,

pos = [c * a2 + a, l * h + a],

use;

if ((l % 2 == 0 && c % 2 == 0) || (l % 2 == 1 && c % 2 == 1)) {

use = up;

} else {

use = down;

}

var el = paper.use(use).move(pos[0], pos[1]).style('fill:' + colors[

cid]).data('i', rnd);

groups[l].add(el);

objects[l][c] = el;

shadow[0].use(use).move(pos[0], pos[1]);

shadow[1].use(use).move(pos[0], pos[1]);

}

// draw text

var text = paper.text('Page not found!').font({

family: 'Ubuntu, Calibri',

size: a

}).opacity(0.7).cx(size[0] / 2 - a2).y(size[1] - a - a2);

shadow[0].add(text.clone());

shadow[1].add(text.clone());

text.fill(paper.gradient('linear', function(stop) {

stop.at(0, textColors[0]);

stop.at(1, textColors[1]);

}).from(0, 0).to(0, 1));

// animate shadows

shadow[0].back().fill(shadowColors[0]).animate(speed * 4).loop().during(

function(i) {

if (i < 0.1) this.move(-a / 4, 0);

else if (i >= 0.8) this.move(a / 12, 0);

if (i < 0.1) this.opacity(0.1);

else if (i >= 0.4 && i < 0.5) this.opacity(0.5);

else if (i >= 0.7 && i < 0.8) this.opacity(0.3)

else if (i >= 0.9) this.opacity(0.6);

else this.opacity(0);

});

shadow[1].back().fill(shadowColors[1]).animate(speed * 6).loop().during(

function(i) {

if (i < 0.1) this.move(a / 4, 0);

else if (i >= 0.8) this.move(-a / 12, 0);

if (i < 0.1) this.opacity(0.1);

else if (i >= 0.4 && i < 0.5) this.opacity(0.5);

else if (i >= 0.7 && i < 0.8) this.opacity(0.3)

else if (i >= 0.9) this.opacity(0.6);

else this.opacity(0);

});

var counter = 0;

setInterval(function() {

// animate position

for (var l = 0, i = groups.length; l < i; l++) {

if (Math.random() < 0.5) {

groups[l].x(Math.round(Math.random() * a / 5));

}

// animate colors

for (var l = 0, i = objects.length; l < i; l++) {

for (var c = 0, j = objects[l].length; c < j; c++) {

if (!objects[l][c]) {

continue;

}

var cid = objects[l][c].data('i') + counter;

cid -= Math.floor(cid / nb_colors) * nb_colors;

objects[l][c].style('fill:' + colors[cid]);

}

counter++;

if (counter == nb_colors) {

counter = 0;

}

}, speed);

}

</script>

Для сайтов на uCoz и остальных популярных CMS я прикрепляю уже готовую рабочую страничку 404.htm. Просто извлеките всё содержимое ZIP архива в корень вашего сайта с заменой (Если таковая потребуется)

Автор публикации

не в сети 4 дня

Apocalypse

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

Комментарии: 393Публикации: 1095Регистрация: 27-08-2018

Метки: 404 CSS3 HTML5 Анимированная Глючная Страница Эффект

Apocalypse

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

Вам может также понравиться...

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

Старые

Новые

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

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

Участник

Ne0BARS

7 лет назад

Что то на демках в поле результата просто белый лист... ну у меня на компе. на других не пробовал

Ответить

Автор

Apocalypse

7 лет назад

Ответить на Ne0BARS

Да, к сожалению, материал более неактуален.. Спасибо за отзыв!

Ответить

topka

Есть скрипт ( денег или баллов ? )
где можно потратить эти баллы или передать и заработать ?

Что-то такое видел на одном сайте ( сталкер сайт на юкозе было)

2024-03-06 21:31:46

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

Новый пост от installusd1 в теме «PPI Pay-Per-Install Best Advertising Network»

2024-03-25 09:45:25

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

Новый комментарий от пользователя паоа: «пкаор» в материале Ajax отправка комментариев в Wordpess без плагинов от Apocalypse

2024-03-27 20:08:09

Apocalypse

Сайт был восстановлен спустя несколько месяцев бездействия

2024-06-27 16:12:56

fapalnaapo

а Шо случилось за что блокировали

2024-06-30 20:46:10

Apocalypse

@fapalnaapo, банально хостинг не был уплачен

2024-07-14 08:27:24

Apocalypse

Всем привет. У кого как жизнь?

2024-07-30 19:50:15

fapalnaapo

давольно таки не плохо, очень приятно, мне очень нравится между прочем

2024-08-13 10:09:49

Apocalypse

Всем доброго дня

2024-11-07 12:00:10

Al-Sher

Всем привет

2024-11-09 17:57:18

......

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

Глючная страница 404 на HTML5 и CSS3

Автор публикации

Apocalypse

Вам может также понравиться...

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

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

Ноябрь 2024
Пн	Вт	Ср	Чт	Пт	Сб	Вс
				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

Глючная страница 404 на HTML5 и CSS3

Автор публикации

Apocalypse

Вам может также понравиться...

Красивые радио кнопки в тёмных тонах на CSS3

Эффект чёрной дыры на HTML5 Canvas

Классная анимированная кнопка финансовой поддержки на CSS3 и Javascript

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

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