ZorNet.Ru — сайт для вебмастера » HTML и CSS » Анимационная страничка с ошибкой 404

Анимационная страничка с ошибкой 404

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

Она представлена в простом виде, где нет функций для перехода на главную сайта или на любой закрепленный модуль. Здесь вы уже сами можете поставить нужные ссылки или все красиво оформить, и все получится в оригинальном виде. Как раз в этом материале как можно подробно разберём.

А это, что за собой несет 404 ошибка, и каким обзором она появляется. Здесь все просто и логично, ведь иногда веб-разработчик удаляем материал, а ссылка на его какое-то время остается в поисковой системе. Так вот эта страница будет появиться на удаленном материале.

Приступаем к установке:

Подключаем библиотеку, если у вас конструктор uCoz, то не нужно делать.

Код
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>

HTML

Код
<div class="lasun-page-404">
<div class="lasun-magelonabouculad-wrap">
<div class="lasun-magelonabouculad">
<div class="lasun-magelonabouculad_back"></div>
<div class="lasun-magelonabouculad_front">
<div class="js-magelonabouculad_lever lasun-magelonabouculad_lever"></div>
</div>
<div class="lasun-magelonabouculad_toast-handler">
<div class="lasun-magelonabouculad_shadow"></div>
<div class="js-magelonabouculad_toast lasun-magelonabouculad_toast js-lasun-hide"></div>
</div>
</div>
<canvas id="canvas-404" class="lasun-canvas-404"></canvas>
<img class="lasun-canvas-404_img" src="http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/smoke.png">
</div>
</div>

CSS

Код
.lasun-format-container {
width: 1150px;
margin: 0 auto;
}
.js-lasun-hide {
display: none;
}
.lasun-page-404 {
padding: 100px 0 0;
background: url(http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/toaster-bg.png) no-repeat 50% 100%;
}
.lasun-canvas-404_img {
display: none;
}
.lasun-canvas-404 {
opacity: .8;
filter: alpha(opacity=70);

z-index: -1;
position: absolute;
left: 0;
top: 0;
}
.lasun-magelonabouculad-wrap {
display: table;
margin: 0 auto;
padding: 198px 0 0;

position: relative;
}
.lasun-magelonabouculad {
width: 338px;
height: 218px;

position: relative;
}
.lasun-magelonabouculad_toast-handler {
width: 160px;
height: 198px;
margin-left: 87px;
padding-top: 59px;

overflow: hidden;

z-index: 1;
position: absolute;
top: -150px;
}
.lasun-magelonabouculad_shadow {
width: 164px;
height: 9px;
background: url(http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/sprite-toaster.png) -338px -197px no-repeat;

position: absolute;
left: 0;
bottom: 91px;
}
.lasun-magelonabouculad_toast {
width: 159px;
height: 171px;
background: url(http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/sprite-toaster.png) -338px 0 no-repeat;

z-index: -1;
position: relative;
}
.lasun-magelonabouculad_front {
width: 340px;
height: 217px;
background: url(http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/sprite-toaster.png) 0 -18px no-repeat;

z-index: 2;
position: relative;
}
.lasun-magelonabouculad_lever {
width: 22px;
height: 21px;
background: url(http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/sprite-toaster.png) -338px -171px no-repeat;

position: absolute;
top: 75px;
right: 12px;
}
.lasun-magelonabouculad_back {
width: 338px;
height: 17px;
background: url(http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/sprite-toaster.png) no-repeat;

z-index: -3;
position: relative;
}
@-webkit-keyframes an-bounce-in-up {
0% {
opacity: 0;

-webkit-transform: translateY(2000px);
transform: translateY(2000px);
}
60% {
opacity: 1;

-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
80% {
-webkit-transform: translateY(5px);
transform: translateY(5px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@-moz-keyframes an-bounce-in-up {
0% {
opacity: 0;

-moz-transform: translateY(2000px);
transform: translateY(2000px);
}
60% {
opacity: 1;

-moz-transform: translateY(-20px);
transform: translateY(-20px);
}
80% {
-moz-transform: translateY(5px);
transform: translateY(5px);
}
100% {
-moz-transform: translateY(0);
transform: translateY(0);
}
}
@-ms-keyframes an-bounce-in-up {
0% {
opacity: 0;
filter: alpha(opacity=0);

-ms-transform: translateY(2000px);
transform: translateY(2000px);
}
60% {
opacity: 1;
filter: alpha(opacity=100);

-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
80% {
-ms-transform: translateY(5px);
transform: translateY(5px);
}
100% {
-ms-transform: translateY(0);
transform: translateY(0);
}
}
@-o-keyframes an-bounce-in-up {
0% {
opacity: 0;

-o-transform: translateY(2000px);
transform: translateY(2000px);
}
60% {
opacity: 1;

-o-transform: translateY(-20px);
transform: translateY(-20px);
}
80% {
-o-transform: translateY(5px);
transform: translateY(5px);
}
100% {
-o-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes an-bounce-in-up {
0% {
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: translateY(2000px);
-moz-transform: translateY(2000px);
-ms-transform: translateY(2000px);
-o-transform: translateY(2000px);
transform: translateY(2000px);
}
60% {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
-o-transform: translateY(-20px);
transform: translateY(-20px);
}
80% {
-webkit-transform: translateY(5px);
-moz-transform: translateY(5px);
-ms-transform: translateY(5px);
-o-transform: translateY(5px);
transform: translateY(5px);
}
100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
}
.js-lasun-animated {
-webkit-animation-duration: .6s;
-moz-animation-duration: .6s;
-ms-animation-duration: .6s;
-o-animation-duration: .6s;
animation-duration: .6s;

-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.js-lasun-bounce-in-up {
-webkit-animation-name: an-bounce-in-up;
-moz-animation-name: an-bounce-in-up;
-ms-animation-name: an-bounce-in-up;
-o-animation-name: an-bounce-in-up;
animation-name: an-bounce-in-up;
}
@media only screen and (max-width: 767px) {
.lasun-format-container {
width: 96%;
}
}
@media (min-width: 768px) and (max-width: 979px) {
.lasun-format-container {
width: 750px;
}
}
@media (min-width: 980px) and (max-width: 1161px) {
.lasun-format-container {
width: 960px;
}
}

JS

Код
(function ($) {
$(function () {
$().ready(function () {
(function () {
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
})();
var canvas = document.getElementById('canvas-404');
if (canvas === null) return;
setTimeout(function () {
$('.js-magelonabouculad_lever').delay(200).animate({ top: 30 }, 100);
$('.js-magelonabouculad_toast').removeClass('js-lasun-hide').addClass('js-lasun-animated js-lasun-bounce-in-up');
}, 800);
var ctx = canvas.getContext("2d"),
loading = true;
canvas.height = 210;
canvas.width = 300;
var parts = [],
minSpawnTime = 100,
lastTime = new Date().getTime(),
maxLifeTime = Math.min(6000, canvas.height / (1.5 * 60) * 1000),
emitterX = canvas.width / 2 - 50,
emitterY = canvas.height - 10,
smokeImage = new Image();
function spawn() {
if (new Date().getTime() > lastTime + minSpawnTime) {
lastTime = new Date().getTime();
parts.push(new smoke(emitterX, emitterY));
}
}
function render() {
if (loading) {
load();
return false;
}
var len = parts.length;
ctx.clearRect(0, 0, canvas.width, canvas.height);
while (len--) if (parts[len].y < 0 || parts[len].lifeTime > maxLifeTime) {
parts.splice(len, 1);
} else {
parts[len].update();
ctx.save();
var offsetX = -parts[len].size / 2,offsetY = -parts[len].size / 2;
ctx.translate(parts[len].x - offsetX, parts[len].y - offsetY);
ctx.rotate(parts[len].angle / 180 * Math.PI);
ctx.globalAlpha = parts[len].alpha;
ctx.drawImage(smokeImage, offsetX, offsetY, parts[len].size, parts[len].size);
ctx.restore();
}
spawn();
requestAnimationFrame(render);
}
function smoke(x, y, index) {
this.x = x;
this.y = y;
this.size = 1;
this.startSize = 60;
this.endSize = 69;
this.angle = Math.random() * 359;
this.startLife = new Date().getTime();
this.lifeTime = 0;
this.velY = -1 - Math.random() * 0.5;
this.velX = Math.floor(Math.random() * -6 + 3) / 10;
}
smoke.prototype.update = function () {
this.lifeTime = new Date().getTime() - this.startLife;
this.angle += 0.2;
var lifePerc = this.lifeTime / maxLifeTime * 100;
this.size = this.startSize + (this.endSize - this.startSize) * lifePerc * .1;
this.alpha = 1 - lifePerc * .01;
this.alpha = Math.max(this.alpha, 0);
this.x += this.velX;
this.y += this.velY;
};
smokeImage.src = document.getElementsByTagName('img')[0].src;
smokeImage.onload = function () {
loading = false;
};
function load() {
if (loading) {
setTimeout(load, 3000);
} else {
render();
}
}
render();
});
});
})(jQuery);

Идет demo страница, где все происходит на светлом фоне, но как можно заметить, что некоторые эффекты не сильно будет видно при аналогичном оттенке.

Демонстрация
Источник: imapo.ru
02 Мая 2019 Загрузок: 1 Просмотров: 1122 Комментариев: (0)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

Комментарии: 0
Войдите:
avatar