регистрация
856материалов
3341комментарий
239тем на форуме
7060пользователей

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


Описание:

Большинство пользователей, наткнувшись на страницу ошибки 404, постараются как можно скорее ее закрыть и забыть. Чтобы не потерять таким образом своих посетителей, стоит создать для этой ошибки необычное оформление. Представляю Вашему вниманию очень интересную страничку ошибки 404, с красивым, не обычным SVG эффектом. Надпись на странице постоянно переливается и дергается и по этому создаётся впечатление, что страницу глючит.

Установка:
Как правило, создаётся новый файл 404.htm и наполняется следующим содержимым:

1) HTML код вставьте в body:
Код
<div id="notfound"></div>
<script type="text/javascript" src="/js/svg.min.js"></script>
<script type="text/javascript" src="/js/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>

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>

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


Шаблон опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о шаблоне:
Дата добавления материала: 13.03.2016 в 15:30
Материал просмотрен: 1413 раз
Категория материала: Шаблоны для uCoz
К материалу оставлено: 8 комментариев

Пожаловаться
Сказать спасибо
Источник

8 комментариев


notakilu
красава. ваще от души спасибо.чОтко
schoolonly
А как же эпилепсия?
Ромчик
Чего? Какая эпилепсия? Вы о чем?
schoolonly
Ну,моргающие цвета,текст.От этого портится зрение и начинаются приступы эпилепсии у больных ей
Ромчик
А, Вы про это, да не чего страшного не случиться если пользователь уведет эту страницу
StimuL
Геннадий @StimuL 13.03.2016 21:186
0
демо белый фон и больше нечего)) глянь)
Ромчик
Я в курсе, данная проблема только в гугле, в остальных браузерах норм
Fox
Андрей @Fox 14.03.2016 07:158
+1
В Opera тоже http://screenpresso.com/=YSnUe
avatar
uLike – кнопка «Мне нравится»
Создать сайт вместе с uKit.com
Статистики нашего сайта
Правила чата
Пользователи онлайн
Закрыть мини-чат
+Открыть мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0