software1

Ejemplos brillantes de la tendencia del diseño web con un efecto de linterna


En 2019 ya había numerosas pequeñas tendencias en las que el Mauszeiger jugó el primer violín: huellas del mouse, efectos repulsivos, globos 3D interactivos y fantásticos efectos de desplazamiento, solo por nombrar algunos. Jugar con la pantalla se ha convertido en la corriente principal. Todos quieren ser una parte orgullosa y hacer una valiosa contribución.

De hecho, las bibliotecas HTML5 y JavaScript experimentales modernas han abierto enormes oportunidades para los desarrolladores web. Y parece que con experimentos ocasionales hemos pasado de la fase de inmersión del dedo del pie a una fase de innovación constante.

La práctica muestra que los artistas sostienen ambos pies en el suelo. Se esfuerzan por superar los límites y probar los límites de la tecnología. Hoy investigaremos otra pequeña tendencia.

Ya hemos examinado el extraordinario efecto de rayos X . Ahora es el momento de enfocarse en los efectos que imitan la linterna. Ambos trucos nos hacen ver algo que está oculto a simple vista. Mientras que el primero se siente técnicamente y avanzado, por el contrario, se siente simple y rústico.

Despierta nuestro interés de una manera lúdica y discreta. Aquí, el puntero del mouse recuerda a una varita que produce un destello de luz para iluminar el entorno. Realmente se siente mágico. Lumos Maxima una de las mendacies más populares en el universo de Harry Potter, fue hábilmente imitado en la expansión de la Web. y disfrutaremos de la encarnación digital. Vamos

The Web Designer Toolbox

Número ilimitado de descargas: ¡más de 1,000,000 de plantillas web, temas, complementos, recursos de diseño y más!

ThePXA es una agencia creativa. Es natural que el equipo quiera destacarse de la multitud. Por lo tanto, su sitio web da la bienvenida a la audiencia con un área de bienvenida única. Toda la pantalla es un patio interactivo. Está oscuro con muchas partículas que parecen un cielo nocturno con cientos de copos de nieve.

Aquí está el puntero del mouse, una linterna con un rango bastante grande. Ilumina elementos de la interfaz de usuario de manera eficiente y los hace más brillantes. El truco provoca la sensación de que puedes mirar en los rincones más oscuros y encontrar algo interesante. Simple, pero realmente atractivo.

 Ejemplo de PXA

Creative Nights es otro punto en este caso. El sitio web también tiene una estética oscura; Incluso diría que casi no. Sin embargo, no se siente amenazante; se siente complicado y refinado. Similar al ejemplo anterior, el puntero del mouse crea un halo que resalta un área relativamente grande.

A diferencia del PXA, donde todos los elementos de la interfaz de usuario son visibles, la escena está oculta detrás de la oscuridad. Solo el puntero del mouse convertido en una linterna puede cortar y revelar lo que hay allí.

Tenga en cuenta que este truco se utiliza para convertir un carrusel normal en un área de juego con componentes. Interactúa con los usuarios y aumenta su interés a un nivel inconsciente.

 Ejemplo de noches creativas

El efecto también funciona bien con soluciones 3D. Considere L2D.

Aquí hay una sección de héroe donde un experimento en 3D con lienzo roba el espectáculo. Entretiene a los visitantes en línea y demuestra la profesionalidad de la empresa.

Si bien algunos consideran que es más que suficiente para dejar una impresión, el equipo ha decidido intensificar aún más el impacto. Ha convertido el puntero del mouse en una linterna que ilumina todas las caras del objeto. Inteligente y creativo.

 Ejemplo para L2D

Pygar es un ejemplo en el que el efecto de la linterna golpea el efecto de rayos X, dando como resultado un resultado emocionante. Se diferencia de lo mencionado anteriormente en varios puntos:

  • Primero, el sitio tiene una estética ligera con un fondo casi blanco.
  • En segundo lugar, el puntero del mouse es un gran blob que significa transformarse suave y continuamente. A veces parece que te va a llevar la vida.
  • Tercero, cambia su color de púrpura a azul, atrayendo constantemente la atención.
  • Cuarto, cambia su tamaño de pequeño a grande.
  • Y finalmente ilumina el texto pintando en diferentes colores.

Apuesto a que es algo que agradecería a Luna Lovegood . Pero también creemos que es asombroso.

 Ejemplo de Pygar

Similar al ejemplo anterior, el equipo detrás de Lusion descartó el haz blanco tradicional y optó por uno decididamente coloreado. Aunque no cambia su tono constantemente, todavía se ve muy bien.

Aquí está el puntero del mouse, un pequeño punto rojo que recuerda un poco a un puntero láser. A diferencia de su análogo real, este tiene un pequeño halo que ilumina la superficie circundante. Se adapta perfectamente al entorno morado. Además, encaja bien con la parte interactiva en la parte posterior, creando una interacción compleja.

 Ejemplo de Lusion

Ya hemos visto cómo se usa la solución como reflector. Ahora es el momento de explorar otra forma de implementar esta tendencia.

Le Mirabeau Hotel y Once Upon a Time Mag son dos ejemplos representativos. Aquí la solución no es ruidosa, abrumadora o llamativa. Esto completa la composición y le da al proyecto una pieza sutil de interactividad. Ambos casos tienen un efecto de linterna apenas perceptible. Sin embargo, está aquí y ciertamente contribuye a la facilidad de uso.

En el caso del Hotel Le Mirabeau, el cursor del mouse ilumina el fondo solo ligeramente. De esta manera, el equipo ha resaltado discretamente la atmósfera mágica de invierno que se puede ver en las imágenes.

 Ejemplo del Hotel Le Mirabeau

El equipo detrás del diseño del sitio web de "Once Upon a Time" hace el mismo truco. Esta vez, sin embargo, el puntero del mouse apunta suavemente hacia los bordes de la superficie, mostrando su naturaleza volumétrica sutil.

 Ejemplo de un mag de antaño

Joel Maynard no solo toma esta tendencia en serio, sino también literalmente. Si bien en todos los ejemplos anteriores, el puntero del mouse se siente como una varita cuyo extremo emite luz, aquí tiene la forma de una linterna clásica.

En realidad, mueves una linterna sobre la superficie. También es un juego de búsqueda. El autor te invita a una pequeña cacería. Debes encontrar sus obras ocultas en toda la página de inicio.

Para aquellos de ustedes que no tienen ganas de buscar, hay una "palabra mágica" que revela todo con un solo clic.

 Ejemplo de Mynrd

En busca de la luz

Es seguro decir que este es el año del puntero del mouse . Respalda numerosas soluciones sobresalientes, ideas y extravagancias. No solo activan la interfaz de usuario con JavaScript magic, sino que también enriquecen la experiencia del usuario con agradables sorpresas.

El efecto de una linterna puede sonar un poco normal al principio, pero definitivamente es inspirador. Y a diferencia del resto, tiene un toque de misterio que, por supuesto, despierta interés y nos anima a explorar el proyecto por más tiempo.



Software servicio tecnico de Cea Ordenadores

Comentarios desactivados en Ejemplos brillantes de la tendencia del diseño web con un efecto de linterna