Posts Tagged transition
Coming Soon - Premium WordPress Theme Giveaway To All Our Email Subscribers
Google Plus Photo Stack Effect Tutorial
Posted by Praveen Gowda I V in Facebook, Google Plus, Others, Tutorials, Web Design on September 18, 2011
There are so many scripts which are replica of some of the features of facebook, since Google Plus has arrived we have thought of creating tutorials on creating almost every effects you can see on Google Plus.
We have already created the following Google plus tutorials :
Google Plus Photo Stack Effect found in Google+ photo album page
…and here is one more Google + tutorial, and this time it is on the photo stack effect we find in the photo albums of Google Plus.
If you are still not yet on Google Plus and wondering what is this photo stack effect, then the below picture will give you a better idea :
Google Plus Photo Stack Effect tutorial and live demo
Want to check the script in action, then check out the live demo or download the source code and use it in your own website for whatever purpose you like.
|
Download |
Live Demo |
Wanna know how the code works ?, check out the code below:
HTML
| Source Code Of index.html |
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Google Plus Photo Album Google Plus Photo Stack Effect Live Demo</title>
<link rel="stylesheet" href="css/reset.css" media="screen">
<link rel="stylesheet" href="css/style.css" media="screen">
<style type="text/css">
ul#pics li {/*css style for the single photo only **/
background: none repeat scroll 0 0 #FFFFFF;
box-shadow: 1px 1px 1px #999999;
display: inline-block;
width: 153px;
height:157px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
ul#pics li img {/*css style for the single photo only **/
width: 150px;
height:150px;
display: block;
}
ul#pics li:hover {/*css style for the single photo only **/
-moz-transform: scale(1.1) rotate(0deg);
-webkit-transform: scale(1.1) rotate(0deg);
-o-transform: scale(1.1) rotate(0deg);
-ms-transform: scale(1.1) rotate(0deg);
transform: scale(1.1) rotate(0deg);
}
.single_photo {/*css style for the single photo only **/
margin-top : 80px;
margin-left:100px;
margin-top:65px;
}
a, a:visited, a:hover {
color: #54A6DE;
outline: medium none;
text-decoration: none;
}
#text {
margin-top:10px;
margin-left:10px;
color: #DD4B39;
font-type: arial, sans-serif;
font-size:17px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="js/app.js"></script>
</head>
<body>
<div id="page_wrap">
<div align="center" id="text">
This is the live demo of <a href="http://blog.geotitles.com/2011/09/google-plus-photo-stack-effect-tutorial">Google Plus Photo Stack Effect Tutorial</a> at <a href="http://blog.geotitles.com">Hitherto Web Labs</a>, Click <a href="http://blog.geotitles.com/2011/09/google-plus-photo-stack-effect-tutorial">here</a> to go to the <a href="http://blog.geotitles.com/2011/09/google-plus-photo-stack-effect-tutorial">tutorial</a>
</div>
<!--Stack 1 -->
<div class="image_stack" style="margin-left:600px">
<img id="photo1" class="stackphotos" src="photos/6.jpg">
<img id="photo2" class="stackphotos" src="photos/3.jpg">
<img id="photo3" class="stackphotos" src="photos/1.jpg">
</div>
<!--Stack 2 -->
<div class="image_stack" style="margin-left:300px">
<img id="photo1" class="stackphotos" src="photos/4.jpg">
<img id="photo2" class="stackphotos" src="photos/5.jpg">
<img id="photo3" class="stackphotos" src="photos/6.jpg">
</div>
<div class="single_photo">
<ul id="pics">
<li><a href="#pic1" title="Photo"><img src="photos/3.jpg" alt="Google Plus Photo Stack Effect"></a></li>
</ul>
</div>
</div>
</body>
</html>
Javascript
| Source Code of app.js |
//jquery code below is applicable for the photo stack only . Not for the single image zoom effect
$(document).ready(function () {
$(".image_stack").delegate('img', 'mouseenter', function () { //when user hover mouse on image with div id=stackphotos
if ($(this).hasClass('stackphotos')) { //
// the class stackphotos is not really defined in css , it is only assigned to each images in the photo stack to trigger the mouseover effect on these photos only
var $parent = $(this).parent();
$parent.find('img#photo1').addClass('rotate1'); //add class rotate1,rotate2,rotate3 to each image so that it rotates to the correct degree in the correct direction ( 15 degrees one to the left , one to the right ! )
$parent.find('img#photo2').addClass('rotate2');
$parent.find('img#photo3').addClass('rotate3');
$parent.find('img#photo1').css("left", "150px"); // reposition the first and last image
$parent.find('img#photo3').css("left", "50px");
}
}).delegate('img', 'mouseleave', function () { // when user removes cursor from the image stack
$('img#photo1').removeClass('rotate1'); // remove the css class that was previously added to make it to its original position
$('img#photo2').removeClass('rotate2');
$('img#photo3').removeClass('rotate3');
$('img#photo1').css("left", ""); // remove the css property 'left' value from the dom
$('img#photo3').css("left", "");
});;
});
CSS
| Source Code of style.css |
html {
padding:0;
margin: 0;
}
body {
color: #333333;
font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
font-size: 11px;
padding: 0;
margin: 0;
text-align: left;
line-height: 1.25em;
}
#page_wrap {
border: 1px solid #DDDDDD;
width: 990px;
height:400px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
.image_stack img { /* css style for photo stack */
border: none;
text-decoration: none;
position: absolute;
margin-left:0px;
width: 158px;
height: 158px;
}
.image_stack { /* css style for photo stack */
width: 400px;
position: absolute;
margin:60px 10px 10px;
}
.image_stack img { /* css style for photo stack */
position: absolute;
border: 4px solid #FFF;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
z-index: 9999;
/* Firefox */
-moz-transition: all 0.2s ease;
/* WebKit */
-webkit-transition: all 0.2s ease;
/* Opera */
-o-transition: all 0.2s ease;
/* Standard */
transition: all 0.2s ease;
}
.image_stack #photo1 { /* position of last photo in the stack */
top: 8px;
left: 108px;
}
.image_stack #photo2 {/* position of middle photo in the stack */
top: 6px;
left: 104px;
}
.image_stack #photo3 {/* position of first photo at the top in the stack */
top: 4px;
left: 100px;
right: 100px;
}
.image_stack .rotate1 {/* rotate last image 15 degrees to the right */
-webkit-transform: rotate(15deg); /* safari and chrome */
-moz-transform: rotate(15deg);/*firefox browsers */
transform: rotate(15deg);/*other */
-ms-transform:rotate(15deg); /* Internet Explorer 9 */
-o-transform:rotate(15deg); /* Opera */
}
.image_stack .rotate2 {/* css not used*/
-webkit-transform: rotate(0deg); /* safari and chrome */
-moz-transform: rotate(0deg);/*firefox browsers */
transform: rotate(0deg);/*other */
-ms-transform:rotate(0deg); /* Internet Explorer 9 */
-o-transform:rotate(0deg); /* Opera */
}
.image_stack .rotate3 {/*rotate first image 15 degrees to the left*/
-webkit-transform: rotate(-15deg); /* safari and chrome */
-moz-transform: rotate(-15deg); /*firefox browsers */
transform: rotate(-15deg);/*other */
-ms-transform:rotate(-15deg); /* Internet Explorer 9 */
-o-transform:rotate(-15deg); /* Opera */
cursor: pointer;
}
That’s it for this week, next week we will be back with more interesting and unique web tutorials, until then stay updated with our blog by :
Subscribe to RSS feeds
Subscribe via email
Subscribe via SMSWant to request a new tutorial, then please Contact me right-away.
I promise to respond to everyone who contacts asking for support or new tutorials.
Recent Comments