Глючная страница 404 на HTML5 и CSS3
827материалов
228тем на форуме
3004комментария
6159пользователей

Глючная страница 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
Материал просмотрен: 1092 раза
Категория материала: Шаблоны для uCoz
К материалу оставлено: 8 комментариев

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

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


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