HTML - Consulta

   
Vista:

Consulta

Publicado por Ignacio (1 intervención) el 22/09/2017 18:56:48
Mi consulta es simple como se llama o donde lo puedo obtener el efecto de esta web http://crumbs.am/ en la parte de dice BREAD donde la imagen se mueve según tu bajes o subas en la pagina
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Pedro

Consulta

Publicado por Pedro (15 intervenciones) el 23/09/2017 16:56:55
Hola Ignacio eso se llama efecto parallax no es muy complicado es crear unas sections y aplicarle un css con una serie de estilos específicos

Aquí te muestro un claro ejemplo que presenté como tarea:

Este es el html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
 
<html lang="es" xmlns="http://www.w3.org/1999/xhtml">
 
<head>
    <meta charset="utf-8" />
    <title>Efecto Parallax</title>
    <link rel="stylesheet" href="estilo.css">
</head>
 
<body>
 
    <div id="contenedor">
 
 
        <section id="pagina1">
 
            <h1>Cartagena en imágenes</h1>
 
        </section>
 
        <section id="pagina2">
 
            <p>MUSEO DEL TEATRO ROMANO
			El espacio museístico se ha construido integrando los restos monumentales en el tejido urbano. El teatro fue descubierto de forma casual; la ladera norte del cerro de la Concepción facilitó en su tiempo la construcción del graderío. Por las inscripciones conmemorativas se sabe que se comenzó a construir a fines del S. I a C., coincidiendo con la época de mayor apogeo urbanístico de la colonia romana. Formando un conjunto único con el teatro se encuentra los restos de la Catedral Antigua</p>
 
            <p>PALACIO CONSISTORIAL
            Edificio de forma triangular con las fachadas diferentes entre sí. De construcción ecléctica, algo afrancesado, para resaltar el carácter oficial del edificio. El estilo modernista se manifiesta en las pinturas y detalles decorativos de la zona noble del vestíbulo y la primera planta.</p>
 
            <p>ARQUA
            Las colecciones han sido excavadas en el entorno costero de la Región de Murcia. Destacan dos conjuntos de época fenicia: los colmillos de elefante y los restos de las embarcaciones de Mazarrón y los conjuntos procedentes de los pecios romanos de la Isla de Escombreras..</p>
 
        </section>
 
        <section id="pagina3" >
 
        </section>
 
        <section id="pagina4">
			<img id="logo" src="imagenes/logo.png" />
            <h1>LA WEB DEL PROGRAMADOR</h1>
        </section>
 
    </div>
 
 
</body>
</html>

Aqui el Css que hace la mágia del efecto parallax.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
* {
    margin: 0;
    padding: 0;
 
}
body {
        font-family: "Helvetica Neue",Helvetica, sans-serif;
}
#contenedor {
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.8);
    margin: 0 auto;
    max-width: 1440px;
    width: 100% !important;
}
section {
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    height: 1100px;
    margin: 0 auto;
    max-width: 1440px;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 100% !important;
}
#pagina1 {
    background-image: url("imagenes/cartagena1.jpg");
}
#pagina2 {
    background-image: url("imagenes/cartagena2.jpg");
}
#pagina3 {
    background-image: url("imagenes/cartagena3.jpg");
}
#pagina4 {
    background-image: url("imagenes/cartagena4.jpg");
}
h1 {
    background-color: #02223a;
    bottom: 0;
    color: rgba(255, 255, 255, 0.9);
    display: block;
    font-size: 5em;
    font-weight: bold;
    margin-top: 3em;
    opacity: 0.76;
    text-align: center;
    text-shadow: 1px 1px 1px #666;
    text-transform: uppercase;
    width: 100%;
}
h2 {
    color: #fff;
    font-size: 5em;
    font-weight: bold;
    margin-top: 5em;
    opacity: 0.85;
    text-align: center;
    text-shadow: 1px 1px 1px #ccc;
    text-transform: uppercase;
}
 
#logo {
    display: block;
    margin: 6em auto 0;
	vertical-align:middle;
    opacity: 0.8;
    width: 200px;
}
#pagina2 p {
    background-color: rgba(255, 255, 255, 0.8);
    color: #333;
    font-size: 1.2em;
    font-weight: normal;
    margin: 7em auto;
    max-width: 800px;
    padding: 1.5em;
}

Como puedes apreciar es muy intuitivo comprender como funciona .Las imágenes no te las he adjuntado, recuerda que deben ser de gran pixelaje.

Salu2 :)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Revisar política de publicidad