Creación de una barra de participación social Sticky con transiciones y transformaciones CSS3

Vista prévia

Descripción

En este post vamos a crear una barra de participación social animada en el lado derecho/izquierdo de tu página web, con un desplazamiento suave sobre animaciones basadas en transiciones y transformaciones CSS3. No se requiere JS.

Usage:

Crea el HTML para la barra de compartir social Sticky siguiendo la estructura como esta:

<div class="sticky-container">
<ul class="sticky">
<li> <img width="32" height="32" title="" alt="" src="img/fb1.png" />
<p>Facebook</p>
</li>
<li> <img width="32" height="32" title="" alt="" src="img/tw1.png" />
<p>Twitter</p>
</li>
<li> <img width="32" height="32" title="" alt="" src="img/pin1.png" />
<p>Pinterest</p>
</li>
<li> <img width="32" height="32" title="" alt="" src="img/li1.png" />
<p>Linkedin</p>
</li>
<li> <img width="32" height="32" title="" alt="" src="img/rss1.png" />
<p>RSS</p>
</li>
<li> <img width="32" height="32" title="" alt="" src="img/tm1.png" />
<p>Tumblr</p>
</li>
<li> <img width="32" height="32" title="" alt="" src="img/wp1.png" />
<p>WordPress</p>
</li>
<li> <img width="30" height="32" title="" alt="" src="img/vm1.png" />
<p>Vimeo</p>
</li>
</ul>
</div>

Las reglas CSS para estilo y animar la barra social.

.sticky-container {
/*background-color: #333;*/
padding: 0px;
margin: 0px;
position: fixed;
right: -119px;
top: 130px;
width: 200px;
}
.sticky li {
list-style-type: none;
background-color: #333;
color: #efefef;
height: 43px;
padding: 0px;
margin: 0px 0px 1px 0px;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
cursor: pointer;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter: gray;
-webkit-filter: grayscale(100%);
}
.sticky li:hover {
margin-left: -115px;
/*-webkit-transform: translateX(-115px);
		-moz-transform: translateX(-115px);
		-o-transform: translateX(-115px);
		-ms-transform: translateX(-115px);
		transform:translateX(-115px);*/
		/*background-color: #8e44ad;*/
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(0%);
}
.sticky li img {
float: left;
margin: 5px 5px;
margin-right: 10px;
}
.sticky li p {
padding: 0px;
margin: 0px;
text-transform: uppercase;
line-height: 43px;
}

Eso es todo. Libre para editar estilos CSS para crear sus propios estilos.