Автор

Красивая интерактивная заглушка для сайта на JS

Красивая интерактивная заглушка для сайта на JS


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

 

ДЕМО
ИСХОДНИКИ

 

Такую страницу можно использовать в качестве фона сайта, странице с малым текстовым посланием или заглушке на странице, в любом случае вы не прогадаете. Данный эффект достигается благодаря 3D библиотеке jQuery— Three.js.

 

Шаг 1. HTML

Разметка и стили у нас будут достаточно простые, так как всю работу будет выполнять Three.js, и параметры которые мы указали в JS, нам остается вызвать эти функции присвоив id=«world»:

<div id="world"></div>

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

 

Шаг 2. JS

Всю обработку событий у нас будет выполнять JS и Three.js, чтобы реализовать такой макет мы установили следующие значения для зацикленного, рандомного события.

var Colors = {
red: 0xf25346,
yellow: 0xedeb27,
white: 0xd8d0d1,
brown: 0x59332e,
pink: 0xF5986E,
brownDark: 0x23190f,
blue: 0x68c3c0,
green: 0x458248,
purple: 0x551A8B,
lightgreen: 0x629265,
};
var scene, camera, fieldOfView, aspectRatio, nearPlane, farPlane, HEIGHT, WIDTH, renderer, container;

function createScene() {
// Получить ширину и высоту экрана
// и использовать их для настройки соотношения сторон
// камеры и размера средства визуализации.
HEIGHT = window.innerHeight;
WIDTH = window.innerWidth;

// Создайте сцену.
scene = new THREE.Scene();

// Добавить FOV эффект тумана на сцену.
scene.fog = new THREE.Fog(0xf7d9aa, 100, 950);

// Создание камеры
aspectRatio = WIDTH / HEIGHT;
fieldOfView = 60;
nearPlane = 1;
farPlane = 10000;
camera = new THREE.PerspectiveCamera(
fieldOfView,
aspectRatio,
nearPlane,
farPlane
);
// Положение камеры
camera.position.x = 0;
camera.position.y = 150;
camera.position.z = 100;

// Создать рендерер

renderer = new THREE.WebGLRenderer({
// Делаем фон прозрачным, сглаживания производительность
alpha: true,
antialias: true
});

// установить размер средства визуализации в полноэкранный режим
renderer.setSize(WIDTH, HEIGHT);
// включить теневой рендеринг
renderer.shadowMap.enabled = true;

// Добавить Рендерер в DOM, и в события DIV.
container = document.getElementById('world');
container.appendChild(renderer.domElement);

//Отзывчивость
window.addEventListener('resize', handleWindowResize, false);
}

//Отзывчивость функций
function handleWindowResize() {
HEIGHT = window.innerHeight;
WIDTH = window.innerWidth;
renderer.setSize(WIDTH, HEIGHT);
camera.aspect = WIDTH / HEIGHT;
camera.updateProjectionMatrix();
}

var hemispshereLight, shadowLight;

function createLights() {
// Градиент цвета светлое небо, земля, интенсивность
hemisphereLight = new THREE.HemisphereLight(0xaaaaaa, 0x000000, .9)
// Параллельные лучи
shadowLight = new THREE.DirectionalLight(0xffffff, .9);

shadowLight.position.set(0, 350, 350);
shadowLight.castShadow = true;

// определить видимую область проецируемой тени
shadowLight.shadow.camera.left = -650;
shadowLight.shadow.camera.right = 650;
shadowLight.shadow.camera.top = 650;
shadowLight.shadow.camera.bottom = -650;
shadowLight.shadow.camera.near = 1;
shadowLight.shadow.camera.far = 1000;

// Размер теневой карты
shadowLight.shadow.mapSize.width = 2048;
shadowLight.shadow.mapSize.height = 2048;

// Добавить огни на сцену
scene.add(hemisphereLight);

scene.add(shadowLight);
}

Land = function() {
var geom = new THREE.CylinderGeometry(600, 600, 1700, 40, 10);
//поворот по оси x
geom.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI / 2));
//создать материал
var mat = new THREE.MeshPhongMaterial({
color: Colors.lightgreen,
shading: THREE.FlatShading,
});

//create a mesh of the object
this.mesh = new THREE.Mesh(geom, mat);
//receive shadows
this.mesh.receiveShadow = true;
}

Orbit = function() {

var geom = new THREE.Object3D();

this.mesh = geom;
//this.mesh.add(Солнце);
}

Sun = function() {

this.mesh = new THREE.Object3D();

var sunGeom = new THREE.SphereGeometry(400, 20, 10);
var sunMat = new THREE.MeshPhongMaterial({
color: Colors.yellow,
shading: THREE.FlatShading,
});
var sun = new THREE.Mesh(sunGeom, sunMat);
sun.castShadow = false;
sun.receiveShadow = false;
this.mesh.add(sun);
}

Cloud = function() {
// Создайте пустой контейнер для облака
this.mesh = new THREE.Object3D();
// Геометрия куба и материал
var geom = new THREE.DodecahedronGeometry(20, 0);
var mat = new THREE.MeshPhongMaterial({
color: Colors.white,
});

var nBlocs = 3 + Math.floor(Math.random() * 3);

for (var i = 0; i < nBlocs; i++) {
//Геометрия сетки клонов
var m = new THREE.Mesh(geom, mat);
//Randomly position each cube
m.position.x = i * 15;
m.position.y = Math.random() * 10;
m.position.z = Math.random() * 10;
m.rotation.z = Math.random() * Math.PI * 2;
m.rotation.y = Math.random() * Math.PI * 2;

//Случайно масштабировать кубы
var s = .1 + Math.random() * .9;
m.scale.set(s, s, s);
this.mesh.add(m);
}
}

Sky = function() {

this.mesh = new THREE.Object3D();

// Количество облачных групп
this.nClouds = 25;

// Постоянное пространство
var stepAngle = Math.PI * 2 / this.nClouds;

// Создаем тучи
for (var i = 0; i < this.nClouds; i++) {

var c = new Cloud();

//set rotation and position using trigonometry
var a = stepAngle * i;
// это расстояние между центром оси и облако
var h = 800 + Math.random() * 200;
c.mesh.position.y = Math.sin(a) * h;
c.mesh.position.x = Math.cos(a) * h;

// вращать облако в соответствии с его положением
c.mesh.rotation.z = a + Math.PI / 2;

// случайная глубина для облаков на оси z
c.mesh.position.z = -400 - Math.random() * 400;

// случайный масштаб для каждого облака
var s = 1 + Math.random() * 2;
c.mesh.scale.set(s, s, s);

this.mesh.add(c.mesh);
}
}

var petalColors = [Colors.red, Colors.yellow, Colors.blue];
Forest = function() {
this.mesh = new THREE.Object3D();
// количество деревьев
this.nTrees = 300;
// Пространство постоянно
var stepAngle = Math.PI * 2 / this.nTrees;
// Создание деревьев
for (var i = 0; i < this.nTrees; i++) {

var t = new Tree();
// установить вращение и положение с помощью тригонометрии
var a = stepAngle * i;
//это расстояние между центром оси и дерева
var h = 605;
t.mesh.position.y = Math.sin(a) * h;
t.mesh.position.x = Math.cos(a) * h;

// вращать дерево в соответствии с его положением
t.mesh.rotation.z = a + (Math.PI / 2) * 3;

// случайный масштаб для каждого дерева
var s = .3 + Math.random() * .75;
t.mesh.scale.set(s, s, s);

this.mesh.add(t.mesh);
}

// количество деревьев
this.nFlowers = 350;
var stepAngle = Math.PI * 2 / this.nFlowers;
for (var i = 0; i < this.nFlowers; i++) {

var f = new Flower();
var a = stepAngle * i;

var h = 605;
f.mesh.position.y = Math.sin(a) * h;
f.mesh.position.x = Math.cos(a) * h;

f.mesh.rotation.z = a + (Math.PI / 2) * 3;

f.mesh.position.z = 0 - Math.random() * 600;

var s = .1 + Math.random() * .3;
f.mesh.scale.set(s, s, s);

this.mesh.add(f.mesh);
}
}
var AirPlane = function() {
this.mesh = new THREE.Object3D();
//Создайте кабину
var geomCockpit = new THREE.BoxGeometry(80, 50, 50, 1, 1, 1);
var matCockpit = new THREE.MeshPhongMaterial({
color: Colors.red,
shading: THREE.FlatShading
});
geomCockpit.vertices[4].y -= 10;
geomCockpit.vertices[4].z += 20;
geomCockpit.vertices[5].y -= 10;
geomCockpit.vertices[5].z -= 20;
geomCockpit.vertices[6].y += 30;
geomCockpit.vertices[6].z += 20;
geomCockpit.vertices[7].y += 30;
geomCockpit.vertices[7].z -= 20;
var cockpit = new THREE.Mesh(geomCockpit, matCockpit);
cockpit.castShadow = true;
cockpit.receiveShadow = true;
this.mesh.add(cockpit);

// Создание двигателя
var geomEngine = new THREE.BoxGeometry(20, 50, 50, 1, 1, 1);
var matEngine = new THREE.MeshPhongMaterial({
color: Colors.white,
shading: THREE.FlatShading
});
var engine = new THREE.Mesh(geomEngine, matEngine);
engine.position.x = 40;
engine.castShadow = true;
engine.receiveShadow = true;
this.mesh.add(engine);

// Создать хвост
var geomTailPlane = new THREE.BoxGeometry(15, 20, 5, 1, 1, 1);
var matTailPlane = new THREE.MeshPhongMaterial({
color: Colors.red,
shading: THREE.FlatShading
});
var tailPlane = new THREE.Mesh(geomTailPlane, matTailPlane);
tailPlane.position.set(-35, 25, 0);
tailPlane.castShadow = true;
tailPlane.receiveShadow = true;
this.mesh.add(tailPlane);

// Создание крыла
var geomSideWing = new THREE.BoxGeometry(40, 4, 150, 1, 1, 1);
var matSideWing = new THREE.MeshPhongMaterial({
color: Colors.red,
shading: THREE.FlatShading
});

В результате мы получаем замечательную заглушку для сайта с отзывчивостью и адаптивностью.

 

Вот и всё!

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеJS

Красивая интерактивная заглушка для сайта на JS

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


Красивая интерактивная заглушка для сайта на JS

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


Красивая интерактивная заглушка для сайта на JS

Как известно визуальное оформление продукта влияет на его спрос. Точнее чем удобнее пользователю работать с интерфейсом, тем возрастает интерес к ресурсу. Многие веб-интерфейсы включают в себя динамические переключатели вида. На странице продукции или в архиве блога вы наверняка встречали кнопки, предназначенные для переключения вида разметки между списком или небольшой сеткой. В нашем сегодняшнем посте мы рассмотрим разработку простенького примера при помощи основных параметров CSS и некоторых команд jQuery.


Красивая интерактивная заглушка для сайта на JS

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


Раскрутка в соцсетях

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


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close