SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Navigating around a large are website using mouse

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Hi nike121. Welcome to SitePoint.

    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.

  3. #3
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph,

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

    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. #4
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    in addition, i would likely not have a problem creating a mobile version that is more "simpler" if i have to...

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by nike121 View Post
    on the iphone it seems to work fine, doenst javascript work without problems on tablets and smartphones
    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. #6
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.
    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 / CursorPageScroll

  7. #7
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Calvert Tripesi View Post
    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.
    Too bad we can't upvote posts here :/

    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?)
    I'm the web overlord for Graphic Business Systems

  8. #8
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks guys! ill start building it with fallbacks incase its disabled - ill update here once i build the whole project

    cheers!
    Nickey

  9. #9
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    Quote Originally Posted by nike121 View Post
    thanks guys! ill start building it with fallbacks incase its disabled - ill update here once i build the whole project

    cheers!
    Nickey


Tags for this Thread

Bookmarks

Posting Permissions

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