Awesome Scrolling Navigation


Description: 軽量なソースで全画面を使用するナビゲーションを実装します。クロスブラウザ且つ、画像を使った視差効果も出せる。プレゼンやスライドにも良さそうですね。
Sample: dmeo
Tutorial: How to Create an Awesome Scrolling Navigation using jQuery
License: -

Note

var theWidth;
var theHeight;
var currentContent = 0;

$(window).resize(function () {
    sizeContent();
});

$(window).ready(function () {
    sizeContent();
});

function sizeContent() {
    theWidth = $(window).width();
    theHeight = $(window).height();
    sizeContentItems();
    setLeftOnContentItems();
    sizeContentWrapper(theWidth, theHeight);
    moveContent(currentContent, theWidth);
    changeSelected(currentContent);
}

function sizeContentItems() {
    $(".contentItem").css('width', theWidth);
    $(".contentItem").css('height', theHeight);
}

function setLeftOnContentItems() {
    var contentCount = 0;
    $(".contentItem").each(function (i) {
        contentCount += i;
        $(this).css('left', i * theWidth);
    });
}

function sizeContentWrapper(width, height) {
    $("#contentWrapper").css('width', width - 80);
    $("#contentWrapper").css('height', height);
}

function moveContent(i, width) {
    $("#contentWrapper").scrollLeft(i * width);
}

function changeSelected(i) {
    $(".selected").removeClass("selected");
    $("li:eq(" + i + ") a").addClass("selected");
}

function scrollContentNext() {
    scrollContent(currentContent + 1);
}

function scrollContent(i) {
    i = checkMax(i);
    scrollLogo(i);
    scrollTriangle(i);
    changeSelected(i)
    currentContent = i;
    $("#contentWrapper").animate({ scrollLeft: i * theWidth }, 1000);
}

function scrollLogo(i) {
    var left = (i * -200) + 20;
    $("#logo").animate({ left: left }, 1000);
}

function scrollTriangle(i) {
    var left = (i * -300);
    $("#triangle").animate({ left: left }, 1000);
}

function checkMax(i) {
    var maxItems = $("li").length;
    if (i >= maxItems) {
        return 0;
    }
    return i;
}

2kb以下で実装できます。

Related snippet :

  • Description: 画像にマウスオーバーすると拡大するコード。簡単に実装できて様々なところに応用できそうですね。クロスブラウザで動作してくれます。メニューにも使えるかな ...
  • Description: カメラのシャッターのようなエフェクトで画像を切り替えるプラグイン。HTML5のcanvasを使っています。凄いですねこれwもちろん、対応ブラウザは限 ...
  • Description: メニュー項目にマウスを合わせるとラインがアニメーションしながら付いてきます。ラインはテキストの長さに応じて自動で調節されますのでテキストメニューに色 ...
  • Description: マウスオーバーで隠れていた子リストが上から表示されます。消すには×を押す必要があります。クロスブラウザで動作してくれるので、少し変わったUIにしたい ...
  • Description: マウスをストーキングするツールチップです。手軽に実装出来る汎用性と、マウスについてくるユニークさが特徴。背景に画像を使うことも出来るのでユニークな表 ...
  • Description: Macライクなドックメニューを実装するプラグインです。爽快なアニメーションがかわいいですね。アイコンにはキャプションも表示してくれます。クロスブラウ ...
  • Description: シンプルなツールチップ。です。超軽量で、手軽に実装可能ですよ。アンカータグ内のtitleをツールチップに実装します。クロスブラウザで動作してくれるの ...