Height 100% métodos alternativos con CSS3 by @espaibarcelona

fuente: https://www.espai.es/blog/2017/02/height-100-css/

Seguramente ya sabréis que para determinar el “tamaño” de un elemento en css podemos utilizar unidades como los píxeles, puntos, porcentajes o incluso em. Pero quizá no hayáis oído hablar de las unidades vh y vw.  Una unidad vh (viewport height) equivale a un 1% de la altura del viewport (el total de la pantalla del dispositivo que muestre nuestra web). 1vh = 1% del total de la pantalla, 100vh = 100%. Como os habréis imaginado, la unidad vw es el equivalente para el ancho.

Usando estas unidades podemos determinar una altura fullheight de la siguiente manera:

1
2
3
4
5
.fullHeight {
height: 100vh;
}

Leer artículo completo en ESPAI.ES

EJEMPLOS DE ENLACE “LEER MÁS” CON JQUERY Y CSS by estudionexos.com

EJEMPLOS DE ENLACE “LEER MÁS” CON JQUERY Y CSS by estudionexos.com

fuente:  https://www.estudionexos.com/post/ejemplos-de-enlace-leer-mas-con-jquery-y-css/

Es habitual que en determinados casos nos soliciten que textos más o menos largos se presenten en forma abreviada con la posiblidad de desplegarlos completamente o volverlos a ocultar. En este gran artículo podras encontrar la manera de hacerlo usando jquery o usando solo CSS para evitar problemas de conflictos entre versiones de jquery que ya estes usando y la que necesitas par aeste ejemplo. Ver artículo completo aquí

HTML & CSS & Javascript: imagen en DIV con Efecto Parallax

HTML & CSS & Javascript: imagen en DIV con Efecto Parallax

fuente: http://www.falconmasters.com/web-design/efecto-parallax-sencillo/

Por aqui os dejo el javascript (necesita cargar libreria jquery)


$(document).ready(function(){
$(window).scroll(function(){
var barra = $(window).scrollTop();
var posicion = (barra * 0.80);
$('#paralax').css({'background-position': '0 -' + posicion + 'px'});
});
});

y este sera nuestro DIV


<div id="paralax" style="background-image: url(img/banner-2.jpg);background-repeat:repeat;background-attachment: fixed;height: 565px;width: 100%;background-size: cover;background-position:center;"></div>
});

javascript & jquery: detectar cuando un div es visible al hacer scroll

fuente: https://oscargascon.es/como-detectar-con-jquery-si-un-elemento-por-su-posicion-es-visible-en-el-navegador/

Buenas a tod@s

Necesitaba hacer el tipico efecto de aparicion de un elemento DIV al hacer scroll, es decir; al ir bajando por la web para verla que cuando tenga que aparecer un div lo haga con algun efecto de aparicion … frase rara, lo se

Direis “hombre con animate.css por ejemplo, chupao” pues si, con animate.css puedes aplicar cualquier efecto de animacion a un div; pero lo guapo es que ese efecto se aplique cuando aparece en escena el div. Por poner un ejemplo, yo quiero hacerle un efecto al footer el cual esta abajo del todo de la web. Si no implementamos el siguiente codigo javascript + jquery pues le va a aplicar el efecto segun se cargue la web con lo que cuando lleguemos a ver el footer no vamos a ver ningun efectillo. Por mas que intento explicarme decentemente no lo consigo, asi que probar vosotros mismos este codigo y sabreis de lo que hablo xDD

 


function elementVisible(elem) {
var visible = true;
var windowTop = $(document).scrollTop();
var windowBottom = windowTop + window.innerHeight;
windowBottom = windowBottom - 400;
var elementPositionTop = elem.offset().top;
var elementPositionBottom = elementPositionTop + elem.height();
if (elementPositionTop >= windowBottom) {
visible = false;
}
return visible;
}

// invoco una función anónima en el evento scroll sobre window
$(window).on("scroll" ,function() {
let elem = $('#a1'); // obtengo el elemento por id

if(elementVisible(elem)){
elem.addClass('fadeInUp animated');
elem2.addClass('fadeInUp animated');
}

});

El codigo pertenece a Oscar Gascon, yo lo he modificado ligeramente disponible otro tipo de funcionalidades. Podeis ver el artículo original en la siguiente URL: https://oscargascon.es/como-detectar-con-jquery-si-un-elemento-por-su-posicion-es-visible-en-el-navegador/

HTML & CSS: DIV banner y texto desaparece por debajo del contenido web

Buenas a tod@s

Por exigencia del guion necesito hacer un banner o un slide de imagen + texto que al hacer scroll para ver el resto de la web se quede fijo en su posicion desapareciendo por debajo del resto del contenido de la web … frase rara lo se, mal explicado lo se tambien. Probar este codigo y entendereis por donde van los tiros y si alguno de vosotros sabe decirme como se llama esto os agradeceria eternamente que me lo dijerais!

CSS:


#main-header { /* banner que se quedara por debajo del contenido al hacer scroll */
	position:fixed; /* Hacemos que la cabecera tenga una posición fija */	
	z-index: 1;
}

#main-content{ /* contenedor principal */
	z-index: 9999;
	position:relative;
	}

HTML


<body>
        
<div id="main-header">BANNER + TEXTO</div>
	
<section id="main-content">BLA BLA BLA BLA</section>

</body>

Espero haberle servido de ayuda a alguien mas que a mi mala memoria, la proxima vez que me tope de nuevo con esta necesidad ya vengo a tiro fijo

Un saludo !

#javascript: ocultar/mostrar un #div

Fuente: http://foros.tresuvesdobles.com/index.php?showtopic=1021

Para poner texto oculto que se muestra al pulsar un link y se vuelve a ocultar al pulsar otra vez:

1. Copia este codigo a alguna parte de la pagina (como, por ejemplo, entre las etiquetas <head> y </head>).

 language="javascript" type="text/javascript">
        function muestra(nombrediv) {
                if(document.getElementById(nombrediv).style.display == '') {
                                document.getElementById(nombrediv).style.display = 'none';
                } else {
                                document.getElementById(nombrediv).style.display = '';
                }
        }

2. Usa el siguiente codigo para el link:

div onClick="javascript:muestra('tu div')">mostrar/ocultar</div>

 

div style=display:none id=“NOMBRE DEL DIV”>  Y PON AQUI EL TEXTO OCULTO

Si quieres que el texto se muestre al principio y se oculte al pulsar el link, borra la parte ‘style=”display:none”‘ del <div>.

#html Superponiendo cosas con #CSS by vagabundia.blogspot.com

Fuente: http://vagabundia.blogspot.com/2011/04/superponiendo-cosas-con-css.html
Toda etiqueta es un rectángulo que se ubica ya sea uno al lado del otro o uno debajo del otro. Esto siempre es así salvo excepciones … como todo.

Justamente, esas excepciones son las que nos permite superponer los rectángulos y hacer que uno se muestre encima del otro. Básicamente, hay dos propiedades que controlan esos detalles:position y z-index.

Por defecto, la propiedad position, tiene el valor static pero, admite otros como relative yabsolute. Usando esos dos valores podemos ubicar cualquier cosa en un lugar preciso. Lo más simple es que el contenedor tenga el valor relative y el contendio el valor absolute:

<div style="position: relative;">
  <div style="position: absolute;"> HOLA </div>
</div>
HOLA

 

Así como está, no parece haber diferencias, si le quitamos as propiedades, se verá igual porque nos falta algo más, agregarle las que nos permitirán ubicarlo con exactitud y estas son top, right,bottom y left que son las “coordenadas” cuyo punto de origen es el borde del contenedor asi que si ponemos left: 30px y top: 50px, el contenido bajará 50 pixeles (borde superior = cero) y se movera otros 30 a la izquierda (borde izquierdo = cero):
<div style="position: relative;">
  <div style="position: absolute; left: 30px; top: 50px;"> HOLA </div>
</div>
HOLA

 

Y si ponemos right: 30px y bottom: 50px, el contenido subirá 50 pixeles (borde inferior = cero) y se movera otros 30 a la derecha (borde derecho = cero):
<div style="position: relative;">
  <div style="position: absolute; right: 30px; bottom: 50px;"> HOLA </div>
</div>
HOLA

 

De este modo, bien podríamos ubicar más de un contenido:
<div style="position: relative;">
  <div style="position: absolute; left: 30px; top: 50px;"> CONTENIDO UNO </div>
  <div style="position: absolute; right: 30px; bottom: 50px;"> CONTENIDO DOS </div>
</div>
CONTENIDO UNO
CONTENIDO DOS

 

En el ejemplo, dadas las ubicaciones, el segundo se superpone al primero y aparece por encima ya que esa es la forma normal en que se muestran los rectángulos; a medida que los agregamos, se van “apilando” y la propiedad z-index permite cambiar ese orden natural.

Como no los hemos definido, basta ponerles un número, y el que tenga el número más alto, se mostrará por encima sin importar la forma en que esté escrito el código; en este ejemplo, el tercero no se muestra arriba de los otros porque forzamos a que sea el segundo el que esté arriba de todo, poniéndole un valor de z-index superior:

<div style="position: relative;">
  <div style="position: absolute; left: 10px; top: 30px; z-index: 1;"> CONTENIDO UNO </div>
  <div style="position: absolute; left: 30px; top: 80px; z-index: 3;"> CONTENIDO DOS </div>
  <div style="position: absolute; left: 50px; top: 120px; z-index: 2;"> CONTENIDO TRES </div>
</div>
CONTENIDO UNO
CONTENIDO DOS
CONTENIDO TRES

 

Hasta ahí son rectángulos de colores pero el contenido puede ser cualquier cosa; por ejemplo textos y si estos textos no tienen fondos de color, también se superpondrán:

 

este es un texto
y este es otro

 

Mezclamos entonces varias propiedades y si es necesario, pueden verse algunas ideas básicas enwebdesignerdepot.com.
<style>
#superponer {
  position: relative;
  text-align: center;}
#superponer h5 {
  color: #D0D9E1;
  font-family: Georgia;
  font-size: 140px;
  letter-spacing: -6px;
  margin: 0;
  opacity: .9;
  padding: 0;
  -moz-transform: skew(20deg);
  -o-transform: skew(20deg);
  -webkit-transform: skew(20deg);
}
#superponer h6 {
  color: #4682B4;
  font-family: Verdana;
  font-size: 60px;
  left: 120px;
  letter-spacing: 20px;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 20px;
}
#superponer h6 span {
  color: #F66;
  font-family: Times New Roman;
  font-size: 100px;
  font-style: italic;
  text-shadow: 3px 3px 1px #000;
}
#superponer:hover > h6 span {
  -moz-transform: scale(2);
  -o-transform: scale(2);
  -webkit-transform: scale(2);zoom:2;
}
</style>

<div id="superponer">
  <h5> un título </h5>
  <h6> eje <span> m </span> plo </h6>
</div>

 

un título