Tired of javascript for creating galleries? How about trying your hands on using CSS for creating galleries with some awesome effect.
I am glad to show what I did.
Lets start with the basic example for fade animation. Keeping it simple I am adding only script needed to animate.
Demo 1
HTML Markup
<div class="cb-main">
<div class="cb-slideshow">
<div>Img 1</div>
<div>Img 2</div>
<div>Img 3</div>
<div>Img 4</div>
<div>Img 5</div>
<div>Img 6</div>
</div>
</div>
CSS
/* Set animation for each image */
.cb-slideshow div {
-webkit-animation: imageAnimation 30s linear infinite 0s;
}
/* Setting background image and delay , example */
.cb-slideshow div:nth-child(1) {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMSo_-tkpRIGoyp3QnAYAVlhFXCC-R8Ani6eN4Qyf9RTkfoHhS5mSsvSh3_MBzhGutC-updYhyVNoM0obxBRy_cwfpTm-7OLOyums7dspEZ_hW2Pra7kx9tJn7K5a3wZ1YN3C6kxT6yDY/s1600/1.jpg)
}
.cb-slideshow div:nth-child(2) {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-9LKwYc3CjCTMjohNlA-mpF6Hj7LbvR2w0JlybQQ-Kjt8BhpCQnq_QkVrjE_suoY-IhBFCTxCxbSR-Q-V7YDMpWNFSmI_yXvZL7G65g38ayuqBZN7RivbIwjsop7IDQRwhJ7zu0SBUUI/s1600/2.jpg);
-webkit-animation-delay: 6s;
}
/* Defining keyframe */
/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
Now with a slightest change in the above example we can create another effects
Demo 2
CSS
/* Making changes in the keyframe animation in DEMO 1 */
@-webkit-keyframes imageAnimation {
0% { opacity: 0;
-webkit-transform: scale(1);
-webkit-animation-timing-function: ease-in;
}
8% { opacity: 1;
-webkit-transform: scale(1.5);
-webkit-animation-timing-function: ease-out;
}
17% { opacity: 1;
-webkit-transform: scale(1.5);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
Demo 3
CSS
/* Making changes in the keyframe animation in DEMO 1 */
@-webkit-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
17% { opacity: 1;
-webkit-transform: scale(1); }
25% { opacity: 0 }
100% { opacity: 0 ;
-webkit-transform: scale(10);
}
}
Now lets add navigation for the gallery
Demo 4
HTML Markup
<ul class="slides">
<input type="radio" name="radio-btn" id="img-1" checked />
<li class="slide-container">
<div class="slide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMSo_-tkpRIGoyp3QnAYAVlhFXCC-R8Ani6eN4Qyf9RTkfoHhS5mSsvSh3_MBzhGutC-updYhyVNoM0obxBRy_cwfpTm-7OLOyums7dspEZ_hW2Pra7kx9tJn7K5a3wZ1YN3C6kxT6yDY/s1600/1.jpg" />
</div>
</li>
<input type="radio" name="radio-btn" id="img-2" />
<li class="slide-container">
<div class="slide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-9LKwYc3CjCTMjohNlA-mpF6Hj7LbvR2w0JlybQQ-Kjt8BhpCQnq_QkVrjE_suoY-IhBFCTxCxbSR-Q-V7YDMpWNFSmI_yXvZL7G65g38ayuqBZN7RivbIwjsop7IDQRwhJ7zu0SBUUI/s1600/2.jpg" />
</div>
</li>
</ul>
<li class="nav-dots">
<label for="img-1" class="nav-dot" id="img-dot-1"></label>
<label for="img-2" class="nav-dot" id="img-dot-2"></label>
</li>
'slides' act as the main container for the gallery
radio button is used for the navigation, the li below radio button currently checked is displayed
'nav-dots' is the container for the navigation buttons. Each label when clicked checks the reference radio as specified by 'for' attribute.
CSS
/* By default transforming the image to rotate 360deg and scale to 0 */
.slide {
transform: rotate(360deg) scale(0);
}
/* When navigation dot is clicked, rotating image to 0 deg and scaling it to 1 */
input:checked + .slide-container .slide {
transform: rotate(0deg) scale(1);
}
Making a slight change in DEMO 4, we can create a new animation effect.
Demo 5
CSS
/* By default transforming the image to scale to 0 */
.slide {
transform: scale(0);
}
/* When navigation dot is clicked, scaling it to 1 */
input:checked + .slide-container .slide {
transform: scale(1);
}
One more change in DEMO 4, and yet another animation effect.
Demo 6
CSS
/* By default transforming the image to rotateZ by -10deg */
.slide {
transform: rotateZ(-10deg);
}
/* When navigation dot is clicked, rotateZ to 0deg */
input:checked + .slide-container .slide {
transform: rotateZ(0);
}
You can download the demo here.
P.S. : These demos uses CSS3, this example is not supported by IE, will update the post with the work around. Thanks for having a look :)
