PARALLAX : Realidad sin Ficciones...
Publicado por ScriptShow (692 intervenciones) el 10/02/2019 13:53:18
Hay mucho de "mitología" entorno a los PARALLAX. Si nos fijamos bien, vemos unos movimientos axíncronos de elementos en un determinado marco... Hacer eso combinando JavaScript y CSS, es muy sencillo, y no precisa de librerías ni frameworks de terceros. Por si queda alguna duda, lo mejor es demostrarlo con ejemplos prácticos.
Como punto de partida, empezaremos por:
Ya podemos complicarlo hasta extremos impensables. Mejor aún, adaptalo a nuestros proyectos.
Espero sea útil.
Un saludo
Como punto de partida, empezaremos por:
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>P A R A L L A X</title>
<style>
body{margin:0px;padding:0px}
#cont{position:absolute;z-index:4}
#prlx_1{width:100%;height:480px;position:fixed;background:#D4D4D4;z-index:1}
#prlx_2{width:100%;height:480px;position:fixed;background:#44DD44;z-index:2}
</style>
<script>
function parallax(){
document.getElementById('prlx_1').style.top = -(window.pageYOffset / 4)+'px';
document.getElementById('prlx_2').style.top = -(window.pageYOffset / 2)+'px';
}window.onscroll = parallax;
</script>
</head>
<body>
<div id="prlx_1"></div>
<div id="prlx_2"></div>
<div id="cont"> <script> for(var i=1; i < 84; i++){ document.write('<h2>This is dummy line '+i+'</h2>'); } </script> </div>
</body>
</html>
Ya podemos complicarlo hasta extremos impensables. Mejor aún, adaptalo a nuestros proyectos.
Espero sea útil.
Un saludo
Valora esta pregunta
0