Cómo hacer una página de resguardo. Deja tu información de contacto

Un talón es una página que se coloca en un sitio cuando no está disponible por una razón u otra. Por ejemplo, cuando está finalizando o cambiando el diseño del sitio y en este momento no está disponible o se muestra de alguna manera incorrecta. Sería aconsejable colocar una página resguardo en este momento, en la que se escribirá que el sitio está en mantenimiento.

Entonces empecemos...

Haremos un marcador de posición simple con una imagen de fondo y un texto que.

Creemos una carpeta en la computadora en la que colocaremos todos los archivos necesarios para nuestro código auxiliar.

En esta carpeta crearemos otra carpeta llamada imágenes. En él colocaremos nuestra imagen de fondo y, posiblemente, otras imágenes que puedan ser necesarias durante el trabajo.

Abra el programa Notepad++ (o uno similar, por ejemplo el Bloc de notas). Nosotros creamos nuevo documento. Siguiente - Archivo - Guardar como, seleccione nuestra carpeta con el código auxiliar y guarde el documento con el nombre index.html

Esto es lo que debería estar ahora en nuestra carpeta:

Abra el archivo index.html en nuestro editor (después de guardarlo debería estar abierto para usted). Ahora debemos asegurarnos de que la codificación de este archivo esté configurada correctamente. Para hacer esto, vaya al elemento del menú "Codificaciones" y haga clic en "Convertir a UTF-8".

Para no perder accidentalmente el resultado obtenido mientras trabaja, recomiendo guardar periódicamente el documento mientras trabaja. Esto se puede hacer en el menú "Archivo" o con el atajo de teclado "Ctrl + S".

Escribimos el siguiente código en el editor:

Cualquier página web consta de estas etiquetas.

Ahora agreguemos un título a nuestra página, porque no será muy agradable cuando alguien la abra y vea index.html en el título de la pestaña del navegador (puede abrir la página en el navegador y ver qué sucede). Para hacer esto, agregue el siguiente código entre y:

El sitio está en mantenimiento.

Imagen de fondo

Ahora seleccionemos una imagen de fondo para nuestro marcador de posición y luego volvamos a editar la página.

Para ello accede a Google Imágenes y busca una imagen interesante que pueda servir de fondo para nuestra página. Es importante seleccionar una imagen con un ancho de al menos 1920 píxeles para que nuestra página luzca bien en pantallas grandes. Entré en la barra de búsqueda y seleccioné una de las imágenes.

Abra la imagen en tamaño completo y guárdela en su carpeta de imágenes. Luego le cambiamos el nombre. Llamémoslo bg (no te olvides del formato de imagen, en mi caso es jpg).

Esto es lo que recogí. Esta es una foto de la ciudad de Chicago. En mi opinión, es bastante adecuado para la imagen de fondo del sitio.

Adjuntamos una imagen de fondo a la página usando estilos CSS:

El sitio está en mantenimiento.

El texto estará compuesto por un título y, de hecho, un párrafo de texto.

El sitio está en mantenimiento.

Esto es lo que pasó:

Ahora agregaremos nuestros contactos para que los visitantes puedan comunicarse con nosotros de inmediato y no esperar hasta que se complete el trabajo en el sitio.

Agreguemos 3 bloques que contienen el teléfono, Correo electrónico y Skype.

El sitio está en mantenimiento El sitio está en mantenimiento, ¡vuelve a consultar más tarde!

El sitio se encuentra actualmente en proceso trabajos de ingeniería. Vuelva más tarde o contáctenos de una de las siguientes maneras:

Tel.: 333-33-33

Correo electrónico: [correo electrónico protegido]

Skype: admsite_ru

Sólo queda trabajar con los estilos.

Ampliemos el título, alineémoslo con el centro y bajémoslo más cerca del centro de la pantalla.

Aumentemos la fuente del párrafo de texto a veinte píxeles y hagamos una pequeña sangría en el encabezado. También haremos un borde en la parte inferior del texto, que lo separará de los contactos.

Hagamos bloques con contactos en 3 columnas, aumentemos la fuente, alineemos cada bloque con el centro y cambiemos el color del texto.

El sitio está en mantenimiento El sitio está en mantenimiento, ¡vuelve a consultar más tarde!

El sitio se encuentra actualmente en obras técnicas. Vuelva más tarde o contáctenos de una de las siguientes maneras:

Tel.: 333-33-33

Correo electrónico: [correo electrónico protegido]

Skype: admsite_ru

Como resultado, tenemos una página de marcador de posición que podemos usar cuando el sitio está realizando trabajos técnicos.

Cuando un sitio está a la espera de su lanzamiento o está en proceso de renovación, es necesario notificar a los visitantes del sitio que está a punto de abrir. Y la solución perfecta a este problema es crear página de destino con el aviso correspondiente.

A medida que las herramientas modernas de desarrollo web han evolucionado, páginas como estas han evolucionado desde paginas simples con texto en soluciones más interesantes.

La creación de un marcador de posición de este tipo para el sitio aumenta el nivel de expectativas de los visitantes, generando así interés entre ellos. Además de una simple notificación, también es posible recopilar información sobre los usuarios interesados ​​insertando formularios de suscripción y comentario.

En este tutorial, crearemos un código auxiliar para un sitio, que contendrá un formulario de suscripción y un temporizador de cuenta regresiva, implementado utilizando un complemento jQuery de Keith Wood.

Materiales necesarios para la lección:

• Cualquier imagen de fondo
• Tiempo y paciencia.

index.html - archivo principal del proyecto

Carpeta “js” – carpeta con scripts JavaScript/JQuery

carpeta “img” - carpeta con imágenes del proyecto

Carpeta “css” – carpeta con hojas de estilo del proyecto (archivos css)

Empecemos

La primera etapa del trabajo será conectarse al archivo html principal de hojas de estilo y bibliotecas jquery.
Incluimos los archivos dentro de la etiqueta head.

Próximamente con contador

HTML

Creemos un marcado para nuestro documento html. Todos los elementos de la página estarán dentro de una etiqueta div con el identificador "contenedor". Dentro de este bloque tendremos encabezados, un contador, un formulario de comentarios y un pie de página (el bloque inferior con copyright).

Nuestro sitio web estará disponible próximamente. DISCULPAMOS LAS MOLESTIAS.

NECESITAS ESPERAR...

ENVÍAME DETALLES SOBRE ESO

Derechos de autor - 1stwebdesigner.com - 2014

Observe que dejamos el div con el "contador" de ID vacío. Más adelante usaremos este identificador para asociarlo con nuestro complemento jquery y agregarle estilos CSS.

CSS

Ahora creemos un archivo CSS para nuestro proyecto, que contendrá todos los estilos. En primer lugar, agreguemos estilos para los elementos principales: cuerpo, h1, h2 y el bloque con el identificador “contenedor”. Para el bloque "contenedor", especificamos el ancho como porcentaje para que cambie según el tamaño de la ventana del navegador.

Para la etiqueta h1, aplique una transformación CSS3, que le permitirá girar 360 grados a lo largo del eje X. Puede leer más sobre esta propiedad.

Cuerpo ( color: #dadada; altura de línea: 1,75; ancho: 100%; fondo: url(../img/background.jpg)centro; familia de fuentes: "Open Sans"; ) h1,h2( color: # fff; altura de línea: 1.16667; alineación de texto: centro; transformación de texto: mayúsculas; sombra de texto: 2px 2px 2px rgba(150,150,150,1); ) h1 (tamaño de fuente: 43px; familia de fuentes: Montserrat; fuente -peso: 700; borde: 2px discontinuo #fff; margen superior: 50px; relleno: 10px; cursor: puntero; -webkit-transition: todos los .8 fáciles; -moz-transition: todos los .8 fáciles; -o-transition : todos los .8s facilitan; transición: todos los .8s facilitan; ) h1:hover ( -webkit-transform: rotarX(360deg); -moz-transform: rotarX(360deg); -ms-transform: rotarX(360deg); -o -transformar: rotarX(360deg); transformar: rotarX(360deg); ) h2 (tamaño de fuente: 30px; peso de fuente: 300; margen superior: 30px; ) .container (ancho: 58%; margen: 40px auto 0 ; ) .details ( margen superior: 30px; color: #fff; alineación de texto: centro; sombra de texto: 2px 2px 2px rgba(150,150,150,1); )

Botón, entrada, área de texto (tamaño de fuente: 16 px; ancho máximo: 100%; margen: 0; radio de borde: 0; alineación vertical: línea de base; -webkit-box-sizing: borde-box; -moz-box -tamaño: cuadro de borde; tamaño de cuadro: cuadro de borde; ) área de texto (desbordamiento: automático; alineación vertical: superior;) entrada, área de texto (fondo: #6e6e6e; fondo: rgba(169,169,169,0.3); borde: 1px sólido #f4f4f4; color: #fff; peso de fuente: 700; espacio entre letras: 1px; relleno: 12px; transformación de texto: mayúsculas; ) entrada: foco, área de texto: foco (esquema: 0;) botón: pasar el cursor, botón :enfoque,entrada:enfoque,entrada:hover (fondo: #ff8721; color: #fff; contorno: 0; ) botón,entrada ( -webkit-apariencia: botón; cursor: puntero; ) botón,entrada (fondo: #ffab00 ; -webkit-transition: todos los .5; -moz-transition: todos los .5; transición: todos los .5; ) .form-field ( posición: relativa; )

El siguiente paso es crear un estilo para varios navegadores para el campo de texto.

::-webkit-input-placeholder ( color: #fff; ) ::-moz-placeholder ( color: #fff; opacidad: 1; ) ::-ms-input-placeholder ( color: #fff; opacidad: 1; ) .placeholder (color: #ff; )

Ahora creemos estilos para nuestro mostrador. Permítanme recordarles que en un documento html se ubica en un bloque div con el identificador “contador”.

#counter (margen superior: 28px;) .countdown_section (color: #dadada; pantalla: bloque en línea; tamaño de fuente: 12px; alineación de texto: centro; ancho: 25%; espacio entre letras: 1px; borde izquierdo : 1px discontinuo #dadada; color del borde: rgba(218,218,218,0.8); relleno: 42px 12px 28px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: borde -box; sombra de texto: 2px 2px 2px rgba(150,150,150,1); transformación de texto: mayúsculas; ) .countdown_section:first-child ( borde izquierdo: 0; ) .countdown_amount ( color: #fff; display: block; familia de fuentes: "Open Sans"; tamaño de fuente: 60px; peso de fuente: 700; espacio entre letras: normal; altura de línea: 1; )

Ahora agreguemos estilos para el formulario de comentarios. El ancho máximo del formulario será 610px y estableceremos el posicionamiento relativo para este formulario (posición:relativa). Coloquemos el botón para enviar un mensaje a la derecha del bloque de texto y establezcamos su posicionamiento absoluto (posición:absoluta).

#subscribe (ancho máximo: 610 px; posición: relativa; margen: 20 px auto 0;) #subscribe-form .form-field (margen-derecho: 180 px;) #subcribe_email (borde-derecho: 0;) #subscribe-form .form-submit (alto: 50px; posición: absoluta; derecha: 0; arriba: 0; ancho: 180px;) #subcribe_email,#subscribe_submit (ancho: 100%; pantalla: bloque; alto: 55px;)

Y al final agregaremos propiedades para los elementos del bloque de pie de página.

Pie de página (tamaño de fuente: 13px; alineación de texto: centro; margen superior: 25px; transformación de texto: mayúsculas; sombra de texto: 2px 2px 2px rgba(150,150,150,1); ) pie de página a (color: #fff; )

Para que nuestra página responda, agregaremos consultas de medios. Puedes leer más sobre esta propiedad (inglés)

Pantalla solo @media y (ancho máximo: 720 px) (pie de página (margen inferior: 40 px;)) Pantalla solo @media y (ancho máximo: 680 px) (.countdown_amount (tamaño de fuente: 48 px;)) solo @media pantalla y (ancho máximo: 540px) ( .one-half ( ancho: 100%; ) .countdown_section ( relleno: 28px 6px 20px; ) #subcribe_email(borde: 1px sólido #fff;) #subscribe-form .form-submit ( margen: 0 auto; derecha: auto; posición: estática; ) #subscribe-form .form-field ( margen: 0 0 14px; ) ) @media solo pantalla y (ancho máximo: 480px) ( h1 ( tamaño de fuente : 30px; ) h2(tamaño de fuente: 25px;) .countdown_section ( borde: ninguno; relleno: 20px 20px; tamaño de fuente: 13px; alineación de texto: centro; ) .countdown_amount (tamaño de fuente: 40px; relleno: 0 0 10px 0; ) #counter(ancho: 30%; margen:0 auto;) ) @media pantalla única y (ancho máximo: 360px) ( h2(font-size: 22px;) .countdown_section ( padding: 21px 26px 21px 15px; ) .countdown_amount ( tamaño de fuente: 36px; ) )

Si verifica la visualización de la página en el navegador, debería verse así:

JQuery

Tenga en cuenta que no mostramos un mostrador. Para que aparezca, debe agregar el siguiente código antes de la etiqueta del cuerpo de cierre. Pero antes de eso, descargue el archivo del complemento, especificando la ruta al archivo.

Luego agregue el siguiente código para mostrar nuestro contador. Puede cambiar la fecha del medidor según sus deseos. Basta con especificar la fecha deseada dentro del parámetro "fecha de lanzamiento".

$(document).ready(function() ( var fecha de lanzamiento = nueva fecha(2014, 6 - 1, 7); $("#counter").countdown(( hasta: fecha de lanzamiento )); ))(jQuery);

Conclusión

¡Felicidades! Acabas de crear una interesante página de temporizador de cuenta regresiva. Esta página le permitirá informar a su visitante sobre la fecha de lanzamiento de su sitio y no perderlo.

Espero que hayas disfrutado de esta lección. Deja tus comentarios y preguntas, siempre estaré feliz de responderlas.

Si está planeando rediseñar su sitio web, realizarle un mantenimiento de rutina o lanzar un nuevo recurso web, entonces es muy importante que los visitantes no sean recibidos con una página en blanco. Las personas que visiten el sitio se perderán en los misterios de lo que está sucediendo, y esto no es muy bueno. Es mejor cuidar a los usuarios e informarles sobre la próxima apertura o reanudación del sitio mediante una página HTML especial. En el lenguaje común, esta página se denomina "stub". Difícilmente se puede sobreestimar su importancia, especialmente si desea hablar sobre su sitio y promocionarlo un poco. Hay dos tipos de stub: o es una página estática que informa a los usuarios la información que necesitan, o una página que despierta curiosidad y obliga al visitante, por ejemplo, a suscribirse para recibir notificaciones. FreelanceToday le ofrece 10 plantillas HTML gratuitas para crear marcadores de posición atractivos para sus sitios web.

Heartbeat es una plantilla HTML sencilla y elegante. La imagen de fondo monocromática y el temporizador de cuenta regresiva hacen que este complemento sea ideal para sitios web comerciales.

La plantilla Moon es ideal para las relaciones públicas de un sitio web. Hay varios puntos en la página donde puedes colocar información importante y temporizador de cuenta regresiva. La página responde, fue creada usando HTML5 y CSS3, se muestra en la mayoría de los navegadores y se ve bien en dispositivos móviles.

Layla es una de las mejores plantillas HTML gratuitas para crear un marcador de posición elegante. Buena combinación de colores, malla correcta y elegante. apariencia Haga que esta plantilla sea ideal para usar en sitios web de moda.

Una excelente plantilla para varios navegadores para crear un código auxiliar estricto. Fácil de personalizar y mostrar bien en dispositivos móviles. Hay un temporizador de cuenta atrás y la posibilidad de conectar una melodía.

Esta plantilla está limpia y diseño moderno. Ventajas: diseño adaptativo, formulario de contacto, compatibilidad entre navegadores. La plantilla se creó utilizando recursos, se incluyen todas las imágenes.

Un buen marcador de posición que sería apropiado en sitios web de turismo. Características de la plantilla: 8 combinaciones de colores, validación W3C HTML/CSS, cuenta atrás, formulario de contacto y posibilidad de suscribirse a notificaciones, efecto de paralaje en el fondo, barra de navegación.

Un enchufe que tiene una funcionalidad importante. La plantilla es fácil de personalizar y compatible con la mayoría de los navegadores. Ventajas: Google Maps, temporizador de cuenta regresiva, sección donde puedes publicar información sobre tu equipo, pie de página con información de contacto.

La plantilla UX es adecuada para la mayoría de los sitios web. El enchufe tiene un temporizador animado, Formulario de contacto, iconos redes sociales. La plantilla es fácil de personalizar y no requiere conocimientos especiales de HTML/CSS. La plantilla es responsiva y compatible con todos los navegadores.

Enchufe elegante y al mismo tiempo funcional. Características: diseño 100% responsivo, compatibilidad con varios navegadores, Google Maps, integración de Twitter, dos estilos de encabezado con efecto de paralaje y control deslizante. También hay un temporizador de cuenta atrás donde puedes corregir rápidamente la fecha de lanzamiento del sitio.

Una elegante plantilla HTML adecuada para sitios web de diversos temas. El enchufe no tiene extras especiales, pero tiene todo lo necesario: temporizador, central bloque de texto Para mensaje informativo, iconos de redes sociales. La plantilla responde y se muestra perfectamente en dispositivos móviles.

Últimamente han aparecido muchos recursos nuevos en Internet: algunos se lanzaron hace poco, otros están a punto de comenzar y algunos acaban de comenzar a desarrollar una tienda en línea u otro proyecto y están pensando en lanzarlo en seis meses o un año.

¿Es posible utilizar algunos elementos de marketing incluso antes de que nazca el proyecto con todas sus funcionalidades? ¡Indudablemente! Una de las primeras etapas del marketing es la comunicación con el visitante de un sitio que aún no funciona mediante páginas auxiliares o las llamadas páginas de presentación.

No mucha gente usa las páginas Splash, por lo que su presencia en el sitio brinda una ventaja y un impulso temprano para el desarrollo. Sin embargo, no todos los enchufes funcionarán con la misma eficacia. A continuación se ofrecen algunos consejos sobre cómo crear la página de destino adecuada y lanzar un proyecto en el futuro, teniendo ya una audiencia potencial.

Principios de una página de marcador de posición eficaz

Los marcadores de posición son esencialmente páginas de destino y se les aplican muchos de los principios de las páginas de destino eficaces. Echemos un vistazo más de cerca a los más importantes y veamos algunos ejemplos.

1. Conozca los límites para simplificar una página.

Por un lado, la página debe ser lo más sencilla posible. Pero sería un error dejar sólo un mensaje de que el sitio está en desarrollo.

El visitante tiene una pregunta lógica: dónde terminé y por qué necesito realizar tal o cual acción que me piden (por ejemplo, contactar por teléfono). Agregue un poco más de información a la página, haciéndola lo más útil posible tanto para el visitante como para usted.

2. Proporciona información sobre ti

Muestre al visitante que está exactamente donde necesita estar. Dígale dónde está usando un texto breve y lista con viñetas. Esta es la primera vez que conoces a una persona, ¿por dónde sueles empezar?

3. Puedes hacer una reseña en video.

Algunos sitios practican la publicación de reseñas de vídeos. Este Buen camino cuente cada vez más claramente cómo puede ser útil al visitante.

Las reseñas de vídeos son una buena herramienta, pero no te excedas. Sería un error molestar a su visitante activando automáticamente efectos de vídeo o audio, a menos, por supuesto, que su futuro sitio esté dedicado a juegos en línea.

4. Utilice un logotipo u otras imágenes asociadas con su industria.

Las imágenes que utilice en el sitio deben estar asociadas con el área de actividad de la empresa o el tema del proyecto. Las mujeres y los gatos son geniales, pero no siempre apropiados. Así es como se vería una página auxiliar para un sitio web de radio:

Y aquí se muestra bien la creatividad del diseñador, aunque no está claro de inmediato si el sitio estará dedicado al diseño.

5. Cuéntanos qué esperar

Es bueno que exista y planee acercarse a los usuarios de Internet, pero también díganos por qué la gente debería volver a su sitio más tarde. ¿Cuáles son sus planes para el proyecto o su funcionalidad? ¿O tal vez algo más?

Añade intriga para despertar la curiosidad. Por ejemplo, se puede utilizar un mensaje como intriga de que su servicio será un avance tecnológico o que la empresa ofrecerá descuentos o obsequios a los primeros clientes registrados. Servicios adicionales. A continuación se muestra un ejemplo de cómo los chicos de Netpeak crearon intriga antes de organizar la conferencia 8p, que tuvo lugar en el tan discutido fin del mundo en 2012. Esta idea les pareció creativa a muchos y compartieron el enlace a la página de resumen con sus amigos. en las redes sociales.

No es necesario crear intriga, simplemente animar a la persona a que vuelva más tarde. Una página de destino no sólo debe informar al visitante, sino también animarlo a compartir la página con sus amigos y regresar en el futuro.

6. Deja tu información de contacto

Dependiendo del tema del futuro sitio, a veces conviene dejar solo una dirección de correo electrónico, en otros casos, información más detallada, incluida la dirección física de la oficina y su horario de atención.

En el futuro necesitarás crear una comunidad. Haga esto ahora mismo utilizando herramientas listas para usar: las redes sociales. Además de que la presencia de estos enlaces aumentará la confianza en la empresa y en el futuro sitio, las personas incluidas en su comunidad siempre estarán al tanto de las novedades sobre las etapas de desarrollo o lanzamiento del recurso.

Sin embargo, no perfiles sociales Vacíos, llénalos con contenido útil para que tu público objetivo tenga algo a lo que suscribirse. A la gente no le gustan ni siguen cuentas de baja autoridad, cuentas de autoridad cero o perfiles con avatares estándar (como un huevo en Twitter).

8. Coloque un formulario de suscripción para recibir actualizaciones.

Además de utilizar las redes sociales, conéctate a newsletters por correo electrónico. Recolectar correos electrónicos su audiencia potencial ahora. Puedes enviarles un mensaje solo cuando se lanza el sitio, o puedes hacerlo periódicamente, informándoles en qué etapa se encuentra el desarrollo o algunos otros importantes en tu tema y, por supuesto, útiles para aquellas personas que te confían. sus contactos, aspectos .

Además del formulario para enviar correo electrónico, puede utilizar otros canales de comunicación con los clientes/audiencia, por ejemplo, un blog, agregándolo a un subdominio o subcarpeta e instalando WordPress estándar allí. Quizás este blog en el futuro no solo tenga un impacto positivo como herramienta de inbound marketing, sino que también ayude a aumentar la autoridad del recurso ante los motores de búsqueda.

9. Agrega una llamada a la acción

Su primer objetivo es crear una audiencia inicial y lograr que la gente regrese una vez que el sitio esté activo. Al llamar al usuario a la acción, le comunica sus intenciones y le recuerda sus opciones. “Suscríbete”, “Mira primero”, “Vuelve”, “Contáctanos”, “Lee más sobre nosotros”, “Síguenos en redes sociales”, etc. Utilice una o más llamadas a la acción según el tamaño de la página auxiliar. Si simplemente escribe que el sitio está en construcción, pocos de sus visitantes actuales volverán a él en el futuro.

En el siguiente ejemplo, la llamada a la acción se encuentra en la parte superior derecha con una flecha, y también en la parte inferior de la página, junto con el formulario de suscripción a notificaciones.

10. No optimice las páginas resguardadas para los motores de búsqueda.

Por supuesto, las páginas resguardadas también son buenas para el SEO, ya que puedes empezar a promocionar un sitio sin siquiera tener una. Como mínimo, el recurso ya estará en el índice; como máximo, ya podrá publicar enlaces a él tanto en foros como en redes sociales y en medios impresos.

Y aunque las páginas resguardadas se pueden utilizar para SEO, tienen más un propósito de marketing. Se recomienda encarecidamente no estropear la primera impresión de un recurso con texto SEO.

Espero que estos consejos le ayuden a completar las especificaciones técnicas para programadores ahora. A continuación se muestran dos ejemplos más de motivación. :)

Piense en su idea y configure una página de resguardo hoy, de modo que cuando lance su sitio, no tenga que buscar una audiencia, ¡sino que continúe trabajando con ella!

Un sitio web bonito permanece en la memoria del visitante durante mucho tiempo y esto, sin duda, es maravilloso. Hoy nos gustaría hablarles de un maravilloso complemento para su sitio, es decir, una página animada interactiva que estará constantemente en movimiento, además de responder al cursor del mouse y realizar acciones. La idea es crear una tierra y un avión que estará constantemente planeando, cuando el cursor se mueva, el avión cambiará de posición. Este tipo de interacción parece muy interesante y agradable.

FUENTES

Esta página se puede utilizar como fondo de un sitio web, una página con un pequeño mensaje de texto o un marcador de posición en una página; en cualquier caso, no te puedes equivocar. Este efecto se consigue gracias a la biblioteca 3D jQuery-Three.js.

Paso 1.HTML

Nuestro marcado y estilos serán bastante simples, ya que Three.js hará todo el trabajo, y los parámetros que especificamos en JS, todo lo que tenemos que hacer es llamar a estas funciones asignando id="world":

Los estilos también son bastante simples, por lo que no nos detendremos en ellos y pasaremos directamente al siguiente paso.

Paso 2.JS

Todo el procesamiento de eventos será realizado por JS y Three.js. Para implementar dicho diseño, configuramos los siguientes valores para el evento aleatorio en bucle.

Var Colores = ( rojo: 0xf25346, amarillo: 0xedeb27, blanco: 0xd8d0d1, marrón: 0x59332e, rosa: 0xF5986E, marrón oscuro: 0x23190f, azul: 0x68c3c0, verde: 0x458248, morado: 0x551A8B, verde claro: 0x62926 5 , ); var escena, cámara, campo de vista, relación de aspecto, plano cercano, plano lejano, ALTURA, ANCHO, renderizador, contenedor; function createScene() ( // Obtenga el ancho y el alto de la pantalla // y utilícelos para ajustar la // relación de aspecto de la cámara y el tamaño del renderizador. HEIGHT = window.innerHeight; WIDTH = window.innerWidth; // Crea la escena. escena = new THREE .Scene(); // Agrega un efecto de niebla FOV a la escena. scene.fog = new THREE.Fog(0xf7d9aa, 100, 950); // Crea un aspecto de cámara Ratio = ANCHO / ALTO; fieldOfView = 60 ; NearPlane = 1; FarPlane = 10000; cámara = new THREE.PerspectiveCamera(fieldOfView,spectRatio, nearPlane, farPlane); // Posición de la cámara camera.position.x = 0; camera.position.y = 150; camera.position.z = 100; // Crea un renderizador renderer = new THREE.WebGLRenderer(( // Hace que el fondo sea transparente, rendimiento anti-aliasing alfa: verdadero, antialias: true )); // establece el tamaño del renderizador en pantalla completa renderer.setSize( WIDTH, HEIGHT); // habilitar el renderizador de sombras .shadowMap.enabled = true;//Agregar renderizador a eventos DOM y DIV contenedor = document.getElementById("world"); contenedor.appendChild(renderer.domElement); //Respuesta window.addEventListener("resize", handleWindowResize, false); ) //Capacidad de respuesta de las funciones función handleWindowResize() ( ALTO = ventana.altointerior; ANCHO = ventana.anchoinner; renderer.setSize(ANCHO, ALTO); camera.aspect = ANCHO / ALTO; camera.updateProjectionMatrix(); ) var hemispshereLight, luz de la sombra ; function createLights() ( // Degradado de color luz cielo, suelo, intensidad hemisphereLight = new THREE.HemisphereLight(0xaaaaaa, 0x000000, .9) // Rayos paralelos ShadowLight = new THREE.DirectionalLight(0xffffff, .9); ShadowLight.position. set(0, 350, 350); ShadowLight.castShadow = true; // define el área visible de la sombra proyectada 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; // Tamaño del mapa de sombras ShadowLight.shadow.mapSize. ancho = 2048; shadowLight .shadow.mapSize.height = 2048; // Agrega luces a la escena scene.add(hemisphereLight); scene.add(shadowLight); ) Land = function() ( var geom = new THREE. CilindroGeometría(600, 600, 1700, 40, 10); //rotación a lo largo del eje x geom.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI / 2)); //crea un material var mat = new THREE.MeshPhongMaterial(( color: Colors.lightgreen, shading: THREE.FlatShading, )); //crea una malla del objeto this.mesh = new THREE.Mesh(geom, mat); //recibir sombras this.mesh.receiveShadow = true; ) Órbita = función() ( var geom = nuevo TRES.Object3D(); this.mesh = geom; //this.mesh.add(Sol); ) Sol = función() ( this.mesh = nuevo TRES.Object3D( ); var sunGeom = new THREE.SphereGeometry(400, 20, 10); var sunMat = new THREE.MeshPhongMaterial(( color: Colors.amarillo, sombreado: THREE.FlatShading, )); var sun = new THREE.Mesh(sunGeom , sunMat); sun.castShadow = false; sun.receiveShadow = false; this.mesh.add(sun); ) Cloud = function() ( // Crea un contenedor vacío para la nube this.mesh = new THREE.Object3D( ); // Geometría del cubo y material var geom = new THREE.DodecahedronGeometry(20, 0); var mat = new THREE.MeshPhongMaterial(( color: Colors.white, )); var nBlocs = 3 + Math.floor(Math. aleatorio( ) * 3); para (var i = 0; i

Como resultado, obtenemos un complemento de sitio maravilloso con capacidad de respuesta y adaptabilidad.