Главная › Новости

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

Опубликовано: 23.08.2018

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

 

ДЕМО

ИСХОДНИКИ

 

Такую страницу можно использовать в качестве фона сайта, странице с малым текстовым посланием или заглушке на странице, в любом случае вы не прогадаете. Данный эффект достигается благодаря 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

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

 

Вот и всё!

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

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