¿Cómo poner fotos 3D en tu web con fyuse?

Pon Fotos 3D en tu sitio web. con fotos tomadas de tu celular Android o Iphone

Ejemplos

Haz Click en la imagen

La experiencia es mejor en el celular, intenta inclinar tu pantalla del móvil.

Author: @Brennan

¿Qué es Fyuse?

¡Uf! 🙀 ¿Muy bonito verdad?

Fyuse es una App (red social) que encontrarás en la App Store y en la Play Store de Google el concepto es "Capturar el momento como siempre debieron ser, en 3D" y realmente lo logran, el efecto que se genera con la aplicación llama la atención y realmente te conecta con el momento capturado.

Fyuse aún no es muy conocido, puedes aprovechar ese factor para hacer algo diferente.

Uso de Fyuse

¿Qué podemos hacer con Fyuse?

Nos ayuda a potenciar la experiencia visual de cualquier cosa, un ejemplo (que me encantaría hacer) es un sitio web de peluquería 💈 (barbería o estilismo),

funciona perfecto para dos cosas:

Primero como 📓 Catálogo de cortes de cabello, las fotos de los catálogos están bien pero hay dos problemas, no podemos ver todos los ángulos y no son realistas, normalmente son modelos demasiado irreales, con la aplicación no hay más opción más que el barbero tome la foto y además podrás ver la foto en distintos ángulos.

Segundo como 💇‍♂💇‍♀ recordatorio de corte de cabello, creo que a todos nos pasó que nuestro peluquero favorito no recuerda el corte de cabello que nos hizo, o vamos a otros peluquero y no sabes cómo explicarle el corte de cabello que quieres, gracias a la aplicación estos problemas desaparecen con sólo mostrarle al peluquero el corte de cabello con Fyuse tendrá una mejor idea de cómo hacer tu corte de cabello.

Una peluquería podría hacer un sistema web donde pueda registrar y catalogar a sus clientes y tomar estas fotos Fyuse.

Ejemplos:

Author: @pikassobarbershop

Author: @nacho_manassero

Esto de las barberías es sólo un ejemplo, otro ejemplo sería un restaurante, funciona para capturar la comida y para mostrar el ambiente del restaurante, se me ocurren muchos ejemplos pero te los dejo a tu imaginación.

Author: @ryanbyryanchua

Author: @CHINA_Traveler

¿Cómo insertar Fyuse en mi sitio web?

Ya hay unos tutoriales, pero no están en español.

Yo te enseñaré la forma en la que me gusta hacerlo, Fyuse lo que recomienda como primera opción es insertar un script a tu sitio web, personalmente creo que es mejor evitar insertar scripts, nosotros introduciremos unos iFrames, espera ¿No entiendes bien estos términos? no te preocupes, prometo ser claro 🙋🏻‍♂.

No importa con qué esté hecho tu sitio web, mientras tengas acceso al HTML podrás insertar Fyuse.

Aquí te muestro exactamente qué debes insertar:

<iframe src="https://fyu.se/v/embed/71amvr82nq?preload=0&nologo=1" width="320" height="520" allow="accelerometer; autoplay; gyroscope" allowfullscreen></iframe>

Relájate, no es tan complicado te lo explicaré, vamos por partes...

<iframe ></iframe>

Un Iframe es una etiqueta HTML que incrusta otro documento HTML de otro sitio web. si no sabes qué es HTML aquí te dejo un vídeo explicándolo.

Dentro de este Iframe podemos añadirle ciertas propiedades, la propiedad más importante es la siguiente

<iframe src=""></iframe>

El src="" es la URL de lo que quieres insertar, y ahora te preguntarás ¿qué URL ponemos?, bueno debes ir a la aplicación y entrar al Fyuse que quieres poner en tu sitio web, verás que hay una opción que dice "compartir" el cuál te dará la URL de ese Fyuse

https://www.fyu.se/v/71amvr82nq

este es un ejemplo, a esta URL debes agregarle algo en medio la palabra "embed" y además quitarle el "www" de esta manera, mira:

https://fyu.se/v/embed/71amvr82nq

ahora lo añadirmos a nuestro código

<iframe src="https://fyu.se/v/embed/71amvr82nq"></iframe>

agregamos un Alto y un Ancho a nuestro iframe, así

<iframe src="https://fyu.se/v/embed/71amvr82nq" width="320" height="520"></iframe>

También deberías añadir esto

<iframe src="https://fyu.se/v/embed/71amvr82nq" width="320" height="520" allow="accelerometer; autoplay; gyroscope" allowfullscreen></iframe>

el allow permitirá usar el giroscopio del celular, para que se pueda ver el efecto sólo inclinando y moviendo el celular

Y esto es suficiente para ponerlo en tu sitio, pero también hay más opciones que le puedes poner, por ejemplo

<iframe src="https://fyu.se/v/embed/71amvr82nq?preload=0&nologo=1" width="320" height="520" allow="accelerometer; autoplay; gyroscope" allowfullscreen></iframe>

Si te fijas bien en la URL agregamos algunos parámetros:

el preload=0 Quiere decir el Fyuse tendrá una miniatura, a la cuál se debe hacer click antes de que sea funcional (como un video al que debes darle play), el preload=1 quita esa miniatura.

preload=1:

preload=0:

Por defecto el preload siempre es 0 sin necesidad de que lo especifiques, te recomiendo dejarlo así porque de lo contraría hará que tu sitio web sea más lento, pero si sólo son uno o dos fyuses no deberían hacer mucho daño y puedes poner el preload en 1.

el nologo=1 simplemente quita el logo de Fyuse.

El símbolo de "?" que se añadió simplemente le indica a la URL que se añadirán parámetros (o peticiones), y el símbolo "&" simplemente indica que hay otro parámetro por delante.

Hay muchas más opciones que podrás ver aquí pero normalmente no los necesitarás.

Recuerda que al ser HTML también puedes agregar estilos, como esto: