Web Component Banner Flotante


El siguiente web component permite hacer que cualquier contenido flote sobre la página a medida que se hace scroll vertical. Una forma sencilla de incluir elementos siempre visibles en la página.

Permite indicar en qué posición queremos que sea presentado arriba/abajo e izquierda/derecha. En esta propia página lo puedes ver en acción. A medida que hagas scroll lo veras ;-)

El uso por defecto de este componente es muy sencillo. Solo necesitas importarlo desde wpiece, encapsular tu banner y estará flotando. Recuerda que necesitas incluir el polyfill para web components.

<!DOCTYPE html>
<html lang="en">
<head>
	<script src="https://www.wpiece.com/js/webcomponents.min.js"></script>
	<link  rel="import" href="http://www.wpiece.com/p/10_26" />
</head>

<body>
	<floating-banner>
			contenido (html, texto,...) de tu banner
	</floating-banner>
</body>
</html>

Ejemplos de uso

<floating-banner>
		contenido (html, texto,...) de tu banner
</floating-banner>

Por defecto

El banner flotará posicionado arriba y a la izquierda

<floating-banner  where="right">
		contenido (html, texto,...) de tu banner
</floating-banner>

Situado a la derecha

Indicando como valor del atributo where el valor right le indicamos al banner que debe flotar a la derecha.

<floating-banner  where="bottom left">
		contenido (html, texto,...) de tu banner
</floating-banner>

Abajo e izquierda

También le podemos indicar que se situe abajo y a la izquierda utilizando el mismo atributo where.

<floating-banner  where="bottom right">
		contenido (html, texto,...) de tu banner
</floating-banner>

Abajo a la derecha

Y para tener todas las posibles posiciones solo nos falta la opción bottom right de nuestro atributo de posición where.

<floating-banner  animation="bounceInDown">
		contenido (html, texto,...) de tu banner
</floating-banner>

Con animación

También puedes configurar tu banner para que tenga animación cuando el usuario hace scroll. Utiliza el atributo animation. Las animaciones que puedes usar son:

bounce, flash, pulse, rubberBand, shake, headShake, swing, tada, wobble, jello, bounceIn, bounceInDown, bounceInLeft, bounceInRight, bounceInUp, bounceOut, bounceOutDown, bounceOutLeft, bounceOutRight, bounceOutUp, fadeIn, fadeInDown, fadeInDownBig, fadeInLeft, fadeInLeftBig, fadeInRight, fadeInRightBig, fadeInUp, fadeInUpBig, fadeOut, fadeOutDown, fadeOutDownBig, fadeOutLeft, fadeOutLeftBig, fadeOutRight, fadeOutRightBig, fadeOutUp, fadeOutUpBig, flipInX, flipInY, flipOutX, flipOutY, lightSpeedIn, lightSpeedOut, rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight, rotateOut, rotateOutDownLeft, rotateOutDownRight, rotateOutUpLeft, rotateOutUpRight, hinge, rollIn, rollOut, zoomIn, zoomInDown, zoomInLeft, zoomInRight, zoomInUp, zoomOut, zoomOutDown, zoomOutLeft, zoomOutRight, zoomOutUp, slideInDown, slideInLeft, slideInRight, slideInUp, slideOutDown, slideOutLeft, slideOutRight, slideOutUp

Puedes probarlas en https://daneden.github.io/animate.css/


default: top left
bounceInDown

topr right
zoomInLeft

right bottom
rollIn

left bottom
fadeInDown