Custom ‘Team’ Page

  • Hi All,

    I’m currently setting up a new website for my employer, our prior site was Drupal, and the new one is obviously in WP. Now, I (and the the rest of the team) really like the ‘Team’ page on the old site (https://newmanthomson.com/team) what would be the easiest way (I’m happy to learn and do some DIY) to try and replicate that on the new site. The key thing is the portraits (sprites, I believe) moving with the mouse as they do on the newmanthomson.com site. Any tutorials, or plug-ins that would achieve a similar result would be great, or even a way of extracting the info out the old site and skinning it into the new site.

    Many thanks,

    James

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)

  • Hello James,

    It looks like the JavaScript that does this is in jQuery:

    Drupal.behaviors.followTeam = {
	attach: function() {
		old_x = 0;
		old_y = 0;
		teamSize = $('.team-grid li').length;
		imgSize = $('.team-grid li .views-field-field-team-sprite').width();
		dir = [];
		keys = new Array();
		keys['up'] = 6;
		keys['down'] = 8;
		keys['right'] = 0;
		keys['left'] = 2;
		keys['enter,space'] = 11;
		keys['a'] = 10;
		keys['s'] = 3;
		keys['d'] = 4;
		keys['f'] = 5;
		keys['g'] = 6;
		keys['h'] = 7;
		keys['j'] = 8;
		keys['k'] = 9;
		keys['l'] = 2;
		keys[';'] = 2;
		img_base = '';
		$(document).ready(function() {
			resetDirs = function() {
			//dir = [0, -imgSize*8, -imgSize*9, -imgSize*10, -imgSize*6, -imgSize*5, -imgSize*4, -imgSize*3, -imgSize*7, -imgSize*8, 0, -imgSize*1];
			// dir = [-imgSize*1, -imgSize*7, -imgSize*8, -imgSize*9, -imgSize*5, -imgSize*4, -imgSize*3, -imgSize*2, -imgSize*6, -imgSize*7, -imgSize*1, 0]; 
			dir = [0, -imgSize*6, -imgSize*7, -imgSize*8, -imgSize*4, -imgSize*3, -imgSize*2, -imgSize*1, -imgSize*5, -imgSize*6, 0]; 
			}
			resetDirs();
			for (key in keys)
			{
			eval("$(window).jkey('" + key + "', true, function(){changeAll(" + keys[key] + ");})");
			}
			changeOne = function(element, direction) {   
				element.css('background-position', dir[direction] + 'px 0px');
			}
			changeAll = function(direction) {
				$('.eye').each(function() {
					changeOne($(this), direction);
				});
				return false
			}
			$('.eye').mouseover(function() {
				changeOne($(this), 10);
			});
			setupMouse = function() {
			$(document).mousemove(function(e) {
			if ($('body').hasClass('section-team')) {
				m_x = e.pageX;
				m_y = e.pageY;
				r_x = m_x - old_x;
				r_y = m_y - old_y;
				dist = Math.sqrt(r_x * r_x + r_y * r_y);
				if (dist > 15) {
					old_x = m_x;
					old_y = m_y;
					$('.eye').each(function() {
						redraw($(this), m_x, m_y);
					});
				}
			}
			});
			};
			redraw = function(element, mx, my) {
				pos = element.offset();
				half_width = element.width() / 2;
				half_height = element.height() / 2;
				i_x = pos.left + (half_width);
				i_y = pos.top + (half_height)
				rel_x = mx - i_x;
				rel_y = my - i_y;
				dist = Math.sqrt(rel_x * rel_x + rel_y * rel_y);
				if (dist > half_width || dist > half_height) {
					angle = Math.acos( - rel_y / dist) * 57.3248;
					sign = (rel_x > 0) ? 1: -1;
					angle = angle * sign;
					p = Math.round(angle / 45) + 5;
					changeOne(element, p);
				}
				else
				{
					changeOne(element, 10);
				}
			}
			setupMouse();
			$('.eye').click(function() {
				changeAll(10);
				changeOne($(this).addClass('active'));
			});
		});
	} 
};
})(jQuery);;

    This seems to watch for mouse movements and then shift the background position of the sprite of the team members like:

    https://newmanthomson.com/sites/newmanthomson.com/files/team/philr-sprite.png

    I think it shouldn’t be too hard to move this JavaScript and alter the images as needed. I hope this helps.

    Scott

Viewing 1 replies (of 1 total)
  • The topic ‘Custom ‘Team’ Page’ is closed to new replies.

Tags