Código de JavaScript - Parallax Simple

Imágen de perfil
Val: 1.568
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Parallax Simplegráfica de visualizaciones


JavaScript

Actualizado el 10 de Octubre del 2016 por Scriptshow (138 códigos) (Publicado el 8 de Octubre del 2016)
1.420 visualizaciones desde el 8 de Octubre del 2016
Lejos de lo que hay por ahí basado en librerías de 80 - 200kb. este Parallax utiliza 4 - 6 líneas de código javascript nativo, el que interpreta cualquier navegador web. En el 99.9 de los casos, NO es necesario el uso de frameworks para nuestros proyectos. Decimos que se eternizan los renderizados de contenidos, es cierto. Un buen proyecto desde cero, bien estructurado, puede ser un 90% más ágil y original que utilizando plantillas y marcos de trabajo cargados de código inútil. ¡La Imaginación es el límite!. Aprender es un placer, siempre.

Requerimientos

Un navegador web es: un programa que interpreta código HTML y JavaScript de forma nativa. No obstante, también hace otras cosas con plug-ings y aplicaciones de terceros. En fin...

1.0
estrellaestrellaestrellaestrellaestrella(3)

Actualizado el 10 de Octubre del 2016 (Publicado el 8 de Octubre del 2016)gráfica de visualizaciones de la versión: 1.0
1.421 visualizaciones desde el 8 de Octubre del 2016
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<title>Parallax Simple</title>
<style>
body {
background:#000000 url('fondo.jpg');
font:normal 16px/24px Helvetica, sans-serif;
}
.container {
width:80%;
margin:auto;
}
h2, p {
padding:16px;
color:#FFFFFF;
background-color:#000000;
filter:alpha(Opacity=80);
-khtml-opacity:0.8;
-moz-opacity:0.8;
opacity:0.8;
}
</style>
<script>
window.onload = function() {
document.body.style.backgroundAttachment = "fixed";
window.onscroll = function() {
document.body.style.backgroundPosition = "0px " + (0 + (Math.max(document.documentElement.scrollTop, document.body.scrollTop) / 8)) + "px";
}
}
</script>
</head>
<body>
<div class="container">
<h2>Añadimos contenido ...</h2>
<p>Muy lejos, más allá de las montañas de palabras, alejados de los países de las vocales y las consonantes, viven los textos simulados. Ni siquiera los todopoderosos signos de puntuación dominan a los textos simulados; una vida, se puede decir, poco ortográfica. Pero un buen día, una pequeña línea de texto simulado, llamada Lorem Ipsum, decidió aventurarse y salir al vasto mundo de la gramática...</p>
<h2>Y, más ...</h2>
<p>Muy lejos, más allá de las montañas de palabras, alejados de los países de las vocales y las consonantes, viven los textos simulados. Ni siquiera los todopoderosos signos de puntuación dominan a los textos simulados; una vida, se puede decir, poco ortográfica. Pero un buen día, una pequeña línea de texto simulado, llamada Lorem Ipsum, decidió aventurarse y salir al vasto mundo de la gramática...</p>
<p>Muy lejos, más allá de las montañas de palabras, alejados de los países de las vocales y las consonantes, viven los textos simulados. Ni siquiera los todopoderosos signos de puntuación dominan a los textos simulados; una vida, se puede decir, poco ortográfica. Pero un buen día, una pequeña línea de texto simulado, llamada Lorem Ipsum, decidió aventurarse y salir al vasto mundo de la gramática...</p>
<h2>Aún más ...</h2>
<p>Muy lejos, más allá de las montañas de palabras, alejados de los países de las vocales y las consonantes, viven los textos simulados. Ni siquiera los todopoderosos signos de puntuación dominan a los textos simulados; una vida, se puede decir, poco ortográfica. Pero un buen día, una pequeña línea de texto simulado, llamada Lorem Ipsum, decidió aventurarse y salir al vasto mundo de la gramática...</p>
<p>Muy lejos, más allá de las montañas de palabras, alejados de los países de las vocales y las consonantes, viven los textos simulados. Ni siquiera los todopoderosos signos de puntuación dominan a los textos simulados; una vida, se puede decir, poco ortográfica. Pero un buen día, una pequeña línea de texto simulado, llamada Lorem Ipsum, decidió aventurarse y salir al vasto mundo de la gramática...</p>
<h2>Y, repetimos ...</h2>
<p>Muy lejos, más allá de las montañas de palabras, alejados de los países de las vocales y las consonantes, viven los textos simulados. Ni siquiera los todopoderosos signos de puntuación dominan a los textos simulados; una vida, se puede decir, poco ortográfica. Pero un buen día, una pequeña línea de texto simulado, llamada Lorem Ipsum, decidió aventurarse y salir al vasto mundo de la gramática...</p>
<p>Muy lejos, más allá de las montañas de palabras, alejados de los países de las vocales y las consonantes, viven los textos simulados. Ni siquiera los todopoderosos signos de puntuación dominan a los textos simulados; una vida, se puede decir, poco ortográfica. Pero un buen día, una pequeña línea de texto simulado, llamada Lorem Ipsum, decidió aventurarse y salir al vasto mundo de la gramática...</p>
<h2>Una vez más ...</h2>
<p>Muy lejos, más allá de las montañas de palabras, alejados de los países de las vocales y las consonantes, viven los textos simulados. Ni siquiera los todopoderosos signos de puntuación dominan a los textos simulados; una vida, se puede decir, poco ortográfica. Pero un buen día, una pequeña línea de texto simulado, llamada Lorem Ipsum, decidió aventurarse y salir al vasto mundo de la gramática...</p>
<h2>Ir a <a href="#"> Top </a></h2>
</div>
</body>
</html>



Comentarios sobre la versión: 1.0 (3)

Imágen de perfil
13 de Octubre del 2016
estrellaestrellaestrellaestrellaestrella
Muy bueno..! Me és útil..! Gracias..!
Responder
Martin
9 de Noviembre del 2016
estrellaestrellaestrellaestrellaestrella
No funciona en chrome
Responder
Imágen de perfil
29 de Marzo del 2020
estrellaestrellaestrellaestrellaestrella
Sí, funciona igual en todos los Navegadores Web, desde IExplorer 5.x hasta los más nuevos, recientes.

P.D.: Si ponemos un fondo que no dé la altura de los contenidos, lo mejor sería que las partes alta y baja de la imagen, sean iguales, muy parecidas; con el fin de que, cuando se repita la imagen en vertical, no se aprecie o se note muy poco la unión.

Muchas gracias por vuestros comentarios.
Responder

Comentar la versión: 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s3699