Mobile Friendly Website

CSSPLAY

Doing it with style

CSS DEMOSShape Autorun Slideshow v2

Date : 26th August 2015

For all modern browsers except IE and Firefox





Information

The previous slideshow has a problem when viewed on the iPad and iPhone where the animations start before the page has fully loaded. This causes the iris/diaphragm animation to be out of sync with the image change.

This can be overcome by using a small jQuery/javascript routine to add the 'animation' classname after the page has fully loaded. I have also simplified the code and stylesheet so that the iris/diaphragm animation is added to each image.

HTML Code

<div class="container">
	<img src="polygon2/pic1.jpg" alt="">
	<img src="polygon2/pic2.jpg" alt="">
	<img src="polygon2/pic3.jpg" alt="">
	<img src="polygon2/pic4.jpg" alt="">
	<img src="polygon2/pic5.jpg" alt="">
	<img src="polygon2/pic6.jpg" alt="">
	<img src="polygon2/pic7.jpg" alt="">
	<img src="polygon2/pic8.jpg" alt="">
</div>

Cascading Style Sheet

.container {
overflow:hidden;
position:relative;
margin:0 auto;
border:1px solid #000;
background:#000;
width:100%; 
height:0; 
padding-top:75%;
}
.container img {
width:100%; 
height:100%; 
position:absolute; 
left:0; 
top:0; 
z-index:10; 
overflow:hidden;
-webkit-shape-outside: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
-webkit-clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
shape-outside: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
}
.loaded img:nth-of-type(1) {-webkit-animation:autoplay 48s linear infinite 0s; animation:autoplay 48s linear infinite 0s;}
.loaded img:nth-of-type(2) {-webkit-animation:autoplay 48s linear infinite 6s; animation:autoplay 48s linear infinite 6s;}
.loaded img:nth-of-type(3) {-webkit-animation:autoplay 48s linear infinite 12s; animation:autoplay 48s linear infinite 12s;}
.loaded img:nth-of-type(4) {-webkit-animation:autoplay 48s linear infinite 18s; animation:autoplay 48s linear infinite 18s;}
.loaded img:nth-of-type(5) {-webkit-animation:autoplay 48s linear infinite 24s; animation:autoplay 48s linear infinite 24s;}
.loaded img:nth-of-type(6) {-webkit-animation:autoplay 48s linear infinite 30s; animation:autoplay 48s linear infinite 30s;}
.loaded img:nth-of-type(7) {-webkit-animation:autoplay 48s linear infinite 36s; animation:autoplay 48s linear infinite 36s;}
.loaded img:nth-of-type(8) {-webkit-animation:autoplay 48s linear infinite 42s; animation:autoplay 48s linear infinite 42s;}
@-webkit-keyframes autoplay{
0% {
-webkit-shape-outside: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
-webkit-clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
}
1%, 11.5% {
-webkit-shape-outside: polygon(50% -50%, -15% 0, -15% 100%, 50% 150%, 115% 100%, 115% 0);
-webkit-clip-path: polygon(50% -50%, -15% 0, -15% 100%, 50% 150%, 115% 100%, 115% 0);
}
12.5%, 100% {
-webkit-shape-outside: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
-webkit-clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
}
}
@keyframes autoplay{
0% {
shape-outside: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
}
1%, 11.5% {
shape-outside: polygon(50% -50%, -15% 0, -15% 100%, 50% 150%, 115% 100%, 115% 0);
clip-path: polygon(50% -50%, -15% 0, -15% 100%, 50% 150%, 115% 100%, 115% 0);
}
12.5%, 100% {
shape-outside: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
}
}
@keyframes autoplay{
0% {
-webkit-shape-outside: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
-webkit-clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
}
1%, 11.5% {
-webkit-shape-outside: polygon(50% -50%, -15% 0, -15% 100%, 50% 150%, 115% 100%, 115% 0);
-webkit-clip-path: polygon(50% -50%, -15% 0, -15% 100%, 50% 150%, 115% 100%, 115% 0);
}
12.5%, 100% {
-webkit-shape-outside: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
-webkit-clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
}
}

jQuery/javascript

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(window).load(function () {
	$('.container').addClass('loaded');
});
</script>

You may use this method on your personal 'non-profit' web site without seeking my permission.
A link back to CSS PLAY is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSS PLAY.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced.
Please email me for more information.


Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page