WebSite X5Help Center

 
Octavio Luis L.
Octavio Luis L.
User

IMAGENES FULL PAGE CON SCROLL  es

Auteur : Octavio Luis L.
Visité 2021, Followers 1, Partagé 0  

Hola

Busco ayudas, ideas...

Es posible hacer algo como esto con WebsiteX5 cargar una imagen full por pantalla que al hacer scroll pase a otra imagen completa ..... esta opcion tiene un navegador lateral .... 

http://creativewordpressthemes.multipurposethemes.com/hola/#About

Imagen full page, que con el scroll pase a la siguiente varias veces...

Se les ocurre alguna idea de como implementarlo con X5

Gracias 

Posté le
7 RéPONSES - 2 UTILE
Jorge M.
Jorge M.
Moderator

Hola Octavio, muy buen efecto, si lo revisas es bien sencilla la página solo un scroll vertical a pantalla completa, mira estos ejemplos de diseño, están listos solo adaptar a WebSite X5:

Como dicen ahí solo necesitas HTML, CSS y Javascript

El asunto es la implemantación, si tengo tiempo lo pruebo.

Revisa, prueba y comenta cualquier duda.
Saludos
Jorge M.

----------------------------------------------------------------------------------------------------------

¡Cada respuesta correcta/útil cuenta! como reconocimiento a un esfuerzo, así que:

  • Si una respuesta es correcta o te ayuda dale la opción de Correcto.
  • Si una respuesta te sirve, sea o no sea tu pregunta, dale útil.
  • Si no te sirve ninguna respuesta, para ayudar a comprender mejor la pregunta trata de agregar links o capturas de Vista Previa, Rejilla de Maquetación, Navegador
  • Para las capturas: usa la opción Añadir una imagen desde su PC.
Lire plus
Posté le de Jorge M.
CARLOS AMARAL
CARLOS AMARAL
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

Y si en lugar de utilizar una galeria con scroll, que lo que vi es que si quieres subir rapido tienes que ir esperando que se cumpla el tiempo de cada imagen y cada animacion. Lo que puedes hacer es poner objetos de texto hacia abajo, con imagenes de fondo con efecto paralax ajustadas al ancho de pantalla. Luego a cada objeto de texto le pones un delimitador (el ancla) con un nombre distinto para poder tener un menu que te lleve a cada uno de ellos directamente con un simple click.

Con eso me parece que no necesitas complicarte la vida con codigo externo, y queda mas practico ya que puedes ir al inicio de la pagina mucho mas rapido que como esta el ejemplo ese, que tienes que esperar a que se cumpla la animacion de cada seccion.

Cualquier cosa a las ordenes.

Slds.

Carlos A.

Lire plus
Posté le de CARLOS AMARAL
Octavio Luis L.
Octavio Luis L.
User
Auteur

Gracias Jorge y Carlos por las sugerencias. 

Voy a intentar las dos. La tuya Carlos veré si logré entender lo que explicaste. 

Pero voy a intentar hacerlo y despues en todo caso vuelvo a consultar. 

Saludos 

Gracias por la colaboracion !!!! 

Lire plus
Posté le de Octavio Luis L.
CARLOS AMARAL
CARLOS AMARAL
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

No he podido ponerte capturas de pantalla porque no tengo el programa a mano ya que estoy en mi trabajo, (y no lo puedo instalar porque no tiene para configurar que se pueda instalar en una empresa donde se sale a internet por proxy - ya esta hecha la sugerencia y nada) pero si es necesario luego desde mi casa te puedo hacer algun ejemplo...

suerte colega!

Carlos A.

Lire plus
Posté le de CARLOS AMARAL
Jorge M.
Jorge M.
Moderator

Hola Octavio y Carlos

Carlos Amaral
Y si en lugar de utilizar una galeria con scroll, que lo que vi es que si quieres subir rapido tienes que ir esperando que se cumpla el tiempo de cada imagen y cada animacion. Lo que puedes hacer es poner objetos de texto hacia abajo, con imagenes de fondo con efecto paralax ajustadas al ancho de pantalla. Luego a cada objeto de texto le pones un delimitador (el ancla) con un nombre distinto para poder tener un menu que te lleve a cada uno de ellos directamente con un simple click. Con eso me parece que no necesitas complicarte la vida con codigo externo, y queda mas practico ya que puedes ir al inicio de la pagina mucho mas rapido que como esta el ejemplo ese, que tienes que esperar a que se cumpla la animacion de cada seccion. Cualquier cosa a las ordenes. Slds. Carlos A.

Si es una solución interesante e ingeniosa, pero se dará vueltas (se descuadrará) cuando cambies las resoluciones, además lo interesante en el efecto que propone Octavio es que es una sola imagen, no hay nada más en la pantalla, si intentas desplazarte para abajo se activa el scroll. La solución que plantea Carlos dependerá de las resoluciones en que se definan las pantallas, sería bueno ver el ejemplo colega yo también me apunto a ver como te queda.

En estas preguntas se extraña la presencia de‪ KolAsim ‪ ‪

Saludos

Jorge M.

Lire plus
Posté le de Jorge M.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Jorge M.
... [...]... ... En estas preguntas se extraña la presencia de‪ KolAsim ‪ ‪ Saludos Jorge M.

hola, gracias por nombrarmelaughing, y hola a todos ...wink
... en el sitio de la primera publicación, la presentación de fondo está solo en la página de inicio ...
... pero podrías tener todas las páginas ...
... entonces, si crea la presentación de diapositivas en una página independiente, ... con mi código simple creado en 2009, (div_custom + iframe) será muy fácil de insertar en su sitio con un simple copiar/pegar ...
...
... si desea hacer una prueba rápida basada en mi página con MAXIMAGE, intente pegar este código en la sección:
>> Paso 1 - Ajustes > Sección Avanzadas > Estadísticas, SEO y Código > Las opciones de la sección Avanzado | ▪Código personalizado: > Antes del cierre de la etiqueta BODY
... o, solo para la página INICIO, en la sección:
Paso 3 - Mapa > Ventana Propiedades de la página > Las opciones de la sección Avanzado | ▪Código personalizado: > Antes del cierre de la etiqueta BODY
... Código:

<div style="position:fixed;top:0px;left:0px;width:100%;height:100%;z-index:-1"><iframe src="http://www.kolasim-zone.it/supersfondok/maximage.html" width="100%" height="300" style="position:absolute;top:0px;left:0px;height:100%;"></iframe></div>

>>ejemplo básico

(IT) - ciao, grazie per avermi nominato, e ciao a tutti...
... nel sito del primo post lo slideshow di sfondo è solo nella pagina HOME...
... ma si potrebbe avere per tutte le pagine...
... quindi, se si realizza lo slideshow in pagina indipendente, ... con un mio semplice codice ideato nel 2009, (div_custom+iframe) diventerà semplicissimo da inserire nel proprio sito con un semplicissimo copia/incolla...
...
... se si volesse fare una rapida prova basata su una mia pagina con MAXIMAGE, provare ad incollare questo codice nella sezione:
passo_1 | Esperto
... oppure, solo per la pagina HOME, nella sezione:
Paso_3 | Esperto

>> esempio di base

.

ciao wink

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Jorge M.
Jorge M.
Moderator

Hola KolAsim ‪ ‪

 ‪ KolAsim ‪ ‪
Jorge M. ... [...]... ... En estas preguntas se extraña la presencia de‪ KolAsim ‪ ‪ Saludos Jorge M. hola, gracias por nombrarme, y hola a todos ... ... en el sitio de la primera publicación, la presentación de fondo está solo en la página de inicio ... ... pero podrías tener todas las páginas ... ... entonces, si crea la presentación de diapositivas en una página independiente, ... con mi código simple creado en 2009, (div_custom + iframe) será muy fácil de insertar en su sitio con un simple copiar/pegar ... ... ... si desea hacer una prueba rápida basada en mi página con MAXIMAGE, intente pegar este código en la sección: >> Paso 1 - Ajustes > Sección Avanzadas > Estadísticas, SEO y Código > Las opciones de la sección Avanzado | ▪Código personalizado: > Antes del cierre de la etiqueta BODY ... o, solo para la página INICIO, en la sección: Paso 3 - Mapa > Ventana Propiedades de la página > Las opciones de la sección Avanzado | ▪Código personalizado: > Antes del cierre de la etiqueta BODY ... Código: <div style="position:fixed;top:0px;left:0px;width:100%;height:100%;z-index:-1"><iframe src="http://www.kolasim-zone.it/supersfondok/maximage.html" width="100%" height="300" style="position:absolute;top:0px;left:0px;height:100%;"></iframe></div> >>ejemplo básico (IT) - ciao, grazie per avermi nominato, e ciao a tutti... ... nel sito del primo post lo slideshow di sfondo è solo nella pagina HOME... ... ma si potrebbe avere per tutte le pagine... ... quindi, se si realizza lo slideshow in pagina indipendente, ... con un mio semplice codice ideato nel 2009, (div_custom+iframe) diventerà semplicissimo da inserire nel proprio sito con un semplicissimo copia/incolla... ... ... se si volesse fare una rapida prova basata su una mia pagina con MAXIMAGE, provare ad incollare questo codice nella sezione: passo_1 | Esperto ... oppure, solo per la pagina HOME, nella sezione: Paso_3 | Esperto >> esempio di base . ciao  .

KolAsim, grazie, imparo sempre con le tue risposte, Bravo, molto bene!

Saludos

Jorge M.

Lire plus
Posté le de Jorge M.