Last active
May 11, 2017 00:31
-
-
Save rodrigo-frenk/aa168a25281776007decd7b4c478c970 to your computer and use it in GitHub Desktop.
interaccion scroll
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| outline: 1px solid #def; | |
| } | |
| html, | |
| body { | |
| /*w100%*/ | |
| /*h100%*/ | |
| width: 100%; | |
| height: 100%; | |
| /*m0*/ | |
| margin: 0; | |
| /*oya*/ | |
| overflow-y: auto; | |
| } | |
| #cajas { | |
| width: 100vw; | |
| height: 500vh; | |
| /*position: absolute;*/ | |
| top: 0; | |
| z-index: -1; | |
| } | |
| .caja { | |
| width: 100vw; | |
| height: 100vh; | |
| display: inline-block; | |
| text-align: center; | |
| box-sizing: border-box; | |
| } | |
| .caja:nth-child(even) { | |
| background-color: #fff; | |
| } | |
| .caja:nth-child(odd) { | |
| background-color: #ddd; | |
| } | |
| .caja:nth-child(2) { | |
| background-color: #aef; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Ejemplo de Interacción</title> | |
| <link rel="stylesheet" href="css/estilos.css"> | |
| </head> | |
| <body> | |
| <!-- (.caja>h1{Caja $})*5 --> | |
| <div class="caja"> | |
| <h1>Caja 1</h1> | |
| </div> | |
| <div class="caja"> | |
| <h1>Caja 2</h1> | |
| </div> | |
| <div class="caja"> | |
| <h1>Caja 3</h1> | |
| </div> | |
| <div class="caja"> | |
| <h1>Caja 4</h1> | |
| </div> | |
| <div class="caja"> | |
| <h1>Caja 5</h1> | |
| </div> | |
| <script src="recursos/jquery/jquery-3.2.0.min.js"></script> | |
| <script src="js/interaccion.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var scrollAnterior = 0 | |
| var siguienteCaja = 0 | |
| var scrolling = false | |
| $(document).ready(function(){ | |
| scrolling = false | |
| $('.caja').addClass('v-center') | |
| centrarContenidos() | |
| interaccionScroll() | |
| console.log("Ejemplo Interacción Listo.") | |
| }) | |
| function interaccionScroll() { | |
| $('html,body').scroll(function(){ | |
| console.log("body scroll",$('body').scrollTop()) | |
| }) | |
| } | |
| function centrarContenidos() { | |
| // Centrado Vertical: | |
| // Iterar por cada elemento que tenga la clase 'v-center' | |
| $('.v-center').each(function(){ | |
| elementoPadre = $(this) | |
| elementosHijos = elementoPadre.children() | |
| alturaHijos = 0 | |
| elementosHijos.first().css({ | |
| marginTop: 0 | |
| }) | |
| elementosHijos.last().css({ | |
| marginBottom: 0 | |
| }) | |
| // ahora, iterar por cada uno de estos elementos hijos: | |
| elementosHijos.each(function(){ | |
| elementoHijo = $(this) | |
| // sumar la altura del elemento hijo a la altura de todos los hijos en conjunto | |
| alturaHijos += elementoHijo.height() | |
| }) | |
| diferencia = elementoPadre.height() - alturaHijos | |
| // dividir diferencia entre 2 | |
| espacioSuperior = diferencia / 2 | |
| // dar espaciado superior al padre, para que empuje sus hijos hacia abajo | |
| elementoPadre.css({ | |
| paddingTop: espacioSuperior | |
| }) | |
| }) | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment