Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 22
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    24
    Thanks
    3
    Thanked 0 Times in 0 Posts

    This is a very cool script, But I can't figure it out

    Please see the "watching eyes" next to the search box at the top of: http://www.burton.com

    I am looking to recreate a similar effect for a project, and I cannot figure out what script is running this. I can see there is some CSS and JS associated with this file but I cannot seem to figure out how it works. It seems to be done using x,y coordinates.

    Any help would be greatly appreciated.

    Thank you in advance,
    Jim

  • #2
    New Coder
    Join Date
    Mar 2010
    Location
    New Jersey USA
    Posts
    81
    Thanks
    13
    Thanked 4 Times in 4 Posts
    Did you try using Google?

    http://www.javascriptkit.com/script/script2/xeye.shtml

    EDIT********

    If you want to actually learn how it is done..

    http://arc.id.au/XEyes.html
    Last edited by connollyc4; 11-12-2010 at 03:38 PM.

  • Users who have thanked connollyc4 for this post:

    jlines (11-12-2010)

  • #3
    Regular Coder
    Join Date
    Sep 2010
    Location
    Virginia
    Posts
    112
    Thanks
    11
    Thanked 7 Times in 7 Posts
    rofl that's extremely easy to do.

  • #4
    New Coder
    Join Date
    Nov 2010
    Posts
    24
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks for your responses.
    At a quick glimpse it does look like the code from dynamic drive. but if you look at the source code from burton.com more closely it is not quite the same. Te final result is much different. The eyes are a rollover image that interacts with the mouse position on the burton website. The example referenced on dynamic drive was done differently.

    For example, put your mouse in between the two eyes on the burton example, they are not coss-eyed. I think this is a different script.

    Please correct me if I am wrong.

    Thanks,
    Jim
    Last edited by jlines; 11-12-2010 at 05:01 PM.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,441
    Thanks
    76
    Thanked 4,372 Times in 4,337 Posts
    Yes? So? I saw something like this done in 1998. It's not new or different. It's been done so much that most of us got tired of the cutesies. Granted, the Burton one uses multiple images. <shrug> So what?

    I wonder how long it's going to be before we see the clock-that-follows-the-mouse scripts start re-appearing?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    New Coder
    Join Date
    Nov 2010
    Posts
    24
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Any suggestions on how this can be achieved? Is it the same script as the one referenced by connolyc4? Do you happen to know of any resources that can help me understand how the burton example was done? Also this example only uses one image http://demandware.edgesuite.net/aadf...prite-eyes.gif
    Last edited by jlines; 11-12-2010 at 07:28 PM.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,441
    Thanks
    76
    Thanked 4,372 Times in 4,337 Posts
    The burton eyes are easy to do and easy to see how they are done. Here's the relevant code:
    Code:
    		followEyes : function() {
    			var eyes = jQuery('#globalSearch #eyes');
    			var top = eyes.offset().top;
    			var left = eyes.offset().left;
    			var height = eyes.height();
    			var width = eyes.width();
    			
    			jQuery('body,html').mousemove(function(e) {
    				var className = '';
    				if (e.pageY > top+height) {
    					className += 's';
    				} else if (e.pageY < top) {
    					className += 'n';
    				}
    
    				if (e.pageX > left+width) {
    					className += 'e';
    				} else if (e.pageX < left) {
    					className += 'w';
    				}
    				eyes.attr('class', className);
    			});
    		}
    So he simply has a whole series of CSS classes that he applies to the <div> containing the eyes. I would guess that the CSS simply specifies a background image for the <div>; I didn't go digging into all his CSS to find the classes.

    If it's not obvious, his class names are n,ne,e,se,s,sw,w,nw plus a blank name apparently means "in the center".
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    jlines (11-12-2010)

  • #8
    New Coder
    Join Date
    Nov 2010
    Posts
    24
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thats exactly what I was looking for. Thanks!

  • #9
    New Coder
    Join Date
    Nov 2010
    Posts
    24
    Thanks
    3
    Thanked 0 Times in 0 Posts
    For anyone else who way encounter this, the associated css from burton is:

    Code:
    #eyes {
    	position: absolute;
    	top: 11px;
    	left: 1px;
    	width: 52px;
    	height: 22px;
    	background: transparent url url(../img/sprite-eyes.gif) no-repeat -82px -96px;
    	border-right: 1px solid #cecece;
    }
    .short #eyes { 
    	top: 3px;
    	left: 0;
    	height: 18px;
    	padding-top: 4px;
    }
    /*
    #eyes:hover,
    #eyes.on { background: transparent url(..img/eyes-hover1.gif) no-repeat -10px -25px; }
    */
    #eyes.n { background-position: -82px -25px; }
    #eyes.ne { background-position: -154px -25px; }
    #eyes.e { background-position: -154px -96px; }
    #eyes.se { background-position: -154px -169px; }
    #eyes.s { background-position: -82px -169px; }
    #eyes.sw { background-position: -10px -169px; }
    #eyes.w { background-position: -10px -96px; }
    #eyes.nw { background-position: -10px -25px; }

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,441
    Thanks
    76
    Thanked 4,372 Times in 4,337 Posts
    FWIW, you could accomplish the same thing (a) without using jQuery and/or (b) changing the src or an <img> instead of using CSS classes.

    Finally, if it's not obvious, I'm 90% sure his images are animated GIFs, which is how he gets the blinking eyes.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,441
    Thanks
    76
    Thanked 4,372 Times in 4,337 Posts
    Ah...I was a bit slow. But here is the image. It's all one image! Cute.

    http://demandware.edgesuite.net/aadf...prite-eyes.gif

    He just changes the position of the image to bring the appropriate set of eyes into the visible part of the <div>.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    New Coder
    Join Date
    Nov 2010
    Posts
    24
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Yes, The image is an animated .gif although, I think there is a missing component here. Im not sure if it is CSS or JS. A sample page I created still wont function.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link href="css/eyes.css" rel="stylesheet" type="text/css" />
    <script src="js/eyes.js" type="text/javascript"></script>
    
    
    </head>
    
    <body>
    <div id="container">
    <div id="eyes"></div>
    </div> 
    
    
    
    </body>
    </html>

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,441
    Thanks
    76
    Thanked 4,372 Times in 4,337 Posts
    Yeah, it's called jQuery. His code *DEPENDS* upon jQuery.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,441
    Thanks
    76
    Thanked 4,372 Times in 4,337 Posts
    I might also point out that his image file is copyrighted. I would NOT suggest using it on a public site.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #15
    New Coder
    Join Date
    Nov 2010
    Posts
    24
    Thanks
    3
    Thanked 0 Times in 0 Posts
    thanks for the heads up. I definitely wouldn't use the image and the code will be overhauled for anything i would post publicly. I wounder what jQuery he is using for this. chances are, it has a general public license.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •