Javascript

Tooltip o viñeta de información

El tooltip es una pequeña señal de ayuda que funciona al situar el cursor sobre algún elemento del DOM. Despliega la información del atributo "title" del elemento HTML y puede dar cuenta de una mayor contextualización hacia el usuario. Entre sus declaraciones de variables específicas se observa un ancho máximo (@tooltip-max-width), un z-index (@zindex-tooltip), colores (@tooltip-color, @tooltip-bg), etc.

HTML
<ul class="tooltip-demo margen-vertical-md"> <li><a class='sans' data-toggle="tooltip" data-toggle="tooltip" data-original-title="Este es un tooltip funcionando">Tooltip funcionando</a></li> </ul>
LESS
.tooltip { position: absolute; z-index: @zindex-tooltip; display: block; visibility: visible; font-size: 14px; font-style: normal; line-height: 1.4; .opacity(0); a{ &:hover{ color: @blanco !important; } } &.in { .opacity(@tooltip-opacity); } &.top { margin-top: -3px; padding: @tooltip-arrow-width 0; } &.right { margin-left: 3px; padding: 0 @tooltip-arrow-width; } &.bottom { margin-top: 3px; padding: @tooltip-arrow-width 0; } &.left { margin-left: -3px; padding: 0 @tooltip-arrow-width; } } .tooltip-inner { max-width: @tooltip-max-width; padding: 3px 8px; color: @tooltip-color; text-align: center; font-family: @sans; text-decoration: none; background-color: @tooltip-bg; border-radius: @border-radius-base; } .tooltip-imagenes{ .tooltip { font-size: @cuerpo * 0.8; } .tooltip-inner { color: @negro; background-color: @masking; border-radius: 1px; } .tooltip { &.top .tooltip-arrow { border-top-color: @gris-blanco; } &.top-left .tooltip-arrow { border-top-color: @gris-blanco; } &.top-right .tooltip-arrow { border-top-color: @gris-blanco; } &.right .tooltip-arrow { border-right-color: @gris-blanco; } &.left .tooltip-arrow { border-left-color: @gris-blanco; } &.bottom .tooltip-arrow { border-bottom-color: @gris-blanco; } &.bottom-left .tooltip-arrow { border-bottom-color: @gris-blanco; } &.bottom-right .tooltip-arrow { border-bottom-color: @gris-blanco; } } } .tooltip-arrow { position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; }
JS
<script src="js/jquery.js"></script> <script src="js/tooltip.js"></script>

Popover

El popover es una pequeña ventana de ayuda o de advertencia específica. Despliega la información del atributo "title" del elemento HTML. A diferencia del tooltip, éste debe ser cliqueado con el cursor para gatillar la interacción del elemento. En sus declaraciones específicas de variables se observa un ancho máximo (@popover-max-width), un z-index (@zindex-popover), colores (@popover-bg), etc. Para inicializar los popovers (similiar a lo hecho con los tooltip), se requiere el <script> con su respectivo id (en este caso, '#popover-test') en el elemento <a> declarado para su ejecución.

Popover
HTML
<a class="btn margen-vertical-md" id="popover-test" title="" data-content="Este es un popover..." data-toggle="popover" data-original-title="Titulo de un popover">Popover</a>
LESS
.popover { position: absolute; top: 0; left: 0; z-index: @zindex-popover; display: none; max-width: @popover-max-width; padding: 1px; text-align: left; // Reset given new insertion method background-color: @popover-bg; background-clip: padding-box; border: 1px solid @popover-fallback-border-color; border: 1px solid @popover-border-color; border-radius: @border-radius-large; .box-shadow(0 5px 10px rgba(0,0,0,.2)); &.top { margin-top: -@popover-arrow-width; } &.right { margin-left: @popover-arrow-width; } &.bottom { margin-top: @popover-arrow-width; } &.left { margin-left: -@popover-arrow-width; } } .popover-title { margin: 0; // reset heading margin padding: 10px 15px; font-size: @font-size-base; font-weight: normal; line-height: 18px; background-color: @blanco; border-bottom: 1px solid darken(@popover-title-bg, 5%); border-radius: 5px 5px 0 0; } .popover-content { padding: 20px 15px; font-family: @sans; background-color: @gris-blanco; } .popover > .arrow { &, &:after { position: absolute; display: block; width: 0; height: 0; border-color: transparent; border-style: solid; } } .popover > .arrow { border-width: @popover-arrow-outer-width; } .popover > .arrow:after { border-width: @popover-arrow-width; content: ""; }
JS
<script src="js/jquery.js"></script> <script src="js/popover.js"></script> <script> $('#popover-test').popover();</script>

El popover es una pequeña ventana de ayuda o de advertencia específica. Despliega la información del atributo "title" del elemento HTML. A diferencia del tooltip, éste debe ser cliqueado con el cursor para gatillar la interacción del elemento. En sus declaraciones específicas de variables se observa un ancho máximo (@popover-max-width), un z-index (@zindex-popover), colores (@popover-bg), etc. Para inicializar los popovers (similiar a lo hecho con los tooltip), se requiere el <script> con su respectivo id (en este caso, '#popover-test') en el elemento <a> declarado para su ejecución.

Estudiar diseño gráfico en la e[ad]

La misión de la Escuela de Arquitectura y Diseño es cultivar el arte de la Arquitectura, del Diseño Gráfico y del Diseño Industrial por medio de la creación y transmisión del conocimiento del oficio de estas artes, formar Arquitectos y Diseñadores con la vocación de concebir obras que den cabida y expresión al habitar humano. La Escuela afirma que tanto la Arquitectura como el Diseño son un Arte. Esto diferencia profundamente de otras orientaciones, disciplinas y saberes, e implica una manera peculiar de estudiar y de hacer.

Estudiar diseño gráfico en la e[ad]

La misión de la Escuela de Arquitectura y Diseño es cultivar el arte de la Arquitectura, del Diseño Gráfico y del Diseño Industrial por medio de la creación y transmisión del conocimiento del oficio de estas artes, formar Arquitectos y Diseñadores con la vocación de concebir obras que den cabida y expresión al habitar humano. La Escuela afirma que tanto la Arquitectura como el Diseño son un Arte. Esto diferencia profundamente de otras orientaciones, disciplinas y saberes, e implica una manera peculiar de estudiar y de hacer.

Estudiar diseño gráfico en la e[ad]

La misión de la Escuela de Arquitectura y Diseño es cultivar el arte de la Arquitectura, del Diseño Gráfico y del Diseño Industrial por medio de la creación y transmisión del conocimiento del oficio de estas artes, formar Arquitectos y Diseñadores con la vocación de concebir obras que den cabida y expresión al habitar humano. La Escuela afirma que tanto la Arquitectura como el Diseño son un Arte. Esto diferencia profundamente de otras orientaciones, disciplinas y saberes, e implica una manera peculiar de estudiar y de hacer.

Estudiar diseño gráfico en la e[ad]

La misión de la Escuela de Arquitectura y Diseño es cultivar el arte de la Arquitectura, del Diseño Gráfico y del Diseño Industrial por medio de la creación y transmisión del conocimiento del oficio de estas artes, formar Arquitectos y Diseñadores con la vocación de concebir obras que den cabida y expresión al habitar humano. La Escuela afirma que tanto la Arquitectura como el Diseño son un Arte. Esto diferencia profundamente de otras orientaciones, disciplinas y saberes, e implica una manera peculiar de estudiar y de hacer.

Estudiar diseño gráfico en la e[ad]

La misión de la Escuela de Arquitectura y Diseño es cultivar el arte de la Arquitectura, del Diseño Gráfico y del Diseño Industrial por medio de la creación y transmisión del conocimiento del oficio de estas artes, formar Arquitectos y Diseñadores con la vocación de concebir obras que den cabida y expresión al habitar humano. La Escuela afirma que tanto la Arquitectura como el Diseño son un Arte. Esto diferencia profundamente de otras orientaciones, disciplinas y saberes, e implica una manera peculiar de estudiar y de hacer.

Estudiar diseño gráfico en la e[ad]

La misión de la Escuela de Arquitectura y Diseño es cultivar el arte de la Arquitectura, del Diseño Gráfico y del Diseño Industrial por medio de la creación y transmisión del conocimiento del oficio de estas artes, formar Arquitectos y Diseñadores con la vocación de concebir obras que den cabida y expresión al habitar humano. La Escuela afirma que tanto la Arquitectura como el Diseño son un Arte. Esto diferencia profundamente de otras orientaciones, disciplinas y saberes, e implica una manera peculiar de estudiar y de hacer.

Estudiar diseño gráfico en la e[ad]

La misión de la Escuela de Arquitectura y Diseño es cultivar el arte de la Arquitectura, del Diseño Gráfico y del Diseño Industrial por medio de la creación y transmisión del conocimiento del oficio de estas artes, formar Arquitectos y Diseñadores con la vocación de concebir obras que den cabida y expresión al habitar humano. La Escuela afirma que tanto la Arquitectura como el Diseño son un Arte. Esto diferencia profundamente de otras orientaciones, disciplinas y saberes, e implica una manera peculiar de estudiar y de hacer.

HTML
<a class="btn margen-vertical-md" id="popover-test" title="" data-content="Este es un popover..." data-toggle="popover" data-original-title="Titulo de un popover">Popover</a>
LESS
.popover { position: absolute; top: 0; left: 0; z-index: @zindex-popover; display: none; max-width: @popover-max-width; padding: 1px; text-align: left; // Reset given new insertion method background-color: @popover-bg; background-clip: padding-box; border: 1px solid @popover-fallback-border-color; border: 1px solid @popover-border-color; border-radius: @border-radius-large; .box-shadow(0 5px 10px rgba(0,0,0,.2)); &.top { margin-top: -@popover-arrow-width; } &.right { margin-left: @popover-arrow-width; } &.bottom { margin-top: @popover-arrow-width; } &.left { margin-left: -@popover-arrow-width; } } .popover-title { margin: 0; // reset heading margin padding: 10px 15px; font-size: @font-size-base; font-weight: normal; line-height: 18px; background-color: @blanco; border-bottom: 1px solid darken(@popover-title-bg, 5%); border-radius: 5px 5px 0 0; } .popover-content { padding: 20px 15px; font-family: @sans; background-color: @gris-blanco; } .popover > .arrow { &, &:after { position: absolute; display: block; width: 0; height: 0; border-color: transparent; border-style: solid; } } .popover > .arrow { border-width: @popover-arrow-outer-width; } .popover > .arrow:after { border-width: @popover-arrow-width; content: ""; }
JS
<script src="js/jquery.js"></script> <script src="js/popover.js"></script> <script> $('#popover-test').popover();</script>

Carousel

El carrusel... Utilizar dropdowns permite condensar una navegación compleja en grandes rótulos, dando paso a a una navegación más simplificada con una jerarquía notoria. La jerarquía se divide en dos clases; la primera en el orden de cada enlace, y la segunda en la categoría de "separaeted link", bajo un <hr> o divider. Entre las variables específicas resaltan el font-size (@cuerpo-nav z-index), z-index (@zindex-dropdown), hr o dividers (@dropdown-divider-bg), colores (@dropdown-bg) e íconos o carets de despliegue (@caret-width-base ).

JS
<script src="js/jquery.js"></script> <script src="js/carousel.js"></script>
Ejemplo estándar
HTML
<div data-ride="carousel" class="carousel slide" id="carousel-example"> <ol class="carousel-indicators"> <li data-slide-to="0" data-target="#carousel-example-generic" class="active"></li> <li data-slide-to="1" data-target="#carousel-example-generic"></li> <li data-slide-to="2" data-target="#carousel-example-generic"></li> </ol> <div class="carousel-inner"> <div class="item active car-sm"> <img alt="First slide" src="http://eadpucv.github.io/pyxis/img-samples/manto-6.jpg"> </div> <div class="item car-sm"> <img alt="Second slide" src="http://eadpucv.github.io/pyxis/img-samples/torneo2.jpg"> </div> <div class="item car-sm"> <img alt="Third slide" src="http://eadpucv.github.io/pyxis/img-samples/manto4.jpg"> </div> </div> <a data-slide="prev" href="#carousel" data-target="#carousel-example" class="left carousel-control"> <span class="icn icn-navizquierda"></span> </a> <a data-slide="next" href="#carousel" data-target="#carousel-example" class="right carousel-control"> <span class="icn icn-nav"></span> </a> </div>
LESS
.carousel{ .carousel-inner{ .car-sm{ img{ .ancho-completo; .absoluto; } .pag { .cf; .h100; .oculto-xs { .h100; .derecha; .cf; a{ div{ .fondo-gris-blanco-trans; .absoluto; .abs-der; .abs-sup; .bloque; .alto-completo; .relleno; h2{ .gris-oscuro; .condensado; .gruesa; .sombra-cabecera-blanco-xs; i{ .margen-der-xs; } } p{ .italica; .margen-sup-sm; .sombra-cabecera-blanco-xs; } span{ .cond; .negro; .derecha; .interletraje-xs; .relleno-vertical-xs; .relleno-der-xs; .sombra; .borde .radio-md; i{ .negro; .relleno-der-xs; .relleno-izq-xs; .margen-der-xs; .icn-light; .sombra-cabecera-blanco-xs; } } } &:hover{ h2{ .rojo; } } } } .oculto-md{ .h100; .cf; a{ div{ .fondo-gris-blanco-trans; .absoluto; .abs-der; .abs-inf; .bloque; .relleno; .ancho-completo; h5{ .condensado; .centrado; .gruesa; .sombra-cabecera-blanco-xs; .gris-oscuro; i{ .margen-der-xs; } } } } } } } } }
Ejemplo en index
HTML
<div id='carrusel-index'> <!-- Carrousel --> <div data-ride="carousel" class="carousel slide" id="carousel-home"> <ol class="carousel-indicators"> <li data-slide-to="0" data-target="#carousel-home" class="active"></li> <li data-slide-to="1" data-target="#carousel-home"></li> <li data-slide-to="2" data-target="#carousel-home"></li> </ol> <div class="carousel-inner"> <!-- item (la clase 'car-sm' corresponde al height de visibilidad) --> <div class="item active car-sm"> <img alt="Third slide" src="http://www.domusweb.it/content/dam/domusweb/en/news/2013/11/05/archizoom_open_city/03_Open-City.jpg"> <div class='pag sin-relleno'> <div class='col-md-4 col-sm-6 oculto-xs'> <!-- enlace --> <a href='#'> <div> <!-- título de noticia--> <h2><i class='icn icn-noticias'></i>... <!-- texto de noticia --> <p>[...]</p> <!-- autor de noticia --> <span class='xs'><i class='icn icn-usuario'></i>...</span> </div> </a> </div> <!-- móviles --> <div class='oculto-lg oculto-md oculto-sm col-xs-12'> <!-- enlace --> <a href='#'> <div> <!-- título de noticia--> <h5 class='sm'><i class='icn icn-noticias'></i>...</h5> </div> </a> </div><!-- fin de móvil --> </div><!-- fin de pag --> </div><!-- fin de item --> <!-- item (la clase 'car-sm' corresponde al height de visibilidad) --> <div class="item car-sm"> <img alt="First slide" src="http://www.ead.pucv.cl/wp-content/uploads/2015/03/DSC_1956.jpg"> <div class='pag sin-relleno'> <div class='col-md-4 col-sm-6 oculto-xs'> <!-- enlace --> <a href="http://eadpucv.github.io/pyxis/maquetas/post"> <div> <!-- título de noticia--> <h2><i class='icn icn-noticias'></i>...</h2> <!-- texto de noticia --> <p>[...]</p> <!-- autor de noticia --> <span class='xs'><i class='icn icn-usuario'></i>...</span> </div> </a> </div> <!-- móviles --> <div class='oculto-lg oculto-md oculto-sm col-xs-12'> <!-- enlace --> <a href='#'> <div> <!-- título de noticia--> <h5 class='sm'><i class='icn icn-noticias'></i>...</h5> </div> </a> </div><!-- fin de móvil --> </div><!-- fin de pag --> </div><!-- fin de item --> </div> <!-- fin de carousel inner --> <!-- botones adelante y atrás --> <a data-slide="prev" data-target='#carousel-home' href="#carousel-2" class="left carousel-control"> <span class="icn icn-navizquierda"></span> </a> <a data-slide="next" data-target='#carousel-home' href="#carousel-2" class="right carousel-control"> <span class="icn icn-nav"></span> </a> </div> </div>
LESS
.carousel{ .carousel-inner{ .car-sm{ img{ .ancho-completo; .absoluto; } .pag { .cf; .h100; .oculto-xs { .h100; .derecha; .cf; a{ div{ .fondo-gris-blanco-trans; .absoluto; .abs-der; .abs-sup; .bloque; .alto-completo; .relleno; h2{ .gris-oscuro; .condensado; .gruesa; .sombra-cabecera-blanco-xs; i{ .margen-der-xs; } } p{ .italica; .margen-sup-sm; .sombra-cabecera-blanco-xs; } span{ .cond; .negro; .derecha; .interletraje-xs; .relleno-vertical-xs; .relleno-der-xs; .sombra; .borde .radio-md; i{ .negro; .relleno-der-xs; .relleno-izq-xs; .margen-der-xs; .icn-light; .sombra-cabecera-blanco-xs; } } } &:hover{ h2{ .rojo; } } } } .oculto-md{ .h100; .cf; a{ div{ .fondo-gris-blanco-trans; .absoluto; .abs-der; .abs-inf; .bloque; .relleno; .ancho-completo; h5{ .condensado; .centrado; .gruesa; .sombra-cabecera-blanco-xs; .gris-oscuro; i{ .margen-der-xs; } } } } } } } } }
Ejemplo carrusel portadilla
HTML
<div data-ride="carousel" class="carousel slide oculto-sm oculto-xs bloque ancho-completo" id="carousel-portadilla"> <ol class="carousel-indicators"> <li data-slide-to="0" data-target="#carousel-portadilla" class="active"></li> <li data-slide-to="1" data-target="#carousel-portadilla"></li> <li data-slide-to="2" data-target="#carousel-portadilla"></li> </ol> <div class="carousel-inner"> <!-- item (la clase 'car-sm' corresponde al height de visibilidad) --> <div class="item active car-sm relativo"> <img class='ancho-completo atras abs-der portadilla' alt="First slide" src="http://www.ead.pucv.cl/wp-content/themes/gamma/img/disenografico.jpg"> <!-- pie de imagen carousel --> <div class='ancho-completo alto-completo oculto-xs izquierda cf'> <a href='#'> <div class='fondo-gris-blanco-trans-xs alto-completo absoluto abs-inf abs-izq bloque ancho-completo margen-sup-xs-negativo relleno-xs'> <div class='pag sin-relleno cf'> <div class='col-md-10 col-md-offset-1'> <div class='bloque ancho-completo'> <!-- Breadcrumbs --> <ul class='sin-relleno margen-sup-sm centrado margen-inf-xs' id="breadcrumb"> <li><a href='#'><i class='icn icn-hogar'></i></a></li> <li><a href='#'>...</a></li> <li><a>...</a></li> </ul> <h1 class='md rojo condensado gruesa centrado interletraje-xs'>— ... —</h1> </div> <h4 class='xs semi-gruesa interletraje-sm altas rojo relleno-sup-xs centrado sans fino'>...</h4> <h2 class='sm interletraje-negativo relleno-sup-xs centrado margen-sup-xs sombra-cabecera-blanco-xs gruesa negro-fundido condensado'><i class='icn icn-noticias margen-der-xs sin-interletraje'></i>...</h2> <div class='ancho-completo bloque izquierda'> <span class='italica negro-fundido sombra-cabecera-blanco-xs relleno-sup-xs centrado relleno-inf-xs gruesa'>...</span> <p class='margen-inf-sm sans sm negro centrado sombra-cabecera-blanco-xs relleno-sup-sm oculto-sm'>[...]</p> <div class='centrado oculto-sm'> </div> </div> </div> </div> </div> </a> </div> </div> <!-- item --> <div class="item car-sm"> <img class='ancho-completo atras ocultar-desborde portadilla' alt="Second slide" src="http://www.ead.pucv.cl/wp-content/uploads/2014/12/DSC_1383.jpg"> <div class='ancho-completo alto-completo oculto-xs izquierda cf'> <a href='#'> <div class='fondo-gris-blanco-trans-xs alto-completo absoluto abs-inf abs-izq bloque ancho-completo relleno-xs'> <div class='pag sin-relleno cf'> <div class='col-md-10 col-md-offset-1'> <div class='bloque ancho-completo'> <!-- Breadcrumbs --> <ul class='sin-relleno margen-sup-sm centrado margen-inf-xs' id="breadcrumb"> <li><a href='#'><i class='icn icn-hogar'></i></a></li> <li><a href='#'>...</a></li> <li><a>...</a></li> </ul> <h1 class='md rojo condensado gruesa centrado interletraje-xs'>— ... —</h1> </div> <h4 class='xs semi-gruesa interletraje-sm altas rojo relleno-sup-xs centrado sans fino'>...</h4> <h2 class='sm interletraje-negativo relleno-sup-xs centrado sombra-cabecera-blanco-xs gruesa negro-fundido condensado'><i class='icn icn-lapiz margen-der-xs'></i>...</h2> <div class='ancho-completo bloque izquierda'> <span class='italica negro-fundido sombra-cabecera-blanco-xs relleno-sup-xs centrado relleno-inf-xs gruesa'>...</span> <p class='margen-inf-sm sans sm negro centrado sombra-cabecera-blanco-xs relleno-sup-sm'>[...]</p> </div> </div> </div> </div> </a> </div> </div> </div> </div>
LESS
.carousel{ .carousel-inner{ .car-sm{ img{ .ancho-completo; .absoluto; } .pag { .cf; .h100; .oculto-xs { .h100; .derecha; .cf; a{ div{ .fondo-gris-blanco-trans; .absoluto; .abs-der; .abs-sup; .bloque; .alto-completo; .relleno; h2{ .gris-oscuro; .condensado; .gruesa; .sombra-cabecera-blanco-xs; i{ .margen-der-xs; } } p{ .italica; .margen-sup-sm; .sombra-cabecera-blanco-xs; } span{ .cond; .negro; .derecha; .interletraje-xs; .relleno-vertical-xs; .relleno-der-xs; .sombra; .borde .radio-md; i{ .negro; .relleno-der-xs; .relleno-izq-xs; .margen-der-xs; .icn-light; .sombra-cabecera-blanco-xs; } } } &:hover{ h2{ .rojo; } } } } .oculto-md{ .h100; .cf; a{ div{ .fondo-gris-blanco-trans; .absoluto; .abs-der; .abs-inf; .bloque; .relleno; .ancho-completo; h5{ .condensado; .centrado; .gruesa; .sombra-cabecera-blanco-xs; .gris-oscuro; i{ .margen-der-xs; } } } } } } } } }
Ejemplo carrusel enlaces
HTML
<div class='oculto-xs'> <div data-ride="carousel" class="carousel slide" id="carousel-enlaces"> <div class="carousel-inner"> <!-- item (la clase 'car-xs' corresponde al height de visibilidad) --> <div class="item active car-xs escuela-y-enlaces"> <div class='pag sin-relleno'> <div class='fila'> <div class='col-md-4 col-sm-12 oculto-xs'> <h5 class='sm condensado gruesa negro margen-inf-sm'>...</h5> <p class='serif italica sin-margen relleno-inf-sm'>El cuerpo académico de la <span class='rojo'>e[ad]</span> ....</p> <div class='oculto-sm margen-sup-xs'> <button class='btn btn-alerta'>Profesores</button> </div> </div> <div class='col-md-8 col-sm-12 oculto-xs'> <div class='ocultar-desborde alto-md sombra borde radio-md'> <img class='ocultar-desborde ancho-completo' alt="First slide" src="https://c2.staticflickr.com/2/1352/966261530_3b86c61b02_z.jpg?zz=1"> </div> </div> </div> </div> </div> <!-- item (la clase 'car-xs' corresponde al height de visibilidad) --> <div class="item car-xs escuela-y-enlaces"> <div class='pag sin-relleno'> <div class='fila'> <div class='col-md-4 col-sm-12 oculto-xs'> <h5 class='sm condensado gruesa negro margen-inf-sm'>...</h5> <p class='serif italica sin-margen relleno-inf-sm'>La <span class='rojo'>e[ad]</span> ...</p> <div class='grupo-botones oculto-sm margen-sup-xs'> <button class='btn btn-alerta'>Historia</button> <button class='btn btn-alerta'>Amereida</button> </div> </div> <div class='col-md-8 col-sm-12 oculto-xs'> <div class='ocultar-desborde alto-md sombra borde radio-md'> <img class='ocultar-desborde ancho-completo' alt="Second slide" src="https://c4.staticflickr.com/8/7329/8893052788_7362412230_h.jpg"> </div> </div> </div> </div> </div> </div> <!-- botones adelante y atrás --> <a data-slide="prev" data-target='#carousel-enlaces' href="#carousel-2" class="left carousel-control"> <span class="icn icn-navizquierda"></span> </a> <a data-slide="next" data-target='#carousel-enlaces' href="#carousel-2" class="right carousel-control"> <span class="icn icn-nav"></span> </a> </div> </div>
LESS
.carousel{ .carousel-inner{ .car-sm{ img{ .ancho-completo; .absoluto; } .pag { .cf; .h100; .oculto-xs { .h100; .derecha; .cf; a{ div{ .fondo-gris-blanco-trans; .absoluto; .abs-der; .abs-sup; .bloque; .alto-completo; .relleno; h2{ .gris-oscuro; .condensado; .gruesa; .sombra-cabecera-blanco-xs; i{ .margen-der-xs; } } p{ .italica; .margen-sup-sm; .sombra-cabecera-blanco-xs; } span{ .cond; .negro; .derecha; .interletraje-xs; .relleno-vertical-xs; .relleno-der-xs; .sombra; .borde .radio-md; i{ .negro; .relleno-der-xs; .relleno-izq-xs; .margen-der-xs; .icn-light; .sombra-cabecera-blanco-xs; } } } &:hover{ h2{ .rojo; } } } } .oculto-md{ .h100; .cf; a{ div{ .fondo-gris-blanco-trans; .absoluto; .abs-der; .abs-inf; .bloque; .relleno; .ancho-completo; h5{ .condensado; .centrado; .gruesa; .sombra-cabecera-blanco-xs; .gris-oscuro; i{ .margen-der-xs; } } } } } } } } }

Parallax

Primer parallax

Segundo parallax

Tercer parallax

ver código
Archivos necesarios
<script src="js/jquery.js"></script> <script src="js/jquery.localScroll.js"></script> <script src="js/jquery.parallax.1.1.-.js"></script>
Codigo
<div id='parallax' class='columna ejemplo-1'> <h1 class='blanco fino gigante centrado'>Primer parallax</h1> </div> <div id='parallax' class='columna ejemplo-2'> <h1 class='blanco centrado fino gigante'>Segundo parallax</h1> </div> <div id='parallax' class='columna ejemplo-3'> <h1 class='blanco centrado fino gigante'>Tercer parallax</h1> </div>