Cómo hacer una página con un frame animado ajustable

ultracobra · 5 Jun 2023

Quisiera una explicación de cómo hacer una página como esta, tecnologías usadas, se ve increíble en cada tamaño de pantalla.

El frame animado está muy bien ajustado y en cada caso se muestra en la parte visible, dejando a voluntad del usuario cuando hacer scroll down para ver el resto de la página:

Open AI inicio animado!!!

BotBeta · 5 Jun 2023

La página de OpenAI utiliza las siguientes tecnologías:

1. HTML5: estructura básica de la página.
2. CSS3: estilos y diseño responsivo.
3. JavaScript: interacciones y animaciones.
4. ReactJS: librería popular de JavaScript para la interacción de la interfaz de usuario.

Para lograr la adaptabilidad en diferentes tamaños de pantalla, se utilizan consultas de medios (media queries) de CSS y diseño responsivo. El frame animado se ajusta utilizando position: absolute o relative, y las animaciones se realizan con librerías como GSAP (GreenSock Animation Platform) o directamente en CSS.

Para crear una página similar, aprende HTML5, CSS3, JavaScript y ReactJS; y familiarízate con conceptos como diseño responsivo y animaciones.

Angel Javier · 5 Jun 2023

ultracobra dijo:
Quisiera una explicación de cómo hacer una página como esta, tecnologías usadas, se ve increíble en cada tamaño de pantalla.

El frame animado está muy bien ajustado y en cada caso se muestra en la parte visible, dejando a voluntad del usuario cuando hacer scroll down para ver el resto de la página:

Open AI inicio animado!!!

No es tan difícil.

El "fondo animado" hasta un video o gif se puede utilizar.

ultracobra · 5 Jun 2023

Angel Javier dijo:
No es tan difícil.

El "fondo animado" hasta un video o gif se puede utilizar.

Es un gran trabajo que se ajusta perfectamente a cada pantalla y eso no me parece tan sencillo... Es un reto y quiero una página así...

Angel Javier · 5 Jun 2023

ultracobra dijo:
Es un gran trabajo que se ajusta perfectamente a cada pantalla y eso no me parece tan sencillo... Es un reto y quiero una página así...

Dependerá de que lenguaje lo trabajes

Kung Seo · 5 Jun 2023

Concuerdo en que no es tan dificil, simplemente el detalles es la adaptación que llevaría más tiempo, puedes buscar a programador que te apoye con eso.

ultracobra · 5 Jun 2023

Kung Seo dijo:
Concuerdo en que no es tan dificil, simplemente el detalles es la adaptación que llevaría más tiempo, puedes buscar a programador que te apoye con eso.

Entonces lo haré compadres, y apenas resulte le mostraré; no soy experto en frameworks, sigo estudiando...

ultracobra · 5 Jun 2023

BotBeta dijo:
La página de OpenAI utiliza las siguientes tecnologías:

1. HTML5: estructura básica de la página.
2. CSS3: estilos y diseño responsivo.
3. JavaScript: interacciones y animaciones.
4. ReactJS: librería popular de JavaScript para la interacción de la interfaz de usuario.

Para lograr la adaptabilidad en diferentes tamaños de pantalla, se utilizan consultas de medios (media queries) de CSS y diseño responsivo. El frame animado se ajusta utilizando position: absolute o relative, y las animaciones se realizan con librerías como GSAP (GreenSock Animation Platform) o directamente en CSS.

Para crear una página similar, aprende HTML5, CSS3, JavaScript y ReactJS; y familiarízate con conceptos como diseño responsivo y animaciones.

Dame un guideline para hacer esa animación (no consta que 'vite' la versión actual) para hacer el deploy de ese index con Framer

BotBeta · 5 Jun 2023

ultracobra dijo:
Dame un guideline para hacer esa animación (no consta que 'vite' la versión actual) para hacer el deploy de ese index con Framer

Para crear una animación similar a la de OpenAI en un proyecto Framer, sigue estos pasos:

1. Instala Framer: Ve al sitio web de Framer (https://www.framer.com/) y regístrate. Luego, descarga e instala Framer en tu computadora.

2. Diseña la interfaz: Abre Framer y crea un nuevo proyecto. Diseña la interfaz, incluidos los elementos que se animarán como imágenes, textos y formas.

3. Crear interacción: Utiliza los componentes y eventos integrados en Framer para agregar interacción a tus elementos. Por ejemplo, puedes usar "On Tap" para animar un elemento cuando hagas clic en él.

4. Animaciones: Agrega animaciones a tus elementos utilizando el panel de animaciones en Framer. Puedes utilizar tweens, easing y otros ajustes preestablecidos para lograr animaciones suaves y atractivas.

5. Diseño responsivo: Asegúrate de que tu diseño se adapte a diferentes tamaños de pantalla utilizando restricciones, puntos de anclaje y componentes flexibles.

6. Previsualiza y exporta: Previsualiza tu proyecto en Framer y ajusta las animaciones según sea necesario. Exporta tu proyecto como código JSX para React y guarda los archivos en tu computadora.

7. Integración con React: Integra el código JSX generado en tu proyecto de React. Puedes utilizar librerías como react-transition-group o react-spring para agregar animaciones y transiciones avanzadas.

8. Ajustes finales: Realiza los ajustes necesarios en tu código para lograr la animación y el diseño responsivo deseados. Utiliza consultas de medios (media queries) para garantizar que tu diseño se adapte correctamente en diferentes dispositivos.

9. Despliegue: Una vez que estés satisfecho con tu animación y diseño responsivo, despliega tu aplicación utilizando una herramienta como Vercel o Netlify.

Con estos pasos, podrás crear una animación similar en Framer y luego desplegarla en un proyecto de React.

Puko · 5 Jun 2023

¿cuál es el html, css para hacer un <div> id header que tenga width 100% y el height por ejemplo 88px pero cuando se redusca la pantalla tenga mas px y dentro del <div>id header tenga un <video> con width y height 100%?

BotBeta · 5 Jun 2023

Puko dijo:
¿cuál es el html, css para hacer un <div> id header que tenga width 100% y el height por ejemplo 88px pero cuando se redusca la pantalla tenga mas px y dentro del <div>id header tenga un <video> con width y height 100%?

Para lograr esto, puedes usar el siguiente código HTML y CSS.

HTML:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Header con Video</title>
</head>
<body>
    <div id="header">
        <video src="ruta/alejemplo/video.mp4" autoplay loop muted></video>
    </div>
</body>
</html>

CSS (styles.css):

CSS:

body, html {
    margin: 0;
    padding: 0;
}

#header {
    width: 100%;
    height: 88px;
    overflow: hidden;
    position: relative;
}

#header video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
}

@media screen and (max-width: 768px) {
    #header {
        height: 120px; /* Ajusta por la altura deseada cuando se redusca la pantalla */
    }
}

Este código crea un div con ID "header" que tiene un ancho del 100% y una altura de 88px. Dentro del div, hay un video con width y height al 100%. Cuando se reduce la pantalla a 768px o menos, el header cambia su altura a 120px (o al valor que desees).

Puko · 5 Jun 2023

BotBeta dijo:
Para lograr esto, puedes usar el siguiente código HTML y CSS.

HTML:

HTML:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>Header con Video</title> </head> <body> <div id="header"> <video src="ruta/alejemplo/video.mp4" autoplay loop muted></video> </div> </body> </html>

CSS (styles.css):

CSS:

body, html { margin: 0; padding: 0; } #header { width: 100%; height: 88px; overflow: hidden; position: relative; } #header video { width: 100%; height: 100%; object-fit: cover; position: absolute; } @media screen and (max-width: 768px) { #header { height: 120px; /* Ajusta por la altura deseada cuando se redusca la pantalla */ } }

Este código crea un div con ID "header" que tiene un ancho del 100% y una altura de 88px. Dentro del div, hay un video con width y height al 100%. Cuando se reduce la pantalla a 768px o menos, el header cambia su altura a 120px (o al valor que desees).

A <video> agregale "loop" y un "opacity"

BotBeta · 5 Jun 2023

Puko dijo:
A <video> agregale "loop" y un "opacity"

Para agregar la propiedad "loop" y aplicar un efecto de "opacity" al elemento <video>, puedes realizar los siguientes cambios en el código HTML y CSS.

HTML:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Header con Video</title>
</head>
<body>
    <div id="header">
        <video src="ruta/alejemplo/video.mp4" autoplay loop muted></video>
    </div>
</body>
</html>

CSS (styles.css):

CSS:

body, html {
    margin: 0;
    padding: 0;
}

#header {
    width: 100%;
    height: 88px;
    overflow: hidden;
    position: relative;
}

#header video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    opacity: 0.7; /* Añade la propiedad "opacity" con un valor entre 0 y 1*/
}

@media screen and (max-width: 768px) {
    #header {
        height: 120px; /* Ajusta por la altura deseada cuando se redusca la pantalla */
    }
}

El autoplay, loop, y muted ya están aplicados en el elemento <video> del HTML. En el archivo CSS, se añade la propiedad "opacity" con un valor de 0.7 (cambia este valor según tu preferencia) en la regla #header video para aplicar una transparencia al video. Puedes ajustar el valor de la opacidad según el efecto que desees.

Puko · 6 Jun 2023

Es un <div> con width 100% y con un height fijo en px
adentro contiene un <video> con autoplay y loop

ultracobra · 6 Jun 2023

Puko dijo:
Es un <div> con width 100% y con un height fijo en px
adentro contiene un <video> con autoplay y loop

Me quito el sombrero parce. Me encanta eso: respuesta certera, ahora a hacerle se dijo... Buscaré otro gif que se desplegue bien... Esos snippets de CodePen son geniales...

ultracobra · 7 Jun 2023

Puko dijo:
Es un <div> con width 100% y con un height fijo en px
adentro contiene un <video> con autoplay y loop

Bueno, lo hice en local y buscaré un gif que haga una transición visual más suave, y haré transiciones más suaves que casi te marea... 👍

ultracobra · 7 Jun 2023

Puko dijo:
Es un <div> con width 100% y con un height fijo en px
adentro contiene un <video> con autoplay y loop

Lo hice así @Puko

eldorado-digital

Mi lucha ahorita es hacer los botones clickeables. Quizá le cambie el video para que no haya lío con el diseño del material (por si acaso)

Se ve tán fácil en https://openai.com/ y los botones aunque resimples son muy estilizados...

También mola el reproductor ya que para algunos seguro les marea...

Puko · 7 Jun 2023

ultracobra dijo:
También mola el reproductor ya que para algunos seguro les marea...

como que me falto algo, la opacidad y la velocidad

BotBeta dijo:

¿cómo le agrego a <video> velocidad de reproducción, y para que se vea mas obscuro?

BotBeta · 7 Jun 2023

Puko dijo:
¿cómo le agrego a <video> velocidad de reproducción, y para que se vea mas obscuro?

Para agregar velocidad de reproducción y hacer que el video se vea más oscuro, puedes realizar los siguientes cambios en el código HTML y agregar un poco de CSS adicional.

HTML:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Video con velocidad ajustada y oscurecido</title>
</head>
<body>
    <div id="header">
        <video id="video" src="ruta/alejemplo/video.mp4" autoplay loop muted></video>
    </div>
</body>
<script>
    // Añadir velocidad de reproducción al elemento <video>
    document.addEventListener('DOMContentLoaded', function () {
        const video = document.getElementById('video');
        video.playbackRate = 1.5; // Ajusta la velocidad de reproducción (1.0 es normal)
    });
</script>
</html>

CSS (styles.css):

CSS:

body, html {
    margin: 0;
    padding: 0;
}

#header {
    width: 100%;
    height: 88px;
    overflow: hidden;
    position: relative;
}

#header video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
}

#header:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.6); /* Agrega oscurecimiento (ajusta valor alpha para más oscuro) */
}

En el código HTML, hemos agregado un <script> donde se ajusta la velocidad de reproducción (playbackRate) del video. Aquí, 1.5 es 1.5 veces más rápido que la velocidad normal (1.0 es la velocidad normal).

En el archivo CSS, utilizamos la pseudo-elemento :before en el selector #header para agregar un oscurecimiento al video. La propiedad background-color tiene un valor rgba con un canal alpha de 0.6, lo que permite oscurecer el video. Puedes ajustar este valor según tu preferencia (aumenta el valor para oscurecerlo aún más).

ultracobra · 12 Jun 2023

Angel Javier dijo:
Dependerá de que lenguaje lo trabajes

Mira que me resultó e incluso lo encajé en una marco y me ha gustado. Dime qué tal, es algo pesado el origen...

gorgeous-cucurucho.netlify.app/