Fluid CSS3 Slideshow With Parallax Effects Slider for blogger 2013 ~ Digital Hub Inc

In this tutorial, we are going to create a slideshow with a parallax effect with the help of some CSS3 properties. We’ll use radio buttons and sibling combinators for controlling which slide is shown. There will be two backgrounds and the idea is to change the background positions and the position of the slider with transitions in order to create a slight parallax effect.

Live Demo

How to add Fluid CSS3 Slideshow With Parallax Effects Slider on Blogger

[ Step 1: Adding Styles ]

Go To Blogger Dashboard > Design > Edit HTML > Expand Widget Templates (For New Interface Templates > Edit HTML)
Backup Your Template Before Making Any Changes
Click (Ctrl + F) Search Give Below Code.

Recommended Reading : Customized JQuery Nivo Slider for Blogger in style 2

```
]]></b:skin>
```

copy below cody of CSS code and paste just above ]]></b:skin> it.

.sp-slideshow {
    position: relative;
	margin: 10px auto;
	width: 80%;
	max-width: 1000px;
	min-width: 260px;
	height: 460px;
	border: 10px solid #fff;
	border: 10px solid rgba(255,255,255,0.9);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.sp-content {
    background: #7d7f72 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7DNu497YYFZNhKVXSVaG8XgsR_6HVUnPihJeDWKROYrP_UXMAbM4K8nvQpupeJrMtuKxYgqepQ_izcq9t4xOlrakxT06ll4EXrI6AnaVE38OTRWGVMcvTR2DdgKaFMj8adVw5Va9nTIvP/s1600/grid.png) repeat scroll 0 0;
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.sp-parallax-bg {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCcq34npukI0IqgjxLCqI4l22T4tv4iBu_E_I7DyjLSM_yhyivT0XKmmPrCS3mKIYE8JYrRGZqpaBiQP-hYIZtzoNUV2ZqNlV4Y8riAhtFSuley8mEoKqUr0igFnQIlzFdH-R46P-z_laA/s1600/map.png) repeat-x scroll 0 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.sp-slideshow input {
    position: absolute;
	bottom: 15px;
	left: 50%;
	width: 9px;
	height: 9px;
	z-index: 1001;
	cursor: pointer;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
}

.sp-slideshow input + label {
    position: absolute;
    bottom: 15px;
	left: 50%;
    width: 6px;
	height: 6px;
	display: block;
	z-index: 1000;
	border: 3px solid #fff;
	border: 3px solid rgba(255,255,255,0.9);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: background-color linear 0.1s;
    -moz-transition: background-color linear 0.1s;
    -o-transition: background-color linear 0.1s;
    -ms-transition: background-color linear 0.1s;
    transition: background-color linear 0.1s;
}
.sp-slideshow input:checked + label {
	background-color: #fff;
    background-color: rgba(255,255,255,0.9);
}

.sp-selector-1, .button-label-1 {
    margin-left: -36px;
}

.sp-selector-2, .button-label-2 {
    margin-left: -18px;
}

.sp-selector-4, .button-label-4 {
    margin-left: 18px;
}

.sp-selector-5, .button-label-5 {
    margin-left: 36px;
}

.sp-arrow {
    position: absolute;
	top: 50%;
	width: 28px;
	height: 38px;
	margin-top: -19px;
	display: none;
	opacity: 0.8;
	cursor: pointer;
	z-index: 1000;
	background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbAJpXqkfuTuBz3hz1iFJ3CSHPnC3B016AX4wfs3j2Tw0wBlBWxVlWrTnDPANAthI0RzKLU6utW7EtR8yhXWo5T0V24BVmB8bX-6BAW8-CdD7cyHizPMYQ48e4NtfY4KCH0SXqYQYPdHOf/s1600/arrows.png) no-repeat;
	-webkit-transition: opacity linear 0.3s;
    -moz-transition: opacity linear 0.3s;
    -o-transition: opacity linear 0.3s;
    -ms-transition: opacity linear 0.3s;
    transition: opacity linear 0.3s;
}
.sp-arrow:hover{
	opacity: 1;
}
.sp-arrow:active{
	margin-top: -18px;
}
.sp-selector-1:checked ~ .sp-arrow.sp-a2,
.sp-selector-2:checked ~ .sp-arrow.sp-a3,
.sp-selector-3:checked ~ .sp-arrow.sp-a4,
.sp-selector-4:checked ~ .sp-arrow.sp-a5 {
    right: 15px;
	display: block;
	background-position: top right;
}
.sp-selector-2:checked ~ .sp-arrow.sp-a1,
.sp-selector-3:checked ~ .sp-arrow.sp-a2,
.sp-selector-4:checked ~ .sp-arrow.sp-a3,
.sp-selector-5:checked ~ .sp-arrow.sp-a4 {
    left: 15px;
	display: block;
	background-position: top left;
}

.sp-slideshow input:checked ~ .sp-content {
    -webkit-transition: background-position linear 0.6s, background-color linear 0.8s;
    -moz-transition: background-position linear 0.6s, background-color linear 0.8s;
    -o-transition: background-position linear 0.6s, background-color linear 0.8s;
    -ms-transition: background-position linear 0.6s, background-color linear 0.8s;
    transition: background-position linear 0.6s, background-color linear 0.8s;
}

.sp-slideshow input:checked ~ .sp-content .sp-parallax-bg {
    -webkit-transition: background-position linear 0.7s;
    -moz-transition: background-position linear 0.7s;
    -o-transition: background-position linear 0.7s;
    -ms-transition: background-position linear 0.7s;
    transition: background-position linear 0.7s;
}

input.sp-selector-1:checked ~ .sp-content {
    background-position: 0 0;
	background-color: #727b7f;
}

input.sp-selector-2:checked ~ .sp-content {
    background-position: -100px 0;
	background-color: #7f7276;
}

input.sp-selector-3:checked ~ .sp-content {
    background-position: -200px 0;
	background-color: #737f72;
}

input.sp-selector-4:checked ~ .sp-content {
    background-position: -300px 0;
	background-color: #79727f;
}

input.sp-selector-5:checked ~ .sp-content {
    background-position: -400px 0;
	background-color: #7d7f72;
}

input.sp-selector-1:checked ~ .sp-content .sp-parallax-bg {
    background-position: 0 0;
}

input.sp-selector-2:checked ~ .sp-content .sp-parallax-bg {
    background-position: -200px 0;
}

input.sp-selector-3:checked ~ .sp-content .sp-parallax-bg {
    background-position: -400px 0;
}

input.sp-selector-4:checked ~ .sp-content .sp-parallax-bg {
    background-position: -600px 0;
}

input.sp-selector-5:checked ~ .sp-content .sp-parallax-bg {
    background-position: -800px 0;
}

.sp-slider {
    position: relative;
	left: 0;
    width: 500%;
	height: 100%;
	list-style: none;
    margin: 0;
	padding: 0;
    -webkit-transition: left ease-in 0.8s;
    -moz-transition: left ease-in 0.8s;
    -o-transition: left ease-in 0.8s;
    -ms-transition: left ease-in 0.8s;
    transition: left ease-in 0.8s; 
}

.sp-slider > li {
	color: #fff;
	width: 20%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	height: 100%;
	padding: 0 60px;
    float: left;
	text-align: center;
	opacity: 0.4;
    -webkit-transition: opacity ease-in 0.4s 0.8s;
    -moz-transition: opacity ease-in 0.4s 0.8s;
    -o-transition: opacity ease-in 0.4s 0.8s;
    -ms-transition: opacity ease-in 0.4s 0.8s;
    transition: opacity ease-in 0.4s 0.8s; 
}
.sp-slider > li img{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	display: block;
	margin: 0 auto;
	padding: 40px 0 50px 0;
	max-height: 100%;
	max-width: 100%;
}
input.sp-selector-1:checked ~ .sp-content .sp-slider {
    left: 0;
}

input.sp-selector-2:checked ~ .sp-content .sp-slider {
    left: -100%;
}

input.sp-selector-3:checked ~ .sp-content .sp-slider {
    left: -200%;
}

input.sp-selector-4:checked ~ .sp-content .sp-slider {
    left: -300%;
}

input.sp-selector-5:checked ~ .sp-content .sp-slider {
    left: -400%;
}

input.sp-selector-1:checked ~ .sp-content .sp-slider > li:first-child,
input.sp-selector-2:checked ~ .sp-content .sp-slider > li:nth-child(2),
input.sp-selector-3:checked ~ .sp-content .sp-slider > li:nth-child(3),
input.sp-selector-4:checked ~ .sp-content .sp-slider > li:nth-child(4),
input.sp-selector-5:checked ~ .sp-content .sp-slider > li:nth-child(5){
	opacity: 1;
}
@media screen and (max-width: 840px){
	.sp-slideshow { height: 345px; }
}
@media screen and (max-width: 680px){
	.sp-slideshow { height: 285px; }
}
@media screen and (max-width: 560px){
	.sp-slideshow { height: 235px; }
}
@media screen and (max-width: 320px){
	.sp-slideshow { height: 158px; }
}

[ Step 2: Adding Slider ]

Now go to Blogger Dashboard > Layout
Click on Add a Gadget (below header)
Select HTML/JavaScript
Copy below code and paste inside it.

<link rel="shortcut icon" href="../favicon.ico" /> 
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
		<script type="text/javascript" src="js/modernizr.custom.04022.js"></script>
		<link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300,300italic" rel="stylesheet" type="text/css" />
    
    
        <div class="container">
		
			<!-- Codrops top bar -->
            <div class="codrops-top">
               
              
                <div class="clr"></div>
            </div><!--/ Codrops top bar -->
			
		
			
			<div class="sp-slideshow">
			
				<input id="button-1" type="radio" name="radio-set" class="sp-selector-1" checked="checked" />
				<label for="button-1" class="button-label-1"></label>
				
				<input id="button-2" type="radio" name="radio-set" class="sp-selector-2" />
				<label for="button-2" class="button-label-2"></label>
				
				<input id="button-3" type="radio" name="radio-set" class="sp-selector-3" />
				<label for="button-3" class="button-label-3"></label>
				
				<input id="button-4" type="radio" name="radio-set" class="sp-selector-4" />
				<label for="button-4" class="button-label-4"></label>
				
				<input id="button-5" type="radio" name="radio-set" class="sp-selector-5" />
				<label for="button-5" class="button-label-5"></label>
				
				<label for="button-1" class="sp-arrow sp-a1"></label>
				<label for="button-2" class="sp-arrow sp-a2"></label>
				<label for="button-3" class="sp-arrow sp-a3"></label>
				<label for="button-4" class="sp-arrow sp-a4"></label>
				<label for="button-5" class="sp-arrow sp-a5"></label>
				
				<div class="sp-content">
					<div class="sp-parallax-bg"></div>
					<ul class="sp-slider clearfix">
						<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0ezCcl4lg32n6z0MxmaxFIPjauou0BD0slBb_9PW_PsHDo0aCqiY5PVyhX6iAqmvqDTuDBpD861ixEKlSa4xhRocVw3eqaYhKd6O9j9U2znybGudAMhRqU1Lnx7jvCSrfoaDgj8YlgbnX/s1600/image1.png" alt="image01" /></li>
						<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKXXgwZHsrOJoLH8cxq86ieSUHyUHJaL4BXcgLQ_srvE7rG-zlnTGLO8P0Y5qnDjz5N2vsU4g_jra7bc-fFmmBUpow-q-8KrfsqNvYbcwrewqQQJeb5ixRD7eKVCeBd0pXJe-RMueUNOL9/s1600/image3.png" alt="image02" /></li>
						<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiScniw88egiXwhIMeA5U99zFjfM1aWQp12hjHBQYA-LBySWNZg06HmGOX8xjzl73tmQ6f7HJx5KdmF858-NSxsS5hrb0uncMw-OmppEkfrL2ylOG-bVtUgxCWJBjx-rX4qeGVTOclpDofQ/s1600/image2.png" alt="image03" /></li>
						<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAdc7FQY3bEyACn52McFgAzODgt1HIRC68F9hNtoYYIQXH573G8gWcHavOh2OeOvekcq90MQwpa_VOu6IFAS_2rx-MVU4STSTpx2AlZCXzOw9ZzwAl36oRz_EbxhwIwEqHfeVM_I1qSy7T/s1600/image4.png" alt="image04" /></li>
						<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPLWQsHRZ-l28v0bF__72qPRrxMZZGFbrQ0OWJmzswDNR06B0q6Gra8swISqQB-Y8ZU0VCmWQE-HFllw4DduaUMOVbJgfhQuHX6Kap59E8PF_fsBe0ObX61N4JHyd61-PGDVI0bj2KQGDl/s1600/image5.png" alt="image05" /></li>
					</ul>
				</div><!-- sp-content -->
				
			</div><!-- sp-slideshow -->
			

		</div>

Replace "URL OF IMAGE" with your image URL.
Save Widget and exit.

End.

[ Content Source : http://tympanus.net/ ]

Fluid CSS3 Slideshow With Parallax Effects Slider for blogger 2013

Have Any Problem? Ask It Below In Comment Box.

Mohan Singh

0 comments:

Post a Comment

TOP-LEFT ADS

Popular Posts

Subscribe

Subscribe Our Newsletter

Labels

2015