Notice: Undefined index: HTTP_ACCEPT_LANGUAGE in /var/www/vhost/wpiece.com/home/html/comun/configuracion.php on line 24
Cloud Web Component example: Floating Banner

Web Component Floating Banner


The following web component allows you to make any content float on the page as you scroll vertically. A simple way to include elements that are always visible on the page.

It allows indicate where we want it to be presented top/bottom and left/right. In this page you can see it applied. As you scroll, you'll see ;-)

The default use of this component is very simple. You only need to import it from wpiece, encapsulate your banner and it will be floating. Remember that you need to include polyfill for 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>
			banner content (html, text,...)
	</floating-banner>
</body>
</html>

Use examples

<floating-banner>
			banner content (html, text,...)
</floating-banner>

Default banner

The banner will float positioned on top-left.

<floating-banner  where="right">
			banner content (html, text,...)
</floating-banner>

Aligned to the right

Indicating the value right for the floating banner attribute where you can tells the banner to float to the right.

<floating-banner  where="bottom left">
			banner content (html, text,...)
</floating-banner>

Bottom and left

We can also indicate that it is located bottom and to the left using the same attribute where.

<floating-banner  where="bottom right">
			banner content (html, text,...)
</floating-banner>

Bottom and right

And to have all the possible positions we only need the bottom right option of our where position attribute.

<floating-banner  animation="bounceInDown">
			banner content (html, text,...)
</floating-banner>

With animation

You can also configure your banner to have animation when the user scrolls. Use the animation attribute. The animations you can use are:

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

You can try them on https://daneden.github.io/animate.css/


default: top left
bounceInDown

topr right
zoomInLeft

right bottom
rollIn

left bottom
fadeInDown