» »

Ошибка 404 (Not Found) страница не найдена

Ошибка 404 (Not Found) страница не найдена

Красиво создана по своей анимации страница под номером 404 или просто, такого материала больше не существует, где идет в стильном дизайне. На каждом сайте есть своя аналогичная тема со своей стилистикой, где идет под номером 404, а точнее, когда-то материал, который был на интернет ресурсе, то он попадает в поисковые системы. Что с последствием он исчезает, как, то это просто удаляет веб мастер, вообще его не существует. Идеальна подойдет под многие тематическое наклонение, которая безусловна полезна и также творческая в своей теме

А вот запрос в поиске на какое-то время остается, это может даже быть очень большой временной отрезок, что при клике на этот запрос, гость попадет на эту площадку. И чтоб он как можно быстрей вышел на сам основной ресурс, то такая страница ему поможет. Если говорить про эту, то здесь выставлена анимация, что в коде можно прописать ссылки, на любые переходы, или выставить кнопки. Так как самом основа отлично предоставлена, это сам номер, где ноль будет закрыт стилем, а вместо его крутится шар, что выглядит более реалистично.

Так реально смотрится на Demo, где ссылка представлена ниже.

Страница сайта под номером 404 не найдено

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

HTML

Код
<p class="kagilekon-medolog">4<span class="tesagile-metodolog">0</span>4<div class="ganitas">
</div></p>
<p class="soresed-urcestop">Ошибка 404 not found - страница не найдена.</p>

CSS

Код
.soresed-urcestop {
  font-size: 1em;
  color: #2f2e2e;
  line-height: 5em;
  text-indent: 4em;
  position: absolute;
  left: 34%;
  top: 63%;
}
.kagilekon-medolog, .ganitas{
  line-height: 1.58em;
  font-weight: bold;
  font-size: 11em;
  color: black;
  font-family: 'Roboto', sans-serif;
  width: 295px;
  height: 295px;
  position: absolute;
  left: 50%;
  top: 50%;  
  margin-left: -150px;
  margin-top: -150px;}
   
.tesagile-metodolog {color: #f9f7f7; }

JS

Код
var $container = $('.ganitas');
var renderer = new THREE.WebGLRenderer({antialias: true});
var camera = new THREE.PerspectiveCamera(80,1,0.1,10000);
var scene = new THREE.Scene();

scene.add(camera);
renderer.setSize(300,300);
$container.append(renderer.domElement);

// Camera
camera.position.z = 200;

// Material
var pinkMat = new THREE.MeshPhongMaterial({
  color : new THREE.Color("rgb(226,35,213)"),
  emissive : new THREE.Color("rgb(0,0,0)"),
  specular : new THREE.Color("rgb(255,155,255)"),
  shininess : 100,
  shading : THREE.FlatShading,
  transparent: 1,
  opacity : 1
});

var L1 = new THREE.PointLight( 0xffffff, 1);
L1.position.z = 100;
L1.position.y = 100;
L1.position.x = 100;
scene.add(L1);

var L2 = new THREE.PointLight( 0xffffff, 0.8);
L2.position.z = 200;
L2.position.y = 400;
L2.position.x = -100;
scene.add(L2);

// IcoSphere
var Ico = new THREE.Mesh(new THREE.IcosahedronGeometry(75,1), pinkMat);
Ico.rotation.z = 0.5;
scene.add(Ico);

function update(){
  Ico.rotation.x+=2/100;
  Ico.rotation.y+=2/100;
}

// Render
function render() {
  requestAnimationFrame(render);  
  renderer.render(scene, camera);  
  update();
}
render();

Безусловно побудит ваших гостей и посетителей пройти дальше на портал, а не просто закрыть ее, где этим помогая посетителям вернуться к соответствующему контенту.

Демонстрация
2018-09-25 Просмотров: 349 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

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