Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Zerfeus

nome deste efeito ?

Por , em Javascript

Recommended Posts

CL4nG    36

CL4nG
Postado 

CSS: transition e transformEste código não vai fazer aquele efeito mas com esses atributos você consegue fazer.
-webkit-transition: -webkit-transform 0.2s ease-in-out;
-moz-transition: -moz-transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out;

-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-o-transform: scale(1.3);




			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
Zerfeus
			  

	
		
	
			 0
	
		
	

		

		

			


	
		Zerfeus
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			
Obrigado! Vou dar uma olhada nessas propriedades. Mas me veio na cabeça que este efeito tinha muita interação porque o posicionamento do elemento varia de acordo com o do mouse, confesso que achei estranho vc só indicar CSS.


			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
Ted k'
			  

	
		
	
			 126
	
		
	

		

		

			


	
		Ted k'
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			
Você pode fazer usando Canvas, mas só pega a partir do IE9+ nos outros navegadores, as versões mais recentes já funciona!


			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
Zerfeus
			  

	
		
	
			 0
	
		
	

		

		

			


	
		Zerfeus
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			



CSS: transition e transformEste código não vai fazer aquele efeito mas com esses atributos você consegue fazer.


-webkit-transition: -webkit-transform 0.2s ease-in-out;
-moz-transition: -moz-transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out;

-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-o-transform: scale(1.3);


 






Amigo, como eu já supeitava só o CSS não basta.. ele pode fazer uma distorção ou outra mas ter esse dinamismo que ele tem só com auxilio do Jquery. 


 


Mandei o código Html da pagina para que o pessoal possa analizar. não consigo de forma nenhuma duplicar esse efeito para criar outros icones :(


<html>
	<head>
		<title>Efeito</title>				
				<link href="./files/css3.css" rel="stylesheet" type="text/css">
				<script language="JavaScript" src="./files/jquery-1.7.1.min.js" type="text/javascript"></script>
				<script language="JavaScript" src="./files/Three.Clock.js" type="text/javascript"></script>				
				<script type="text/javascript" src="./files/ga.js"></script>
				<script language="JavaScript" type="text/javascript">
					var SPECIAL = "whitevoid";
					
					var DEBUG_SHOWSTATS = false;
					
					var EXTRA_BUTTONS_ARRAY = [];
					var CAMERA_SCALE_ACTIVE = true;
					var CAMERA_HOVER_SPEED = 2;
					var CAMERA_HOVER_MAXSPEED = 2000;
					var CAMERA_HOVER_INTENSITY = 1500;
					var CAMERA_HOVER_OFFSET_X = 0;
					var CAMERA_HOVER_OFFSET_Y = 0;
					var CAMERA_VIEW_ZOOM = 1.8;
					var CAMERA_ZOOM_DISTANCE = 120;
					var CAMERA_ZOOM_AUTO = false;
					
					var LAYOUT_ALIGN = "right";
					
					var DEEPLINK_MODE_NAMES = true;
					
					var FOLDER_FLAT = false;
					var FOLDER_THICKNESS = 25;
					var FOLDER_OPEN_Z = -240;
					var FOLDER_FILLED = false;
					var FOLDER_UNFOLD = true;
					var FOLDER_SHOW_FIRST_CONTENT_IMAGE = true;
				
					var FOLDER_TOPLEVEL_HEIGHT = 280;
					var FOLDER_TOPLEVEL_ENABLED = false;
					var FOLDER_TOPLEVEL_ISBOX = true;
					var FOLDER_TOPLEVEL_BOXCOLOR = "21262a";
					
					var FOLDER_GLOW_URL = "graphics/glow.png";
					var FOLDER_GLOW_ENABLED = true;
					var FOLDER_GLOW_X = 0;
					var FOLDER_GLOW_Y = 0;
					var FOLDER_GLOW_Z = 60;
					var FOLDER_GLOW_WIDTH = 200;
					var FOLDER_GLOW_HEIGHT = 200;
					var FOLDER_GLOW_SCALE = 3.2;
					var FOLDER_GLOW_ROTATIONSPEED = -10;
					var FOLDER_FIXED_HEIGHT_ENABLED = true;
					var FOLDER_FIXED_HEIGHT = 320;
					
					var LABELS_ENABLED = true;
					var LABELS_X = -35.0;
					var LABELS_Y = 20.0;
					var LABELS_Z = -10.0;
					var LABELS_SCALE = 0.9;
					
					var IMAGES_FIXED_HEIGHT_ENABLED = true;
					var IMAGES_FIXED_HEIGHT = 180;
					var IMAGES_FIXED_ALTERNATIVE_HEIGHT = 375;

					var IMAGES_HIGHRES_CLICKABLE = true;
					var IMAGES_HTML_ZOOMOUTONCLICK = true;
					var IMAGES_HTML_AUTOSIZEIFRAME = false;

					var ANIMATION_STYLE = "topflip";
					var ANIMATION_START_HIDING_FROM_LEFT = true;
					var SHOW_DELAY = 0.1;
					var SHOW_DURATION = 0.6;
					var OPEN_DELAY = 0.7;
					var OPEN_DURATION = 0.7;
					var ZOOMIN_DURATION = 0.7;
					var ZOOMOUT_DURATION = 0.7;
					
					var LEVEL_SPACING_Y = 250;
					var LEVEL_SPACING_Z = 480;
					
					var HORIZONTAL_SPACING = 15;
					var VERTICAL_SPACING = 15;
				
					var ROW_WIDTH_MAX = 2000;
					
					</script>
				<script language="JavaScript" src="./files/jquery.address-1.4.min.js"></script>
				<script language="JavaScript" src="./files/fastclick.min.js" type="text/javascript"></script>
				<script language="JavaScript" src="./files/pf.min.js" type="text/javascript"></script>

	</head>

	<body>
	
		<div id="maincontainer">
			
			<div id="background3d" style="width: 1680px; height: 882px;"></div>
				
			<div id="webkitcontainer">
				
				<div id="group" >
				
					<div class="component" id="component_0">
						<img src="images/dio.png" />
					</div>
					
					<div class="component" id="component_0">
						<img src="images/dio.png" />
					</div>
					
					<div class="component" id="component_0">
						<img src="images/dio.png" />
					</div>
					
					<div class="component" id="component_0">
						<img src="images/dio.png" />
					</div>
					
					<div class="component" id="component_0">
						<img src="images/dio.png" />
					</div>
					
				</div>
				
				
			</div><!-- webkitcontainer -->
		
		</div><!-- maincontainer -->
			
	</body>

</html>




			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
JuninhoDrak
			  

	
		
	
			 0
	
		
	

		

		

			


	
		JuninhoDrak
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

Já fiz algo parecido, você vai precisar usar o jquery ou javascript para pegar a posição do mouse e usar o css que o nosso amigo CL4ng mandou, algo assim:


 


 


$("#Item_para_transicao").mousemove(function(event){
var mouseX_ = event.clientX;
var mouseY_ = event.clientY;
var fscale = (mouseX_/100)*1.3; //Isso é só para exemplificar, mas geralmente é uma regre de três que vai aqui.
$(this).css("transform","scale("+fscale+")");
});


 


Espero ter ajudado, posta ai se você conseguiu o que queria.



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
			
			



		

	


	
	

	

	







	

		
			
				Ir para a lista de tópicos
				Javascript
			
		
	

	




	

	

	




						


	

		
	


					

					

	

		
        


	

		
    
			
				
					
					
  • 
				
					
					
  • 
				
					
					
  • 
				
			
		

	


		
            
			

	

		
		

			

				
			

		

	



		
	


					

				

			

			
		

		
		


	×
	

		

			

			

				
			


			
		

	



		

	































	
















		
			
		
		
		
		







	




	







	

		

			

				
Informação importante

				
Ao usar o fórum, você concorda com nossos Termos e condições.

			

			

				  Aceito