Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 24,256
Total Threads: 81,169
Total Posts: 566,838
There are 40 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Design and Development     Programming     Javascript :

Google plus album photo animation with css3 and javascript

Thread title: Google plus album photo animation with css3 and javascript
Reply    
    Thread tools Search this thread Display Modes  
07-30-2011, 07:45 PM
#1
johnsdk is offline johnsdk
Status: I'm new around here
Join date: Jul 2011
Location:
Expertise:
Software:
 
Posts: 1
iTrader: 0 / 0%
 

johnsdk is on a distinguished road

  Old  Google plus album photo animation with css3 and javascript

Hi all , i'm trying to mimic some animation effect similar found on Google plus .to be more precise ,i'm trying to make something similar when you hover your cursor on Google plus Photo album .
my question is how to make the photo rotate to a certain degree ? can this be done using pure css3 or should javascript be used ?
any help would be appreciated .

08-04-2011, 08:00 PM
#2
Jake B is offline Jake B
Jake B's Avatar
Status: Member
Join date: Aug 2007
Location: SF
Expertise: Coder
Software: Sublime Text, Google Chrome
 
Posts: 211
iTrader: 1 / 100%
 

Jake B is on a distinguished road

Send a message via AIM to Jake B

  Old

You're going to want to look at these things:

- Modernizr
- CSS3 Please
- Some jQuery Rotate plugin

Now, CSS3 transforms are supported by modern browsers, and IE9 and below have their own special filter attribute that does DX transforms. They suck, and you can't animate them so you might want to perform a JavaScript fallback for them instead of actually using them.

Anyways, let's assume this is your HTML:

Code:
<img src="image.jpg" class="rotate"/>
This would be your CSS:

Code:
.rotate {
	/* This may or may not be needed, as it provides the starting values to transition from */
	-moz-transform: rotate(0deg);  /* FF3.5+ */
       -o-transform: rotate(0deg);  /* Opera 10.5 */
  -webkit-transform: rotate(0deg);  /* Saf3.1+, Chrome */
      -ms-transform: rotate(0deg);  /* IE9 */
          transform: rotate(0deg);

	transition: transform 0.25s ease-in-out;
		-webkit-transition: transform 0.25s ease-in-out;
		-moz-transition: transform 0.25s ease-in-out;
		-o-transition: transform 0.25s ease-in-out;
		-ms-transition: transform 0.25s ease-in-out; /* 
}
	.rotate:hover {
		/* Rotate everything 7.5deg clockwise */

		-moz-transform: rotate(7.5deg);  /* FF3.5+ */
       -o-transform: rotate(7.5deg);  /* Opera 10.5 */
  -webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome */
      -ms-transform: rotate(7.5deg);  /* IE9 */
          transform: rotate(7.5deg);  
	}
Now, all you're doing is if you hover over the image, it rotates it n degrees. Mind you, this is only supported in the specified browsers, so not everyone will see it.

(Optional) Providing Fallbacks for unsupported browsers

Now, let's take this to the next level. We want everyone to see it. Your best bet is to use Modernizr. Modernizr is JavaScript plugin that provides browser support testing along with fallbacks to make sure that your effects work across the board.

Include the modernizr plugin, jQuery and the above jQuery-Rotate and lets get crackin. Your JS:

Code:
(function() {
	// define some vars
	var rotate = $('.rotate');

	rotate.hover(rotateImage);

	function rotateImage (event) {
		Modernizr.load({
		  test: Modernizr.csstransforms,
		  nope: function() {
		  	// Perform JS fallback
		  	$(this).rotate(7.5);
		  };
		});
	};
});
Reading the docs, jQuery-rotate performs filter actions for IE, so you don't necessarily need to include it in your CSS. You can choose to include it though if you'd like.

If you don't care about fallbacks, you should be able to do everything before the fallback method and be perfectly fine.

I hope this helps, I didn't test anything as I am at work, but it should be fine.

Reply    


Thread Tools
Display Modes

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed