Navigating around a large are website using mouse

JavaScript
1

hi there, ive tried google’ing for this for almost 4-5 days, but have lead nowhere (perhaps im searching wrong?!)

im trying to recreate an interface alike
http://www.fromtheroughmovie.com/#!/desk/dispatch/

i noticed the use of javascript throughout the site and positioning…

function positionElements() {

	$("#start-fall").css({"top":"5%"});
	$("#start-text").css({"left":width/2-280, "top":"42%"});
	$("#start-go").css({"left":width/2-175, "top":"72%"});
	$("#start-cast").css({"left":width/2-215, "top":"90%"});
	
}

function runPage() {
	
	$("#start-fall, #start-text, #start-go, #start-cast").fadeIn(300, function() {
		$("#start-text > a > h1").animate({"opacity":1, "margin-top":0}, 1000);
	});	
}

function runDiaporama() {
	
	$(document).oneTime(500, "Movement", function() {
		
		if(animatedVersion) {
			runMovement(0);
		}
		else {
			
			adjustBackground(0, false);
			adjustBackground(1, false);
			adjustBackground(2, false);
			adjustBackground(3, false);
			
			runStatic(0);
			alert("Please update your browser to get the best experience on this site.");
		}
		
	});

}

function adjustBackground(index) {

	var goTo = "top";
	
	switch(index) {
		case 1:
			goTo = "top";
		break;
		case 2:
			goTo = "right";
		break;
		case 3:
			goTo = "bottom";
		break;
		case 4:
			goTo = "left";
		break;
	}
	
	var FullscreenrOptions = {  width: 1920, height: 1080, bgID: '#start-image' + index, direction:goTo };
	// This will activate the full screen background!
	jQuery.fn.fullscreenr(FullscreenrOptions);
	
}

function runMovement(index) {
	
	var animationTime = 6000;
	
	adjustBackground(index+1, false);
	
	switch(index) {
		case 0:
			$("#background-pictures > img").eq(index).animate({"opacity":"1", "top":"+=30"}, animationTime, "linear", function() {
				afterMovement(index);
				
				runMovement(1);
				
			});
		break;
		case 1:
			$("#background-pictures > img").eq(index).animate({"opacity":"1", "left":"+=30"}, animationTime, "linear", function() {
				afterMovement(index);
				
				runMovement(2);
			});
		break;
		case 2:
			$("#background-pictures > img").eq(index).animate({"opacity":"1", "top":"-=30"}, animationTime, "linear", function() {
				afterMovement(index);
				
				runMovement(3);
			});
		break;
		case 3:
			$("#background-pictures > img").eq(index).animate({"opacity":"1", "left":"-=30"}, animationTime, "linear", function() {
				afterMovement(index);
				
				runMovement(0);
			});
		break;
	}
	
}

i can already see these are some of the functions leading to the page loading and the transitions on the page, the site also preloads the images, but i have no idea how it is following the mouse…

is there any tutorial or can anyone shed light on how to create this sort of interface? any help is much appreciated!! i’ve tried google, but perhaps someone can point me to the right direction

thanks so much!

2

Hi nike121. Welcome to SitePoint. :slight_smile:

Before you get too excited about that site, turn off JavaScript and see how it looks then (a black screen). Then view it on your smart phone … and you’ll probably get a black screen again. So, while I don’t want to dampen your enthusiasm, I think it’s worth pointing out some of the shortcomings of such functionality, which basically serves to make HTML unusable for a lot of people. :slight_smile:

3

Hi Ralph,

thank you for the feedback!! glad someone is finally replying - sitepoint seems to be the place to be :slight_smile:

regarding the site, great point out, however, on the iphone it seems to work fine, doenst javascript work without problems on tablets and smartphones (dont really consider blackberry one so…) android and iphone are really my major checks.

Aside from that is this a common javascript feature? any where i can get a tutorial? im having trouble knowing what its called…

thanks again!

4

in addition, i would likely not have a problem creating a mobile version that is more “simpler” if i have to…

5

Hm, I just got a black screen. JS does work on smart phones, but I guess this script would have to work differently in that environment, as I assume the page won’t respond to hovering like it does on the desktop.

6

There should be no dependency between the functionality you seek and whether or not the content needs JavaScript to render. Design the content so that it renders under all circumstances, and is navigable using normal browser controls. Then you can add a suitable script like perhaps CursorDivScroll / [URL=“http://scripterlative.com/files/cursorpagescroll.htm”]CursorPageScroll

7

Too bad we can’t upvote posts here :confused:

At its simplest, isn’t this just an issue of creating an enormous page, and then enabling scrolling when the mouse is near the edges of the window? It seems like it would degrade particularly gracefully. (Or… be enhanced particularly progressively?)

8

thanks guys! ill start building it with fallbacks incase its disabled - ill update here once i build the whole project

cheers!
Nickey

9

so guys i wanted to update everyone - i am now able to use the script mentioned above without any problems - i also integrated it into wordpress so the client can update via a backend, later i shall just add a redirect for mobile version which is a slideshow of projects as the whole site isn’t useful to be viewed on a mobile device :slight_smile: