Mobile Friendly Website

CSSPLAY

Doing it with style

CSS DEMOSShape Autorun Slideshow

Date : 17th August 2015

For all modern browsers except IE and Firefox





Information

A simple autorun slideshow using CSS 'shape-outside:polygon' and 'clip-path:polygon' with '@keyframes' animation to produce an overlay to represent a camera diaphragm opening and closing between each image.

This is a responsive slideshow so will resize to fit any browser and device. You will need to refresh the page if you are resizing a PC/Mac browser as the Google Ads are not dynamic and need a page refresh to resize to fit.

Just a pity that Firefox and Explorer/Edge do not yet support these styles.

HTML Code

<div class="container">
	<div class="image p1"></div>
	<div class="image p2"></div>
	<div class="image p3"></div>
	<div class="image p4"></div>
	<div class="image p5"></div>
	<div class="image p6"></div>
	<div class="image p7"></div>
	<div class="image p8"></div>
	<div class="image p9"></div>
	<div class="iris"></div>
</div>

Cascading Style Sheet

.container {
overflow:hidden;
position:relative;
margin:0 auto;
width:100%;
height:0;
padding-top:75%;
}
.image {
position:absolute; 
left:0; 
top:0; 
width:100%; 
height:100%; 
opacity:0; 
background-size:contain; 
z-index:1;
}
.p1 {background-image: url(polygon/pic1.jpg); -webkit-animation:autoplay 48s linear infinite 0s; animation:autoplay 48s linear infinite 0s;}
.p2 {background-image: url(polygon/pic2.jpg); -webkit-animation:autoplay 48s linear infinite 6s; animation:autoplay 48s linear infinite 6s;}
.p3 {background-image: url(polygon/pic3.jpg); -webkit-animation:autoplay 48s linear infinite 12s; animation:autoplay 48s linear infinite 12s;}
.p4 {background-image: url(polygon/pic4.jpg); -webkit-animation:autoplay 48s linear infinite 18s; animation:autoplay 48s linear infinite 18s;}
.p5 {background-image: url(polygon/pic5.jpg); -webkit-animation:autoplay 48s linear infinite 24s; animation:autoplay 48s linear infinite 24s;}
.p6 {background-image: url(polygon/pic6.jpg); -webkit-animation:autoplay 48s linear infinite 30s; animation:autoplay 48s linear infinite 30s;}
.p7 {background-image: url(polygon/pic7.jpg); -webkit-animation:autoplay 48s linear infinite 36s; animation:autoplay 48s linear infinite 36s;}
.p8 {background-image: url(polygon/pic8.jpg); -webkit-animation:autoplay 48s linear infinite 42s; animation:autoplay 48s linear infinite 42s;}
.iris {
width:130%; 
height:200%; 
position:absolute; 
left:-15%; 
top:-50%; 
z-index:10; 
overflow:hidden; 
background-image:radial-gradient(circle, rgba(0,0,0,0.8), rgba(32,64,96,1));
animation:lens 6s linear infinite;
-webkit-animation:lens 6s linear infinite;
}
@keyframes autoplay {
0% {opacity:0}
1%, 12.5% {opacity:1}
13.5%, 100% {opacity:0;}
}
@-webkit-keyframes autoplay {
0% {opacity:0;}
1%, 12.5% {opacity:1}
13.5%, 100% {opacity:0;}
}
@-webkit-keyframes lens{
0%, 2% {
-webkit-shape-outside: polygon(50% 0, 100% 0, 100% 100%, 0px 100%, 0 0, 50% 0, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 0);
-webkit-clip-path: polygon(50% 0, 100% 0, 100% 100%, 0px 100%, 0 0, 50% 0, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 0);
}
10%, 90% {
-webkit-shape-outside: polygon(50% 0, 100% 0, 100% 100%, 0px 100%, 0 0, 50% 0, 50% 0, 0 25%, 0 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0, 50% 0);
-webkit-clip-path: polygon(50% 0, 100% 0, 100% 100%, 0px 100%, 0 0, 50% 0, 50% 0, 0 25%, 0 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0, 50% 0);
-webkit-transform:rotate(180deg);
}
98%, 100% {
-webkit-shape-outside: polygon(50% 0, 100% 0, 100% 100%, 0px 100%, 0 0, 50% 0, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 0);
-webkit-clip-path: polygon(50% 0, 100% 0, 100% 100%, 0px 100%, 0 0, 50% 0, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 0);}
}
keyframes lens{
0%, 2% {
shape-outside: polygon(50% 0, 100% 0, 100% 100%, 0px 100%, 0 0, 50% 0, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 0);
clip-path: polygon(50% 0, 100% 0, 100% 100%, 0px 100%, 0 0, 50% 0, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 0);
}
10%, 90% {
shape-outside: polygon(50% 0, 100% 0, 100% 100%, 0px 100%, 0 0, 50% 0, 50% 0, 0 25%, 0 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0, 50% 0);
clip-path: polygon(50% 0, 100% 0, 100% 100%, 0px 100%, 0 0, 50% 0, 50% 0, 0 25%, 0 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0, 50% 0); 
transform:rotate(180deg);
}
98%, 100% {
shape-outside: polygon(50% 0, 100% 0, 100% 100%, 0px 100%, 0 0, 50% 0, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 0);
clip-path: polygon(50% 0, 100% 0, 100% 100%, 0px 100%, 0 0, 50% 0, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 0);}
}

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