Solved

how implement camera focus effect in jquery ?

Posted on 2010-11-23
6
565 Views
Last Modified: 2012-05-10
is any one have idea to how implement zoom effect like
this website :http://www.absacapital.com/Pages/AbsaCapital.aspx
0
Comment
Question by:imperlish
  • 3
6 Comments
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 34208073
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 34209118
http://slides.html5rocks.com/ is a great tutorial on how to achieve this using HTML5
0
 

Author Comment

by:imperlish
ID: 34225074
yes like this :http://mrdoob.com/118/Rotozoomer_HTML5
but not moving forward, i need to zoom on div and on event zoomout.
0
 
LVL 42

Accepted Solution

by:
Rob Jurd, EE MVE earned 500 total points
ID: 34503592
That page uses the svg tag and javascript, yoiu should be able to adapt it:

<div id="container"><svg width="1440" height="724"><defs><pattern id="texture" patternUnits="userSpaceOnUse" width="270" height="270" patternTransform="translate(563.0617437339367, 425.58112281380807) scale(0.3939994872616265) rotate( 284.4186557036039)"><image width="270" height="270" preserveAspectRatio="none" href="meanman.png"></image></pattern></defs><rect width="1440" height="724" style="fill:url(#texture)"></rect></svg></div>

Open in new window


<script type="text/javascript">

			var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight,
			SCREEN_WIDTH_HALF = SCREEN_WIDTH / 2, SCREEN_HEIGHT_HALF = SCREEN_HEIGHT / 2,
			
			texturePattern;

			init();
			setInterval(loop, 1000/60);

			function init()
			{
				var container, svg;
				
				container = document.getElementById('container');

				svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
				svg.setAttribute('width', SCREEN_WIDTH);
				svg.setAttribute('height', SCREEN_HEIGHT);

				var defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
				svg.appendChild(defs);

				texturePattern = document.createElementNS('http://www.w3.org/2000/svg', 'pattern');
				texturePattern.setAttribute('id', 'texture');
				texturePattern.setAttribute('patternUnits', 'userSpaceOnUse');
				texturePattern.setAttribute('width', 270);
				texturePattern.setAttribute('height', 270);
				defs.appendChild(texturePattern);

				var texture = document.createElementNS('http://www.w3.org/2000/svg', 'image');
				texture.setAttribute('width', 270);
				texture.setAttribute('height', 270);
				texture.setAttribute('preserveAspectRatio', 'none');	
				texture.setAttributeNS('http://www.w3.org/1999/xlink', 'href', 'meanman.png');
				texturePattern.appendChild(texture);
				
				var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
				rect.setAttribute('width', SCREEN_WIDTH);
				rect.setAttribute('height', SCREEN_HEIGHT);
				rect.setAttribute('style', 'fill:url(#texture)');
				svg.appendChild(rect);
				
				container.appendChild(svg);
			}

			function loop()
			{
				var timer, scale, tx, ty, rotate;
			
				timer = new Date().getTime();

				tx = SCREEN_WIDTH_HALF + Math.sin(timer * 0.0001) * 256;
				ty = SCREEN_HEIGHT_HALF + Math.cos(timer * 0.0002) * 256;
				scale = (Math.sin(timer * 0.0002) + 1.1) * 3;
				rotate = Math.cos(timer * 0.0001) * 360;			

				texturePattern.setAttribute('patternTransform', 'translate(' + tx + ', ' + ty + ') scale(' + scale + ') rotate( ' + rotate + ')');
			}
	
		</script>

Open in new window

0
 
LVL 31

Expert Comment

by:James Murrell
ID: 36434003
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

939 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now