Skip to content

Instantly share code, notes, and snippets.

@tyage

tyage/gist:5955919

Created July 9, 2013 09:16
Show Gist options
  • Save tyage/5955919 to your computer and use it in GitHub Desktop.
Save tyage/5955919 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.js
$(function () {
$('footer').css('display', 'none');
$('#main').fadeTo(0, 0);
$('.menu_underline').hover(function () {
$(this).stop().animate({
'backgroundPosition': '0px 0px'
}, 150)
}, function () {
$(this).stop().animate({
'backgroundPosition': '-230px 0px'
}, 150)
});
var windowHeight = $(window).height();
var documentHeight = $(document).height();
var contentWidth = 1024;
var nepLastPos = -500;
var nowalLastPos = 800;
var blanLastPos = 702;
var belLastPos = -230;
var ifLastPos = 550;
var gameLastPos = 400;
var nepgearLastPos = 38;
var uniLastPos = 430;
var ramromLastPos = 1000;
var histoireLastPos = 132;
var mgameLastPos = 930;
var charaNepMoveYVal = 520;
var charaNowalMoveYVal = 550;
var charaBlanMoveYVal = 640;
var charaBelMoveYVal = 500;
var charaIfMoveYVal = 700;
var charaGameMoveYVal = 900;
var charaNepgearMoveYVal = 500;
var charaUniMoveYVal = 370;
var charaRamromMoveYVal = 600;
var charaHistoireMoveYVal = 270;
var charaMGameMoveYVal = 300;
var surainu1MoveYVal = 5000;
var surainu2MoveYVal = 6000;
var surainu3MoveYVal = 1000;
var cloud1MoveYVal = 10000;
var cloud2MoveYVal = 9000;
var cloud3MoveYVal = 8000;
var cloud4MoveYVal = 11000;
var cloud5MoveYVal = 10000;
var surainuPos = [
[-30, 860, 780],
[-140, 950, 800],
[-20, 1100, 800],
[-120, 1300, 750],
[-70, 1500, 800],
[-90, 1700, 800],
[-160, 1900, 900],
[-100, 870, 920],
[1300, 860, 850],
[1190, 1020, 900],
[1260, 1290, 800],
[1400, 1470, 800],
[1400, 1300, 800],
[1300, 1550, 750],
[1320, 1070, 800],
[1420, 1170, 850],
[1210, 1410, 800],
[1130, 1250, 900],
[1350, 1640, 800],
[-30, 1300, 850]
];
var menuLeft = parseInt($('#menu').css('left'));
var charaNepLeft = parseInt($('#chara-nep').css('left'));
var charaNepTop = parseInt($('#chara-nep').css('top'));
var charaNowalLeft = parseInt($('#chara-nowal').css('left'));
var charaNowalTop = parseInt($('#chara-nowal').css('top'));
var charaBlanLeft = parseInt($('#chara-blan').css('left'));
var charaBlanTop = parseInt($('#chara-blan').css('top'));
var charaBelLeft = parseInt($('#chara-bel').css('left'));
var charaBelTop = parseInt($('#chara-bel').css('top'));
var charaIfLeft = parseInt($('#chara-if').css('left'));
var charaIfTop = parseInt($('#chara-if').css('top'));
var charaGameLeft = parseInt($('#chara-game').css('left'));
var charaGameTop = parseInt($('#chara-game').css('top'));
var charaNepgearLeft = parseInt($('#chara-nepgear').css('left'));
var charaNepgearTop = parseInt($('#chara-nepgear').css('top'));
var charaUniLeft = parseInt($('#chara-uni').css('left'));
var charaUniTop = parseInt($('#chara-uni').css('top'));
var charaRamromLeft = parseInt($('#chara-ramrom').css('left'));
var charaRamromTop = parseInt($('#chara-ramrom').css('top'));
var charaHistoireLeft = parseInt($('#chara-histoire').css('left'));
var charaHistoireTop = parseInt($('#chara-histoire').css('top'));
var charaMGameLeft = parseInt($('#chara-mgame').css('left'));
var charaMGameTop = parseInt($('#chara-mgame').css('top'));
var surainu1Left = parseInt($('#surainu_big1').css('left'));
var surainu1Top = parseInt($('#surainu_big1').css('top'));
var surainu2Left = parseInt($('#surainu_big2').css('left'));
var surainu2Top = parseInt($('#surainu_big2').css('top'));
var surainu3Left = parseInt($('#surainu_big3').css('left'));
var surainu3Top = parseInt($('#surainu_big3').css('top'));
var cloud1Left = parseInt($('#cloud1').css('left'));
var cloud1Top = parseInt($('#cloud1').css('top'));
var cloud2Left = parseInt($('#cloud2').css('left'));
var cloud2Top = parseInt($('#cloud2').css('top'));
var cloud3Left = parseInt($('#cloud3').css('left'));
var cloud3Top = parseInt($('#cloud3').css('top'));
var cloud4Left = parseInt($('#cloud4').css('left'));
var cloud4Top = parseInt($('#cloud4').css('top'));
var cloud5Left = parseInt($('#cloud5').css('left'));
var cloud5Top = parseInt($('#cloud5').css('top'));
var topOnAirTextLeft = parseInt($('#top_onairtext').css('left'));
var topInformationLeft = parseInt($('#top_information').css('left'));
var topNeplogoLeft = parseInt($('#top_neplogo').css('left'));
var topStartTextLeft = parseInt($('#top_starttext').css('left'));
var topArrowLeft = parseInt($('#top_arrow').css('left'));
var newsTitleLeft = parseInt($('#news_title').css('left'));
var newsTitleTop = parseInt($('#news_title').css('top'));
var newsMoreTitleLeft = parseInt($('#news_titlemore').css('left'));
var newsMoreTitleTop = parseInt($('#news_titlemore').css('top'));
var introTitleLeft = parseInt($('#intro_title').css('left'));
var introTitleTop = parseInt($('#intro_title').css('top'));
var introMoreTitleLeft = parseInt($('#intro_titlemore').css('left'));
var introMoreTitleTop = parseInt($('#intro_titlemore').css('top'));
var storyTitleLeft = parseInt($('#story_title').css('left'));
var storyTitleTop = parseInt($('#story_title').css('top'));
var storyMoreTitleLeft = parseInt($('#story_titlemore').css('left'));
var storyMoreTitleTop = parseInt($('#story_titlemore').css('top'));
var charaTitleLeft = parseInt($('#chara_title').css('left'));
var charaTitleTop = parseInt($('#chara_title').css('top'));
var charaContentsLeft = parseInt($('#chara_contents').css('left'));
var charaBkLeft = parseInt($('#chara_bk').css('left'));
var staffTitleLeft = parseInt($('#staff_title').css('left'));
var staffTitleTop = parseInt($('#staff_title').css('top'));
var staffMoreTitleLeft = parseInt($('#staff_titlemore').css('left'));
var staffMoreTitleTop = parseInt($('#staff_titlemore').css('top'));
var staffContentsLeft = parseInt($('#staff_contents').css('left'));
var staffBkLeft = parseInt($('#staff_bk').css('left'));
var specialTitleLeft = parseInt($('#special_title').css('left'));
var specialTitleTop = parseInt($('#special_title').css('top'));
var specialMoreTitleLeft = parseInt($('#special_titlemore').css('left'));
var specialMoreTitleTop = parseInt($('#special_titlemore').css('top'));
var productsTitleLeft = parseInt($('#products_title').css('left'));
var productsTitleTop = parseInt($('#products_title').css('top'));
var productsMoreTitleLeft = parseInt($('#products_titlemore').css('left'));
var productsMoreTitleTop = parseInt($('#products_titlemore').css('top'));
var linkTitleLeft = parseInt($('#link_title').css('left'));
var linkTitleTop = parseInt($('#link_title').css('top'));
var linkContentsLeft = parseInt($('#link_contents').css('left'));
var linkBkLeft = parseInt($('#link_bk').css('left'));
var titleAnimStartLeft = -1000;
var titleAnimEndLeft = 355;
var newsmoreAnimStartLeft = -551;
var newsmoreAnimEndLeft = 802;
var intromoreAnimStartLeft = -551;
var intromoreAnimEndLeft = 908;
var storymoreAnimStartLeft = -551;
var storymoreAnimEndLeft = 878;
var staffmoreAnimStartLeft = -551;
var staffmoreAnimEndLeft = 848;
var specialmoreAnimStartLeft = -551;
var specialmoreAnimEndLeft = 767;
var productsmoreAnimStartLeft = -551;
var productsmoreAnimEndLeft = 812;
var aTitleKey = ['news_title', 'news_titlemore', 'intro_title', 'intro_titlemore', 'story_title', 'story_titlemore', 'chara_title', 'staff_title', 'staff_titlemore', 'special_title', 'special_titlemore', 'products_title', 'products_titlemore', 'link_title'];
var aTitleImgaeHeight = {
news_title: 224,
news_titlemore: 84,
intro_title: 262,
intro_titlemore: 84,
story_title: 188,
story_titlemore: 84,
chara_title: 207,
staff_title: 260,
staff_titlemore: 84,
special_title: 262,
special_titlemore: 84,
products_title: 262,
products_titlemore: 84,
link_title: 185
};
var aTitleImgaeLeft = {
news_title: newsTitleLeft,
news_titlemore: newsMoreTitleLeft,
intro_title: introTitleLeft,
intro_titlemore: introMoreTitleLeft,
story_title: storyTitleLeft,
story_titlemore: storyMoreTitleLeft,
chara_title: charaTitleLeft,
staff_title: staffTitleLeft,
staff_titlemore: staffMoreTitleLeft,
special_title: specialTitleLeft,
special_titlemore: specialMoreTitleLeft,
products_title: productsTitleLeft,
products_titlemore: productsMoreTitleLeft,
link_title: linkTitleLeft
};
var aTitleImgaeTop = {
news_title: newsTitleTop,
news_titlemore: newsMoreTitleTop,
intro_title: introTitleTop,
intro_titlemore: introMoreTitleTop,
story_title: storyTitleTop,
story_titlemore: storyMoreTitleTop,
chara_title: charaTitleTop,
staff_title: staffTitleTop,
staff_titlemore: staffMoreTitleTop,
special_title: specialTitleTop,
special_titlemore: specialMoreTitleTop,
products_title: productsTitleTop,
products_titlemore: productsMoreTitleTop,
link_title: linkTitleTop
};
var aTitleAnimStartLeft = {
news_title: titleAnimStartLeft,
news_titlemore: newsmoreAnimStartLeft,
intro_title: titleAnimStartLeft,
intro_titlemore: intromoreAnimStartLeft,
story_title: titleAnimStartLeft,
story_titlemore: storymoreAnimStartLeft,
chara_title: titleAnimStartLeft,
staff_title: titleAnimStartLeft,
staff_titlemore: staffmoreAnimStartLeft,
special_title: titleAnimStartLeft,
special_titlemore: specialmoreAnimStartLeft,
products_title: titleAnimStartLeft,
products_titlemore: productsmoreAnimStartLeft,
link_title: titleAnimStartLeft
};
var aTitleAnimEndLeft = {
news_title: titleAnimEndLeft,
news_titlemore: newsmoreAnimEndLeft,
intro_title: titleAnimEndLeft,
intro_titlemore: intromoreAnimEndLeft,
story_title: titleAnimEndLeft,
story_titlemore: storymoreAnimEndLeft,
chara_title: titleAnimEndLeft,
staff_title: titleAnimEndLeft,
staff_titlemore: staffmoreAnimEndLeft,
special_title: titleAnimEndLeft,
special_titlemore: specialmoreAnimEndLeft,
products_title: titleAnimEndLeft,
products_titlemore: productsmoreAnimEndLeft,
link_title: titleAnimEndLeft
};
var aIsTitle = {
news_title: false,
news_titlemore: false,
intro_title: false,
intro_titlemore: false,
story_title: false,
story_titlemore: false,
chara_title: false,
staff_title: false,
staff_titlemore: false,
special_title: false,
special_titlemore: false,
products_title: false,
products_titlemore: false,
link_title: false
};
var aTitleTween = {
news_title: null,
news_titlemore: null,
intro_title: null,
intro_titlemore: null,
story_title: null,
story_titlemore: null,
chara_title: null,
staff_title: null,
staff_titlemore: null,
special_title: null,
special_titlemore: null,
products_title: null,
products_titlemore: null,
link_title: null
};
var scrollTween;
var scrollAnimFlag = false;
var animID;
var moveX;
var areaID = 0;
var menuNewsScrollY = aTitleImgaeTop['news_title'] + 100 - windowHeight / 2;
var menuIntroScrollY = aTitleImgaeTop['intro_title'] + 100 - windowHeight / 2;
var menuStoryScrollY = aTitleImgaeTop['story_title'] + 100 - windowHeight / 2;
var menuCharaScrollY = aTitleImgaeTop['chara_title'] + 400 - windowHeight / 2;
var menuStaffScrollY = aTitleImgaeTop['staff_title'] + 350 - windowHeight / 2;
var menuSpecialScrollY = aTitleImgaeTop['special_title'] + 150 - windowHeight / 2;
var menuProductsScrollY = aTitleImgaeTop['products_title'] + 150 - windowHeight / 2;
var menuLinkScrollY = aTitleImgaeTop['link_title'] + 350 - windowHeight / 2;
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame']
}
if (!window.requestAnimationFrame) window.requestAnimationFrame = function (callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function () {
callback(currTime + timeToCall)
}, timeToCall);
lastTime = currTime + timeToCall;
return id
};
if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function (id) {
clearTimeout(id)
};
function animationLoop() {
animID = window.requestAnimationFrame(animationLoop);
TWEEN.update()
}
function positionAdjust(windowWidth) {
moveX = (windowWidth - contentWidth) / 4;
if (moveX < 0) {
moveX = 0
}
$('#menu').css('left', moveX + menuLeft);
$('#chara-nep').css('left', moveX + charaNepLeft);
$('#chara-nowal').css('left', moveX + charaNowalLeft);
$('#chara-blan').css('left', moveX + charaBlanLeft);
$('#chara-bel').css('left', moveX + charaBelLeft);
$('#chara-if').css('left', moveX + charaIfLeft);
$('#chara-game').css('left', moveX + charaGameLeft);
$('#chara-nepgear').css('left', moveX + charaNepgearLeft);
$('#chara-uni').css('left', moveX + charaUniLeft);
$('#chara-ramrom').css('left', moveX + charaRamromLeft);
$('#chara-histoire').css('left', moveX + charaHistoireLeft);
$('#chara-mgame').css('left', moveX + charaMGameLeft);
$('#surainu_big1').css('left', moveX + surainu1Left);
$('#surainu_big2').css('left', moveX + surainu2Left);
$('#surainu_big3').css('left', moveX + surainu3Left);
$('#cloud1').css('left', moveX + cloud1Left);
$('#cloud2').css('left', moveX + cloud2Left);
$('#cloud3').css('left', moveX + cloud3Left);
$('#cloud4').css('left', moveX + cloud4Left);
$('#cloud5').css('left', moveX + cloud5Left);
$('#top_onairtext').css('left', moveX + topOnAirTextLeft);
$('#top_information').css('left', moveX + topInformationLeft);
$('#top_neplogo').css('left', moveX + topNeplogoLeft);
$('#top_starttext').css('left', moveX + topStartTextLeft);
$('#top_arrow').css('left', moveX + topArrowLeft);
$('#news_title').css('left', moveX + aTitleImgaeLeft['news_title']);
$('#news_titlemore').css('left', moveX + aTitleImgaeLeft['news_titlemore']);
$('#intro_title').css('left', moveX + aTitleImgaeLeft['intro_title']);
$('#intro_titlemore').css('left', moveX + aTitleImgaeLeft['intro_titlemore']);
$('#story_title').css('left', moveX + aTitleImgaeLeft['story_title']);
$('#story_titlemore').css('left', moveX + aTitleImgaeLeft['story_titlemore']);
$('#chara_title').css('left', moveX + aTitleImgaeLeft['chara_title']);
$('#chara_contents').css('left', moveX + charaContentsLeft);
$('#chara_bk').css('left', moveX + charaBkLeft);
$('#staff_title').css('left', moveX + aTitleImgaeLeft['staff_title']);
$('#staff_titlemore').css('left', moveX + aTitleImgaeLeft['staff_titlemore']);
$('#staff_contents').css('left', moveX + staffContentsLeft);
$('#staff_bk').css('left', moveX + staffBkLeft);
$('#special_title').css('left', moveX + aTitleImgaeLeft['special_title']);
$('#special_titlemore').css('left', moveX + aTitleImgaeLeft['special_titlemore']);
$('#products_title').css('left', moveX + aTitleImgaeLeft['products_title']);
$('#products_titlemore').css('left', moveX + aTitleImgaeLeft['products_titlemore']);
$('#link_title').css('left', moveX + aTitleImgaeLeft['link_title']);
$('#link_contents').css('left', moveX + linkContentsLeft);
$('#link_bk').css('left', moveX + linkBkLeft);
for (var i = 0; i < surainuPos.length; i++) {
$('#surainu' + i).css('left', moveX + surainuPos[i][0])
}
}
function backImgScroll() {
var backImgHeight = $('#sora').height();
windowHeight = $(window).height();
documentHeight = $(document).height();
var scroolPosY = $(document).scrollTop();
var movePosY = ~~ (scroolPosY / (documentHeight - windowHeight) * (backImgHeight - windowHeight));
$('#sora').css('top', -movePosY)
}
function charaScroll() {
windowHeight = $(window).height();
documentHeight = $(document).height();
var scroolPosY = $(document).scrollTop();
var movePosY = scroolPosY / (documentHeight - windowHeight);
var movePosNepY = ~~ (movePosY * charaNepMoveYVal);
var movePosNowalY = ~~ (movePosY * charaNowalMoveYVal);
var movePosBlanY = ~~ (movePosY * charaBlanMoveYVal);
var movePosBelY = ~~ (movePosY * charaBelMoveYVal);
var movePosIfY = ~~ (movePosY * charaIfMoveYVal);
var movePosGameY = ~~ (movePosY * charaGameMoveYVal);
var movePosNepgearY = ~~ (movePosY * charaNepgearMoveYVal);
var movePosUniY = ~~ (movePosY * charaUniMoveYVal);
var movePosRamromY = ~~ (movePosY * charaRamromMoveYVal);
var movePosHistoireY = ~~ (movePosY * charaHistoireMoveYVal);
var movePosMGameY = ~~ (movePosY * charaMGameMoveYVal);
$('#chara-nep').css('top', -movePosNepY + charaNepTop);
$('#chara-nowal').css('top', -movePosNowalY + charaNowalTop);
$('#chara-blan').css('top', -movePosBlanY + charaBlanTop);
$('#chara-bel').css('top', -movePosBelY + charaBelTop);
$('#chara-if').css('top', -movePosIfY + charaIfTop);
$('#chara-game').css('top', -movePosGameY + charaGameTop);
$('#chara-nepgear').css('top', -movePosNepgearY + charaNepgearTop);
$('#chara-uni').css('top', -movePosUniY + charaUniTop);
$('#chara-ramrom').css('top', -movePosRamromY + charaRamromTop);
$('#chara-histoire').css('top', -movePosHistoireY + charaHistoireTop);
$('#chara-mgame').css('top', -movePosMGameY + charaMGameTop);
var movePosSurainu1Y = ~~ (movePosY * surainu1MoveYVal);
var movePosSurainu2Y = ~~ (movePosY * surainu2MoveYVal);
var movePosSurainu3Y = ~~ (movePosY * surainu3MoveYVal);
$('#surainu_big1').css('top', -movePosSurainu1Y + surainu1Top);
$('#surainu_big2').css('top', -movePosSurainu2Y + surainu2Top);
$('#surainu_big3').css('top', -movePosSurainu3Y + surainu3Top);
var movePosCloud1Y = ~~ (movePosY * cloud1MoveYVal);
var movePosCloud2Y = ~~ (movePosY * cloud2MoveYVal);
var movePosCloud3Y = ~~ (movePosY * cloud3MoveYVal);
var movePosCloud4Y = ~~ (movePosY * cloud4MoveYVal);
var movePosCloud5Y = ~~ (movePosY * cloud5MoveYVal);
$('#cloud1').css('top', -movePosCloud1Y + cloud1Top);
$('#cloud2').css('top', -movePosCloud2Y + cloud2Top);
$('#cloud3').css('top', -movePosCloud3Y + cloud3Top);
$('#cloud4').css('top', -movePosCloud4Y + cloud4Top);
$('#cloud5').css('top', -movePosCloud5Y + cloud5Top);
for (var i = 0; i < surainuPos.length; i++) {
var movePosSurainuY = ~~ (movePosY * surainuPos[i][2]);
$('#surainu' + i).css('top', -movePosSurainuY + surainuPos[i][1])
}
}
function allTitleAnim() {
for (var i = 0; i < aTitleKey.length; i++) {
titleAnim(aTitleKey[i])
}
}
function titleAnim(key) {
var scroolPosY = $(document).scrollTop();
windowHeight = $(window).height();
var titleImgaeHeight = aTitleImgaeHeight[key];
var titleImgaeTop = aTitleImgaeTop[key];
var titleTweenScrollY = titleImgaeTop - windowHeight / 2;
if (key == 'news_titlemore') {
titleTweenScrollY = aTitleImgaeTop['news_title'] - windowHeight / 2
} else if (key == 'intro_titlemore') {
titleTweenScrollY = aTitleImgaeTop['intro_title'] - windowHeight / 2
} else if (key == 'story_titlemore') {
titleTweenScrollY = aTitleImgaeTop['story_title'] - windowHeight / 2
} else if (key == 'staff_titlemore') {
titleTweenScrollY = aTitleImgaeTop['staff_title'] - windowHeight / 2
} else if (key == 'special_titlemore') {
titleTweenScrollY = aTitleImgaeTop['special_title'] - windowHeight / 2
} else if (key == 'products_titlemore') {
titleTweenScrollY = aTitleImgaeTop['products_title'] - windowHeight / 2
}
if ((aIsTitle[key] == false) && scroolPosY >= titleTweenScrollY) {
aIsTitle[key] = true;
var titleHeight = $('#' + key).height();
var titleWidth = $('#' + key).width();
$('#' + key).css('top', (titleImgaeTop + titleImgaeHeight / 2) + 'px');
$('#' + key).css('height', titleHeight + 'px');
$('#' + key).css('width', titleWidth + 'px');
$('#' + key).css('display', 'block');
aTitleTween[key] = new TWEEN.Tween({
height: titleHeight,
top: (titleImgaeTop + titleImgaeHeight / 2),
left: aTitleAnimStartLeft[key],
alpha: 0
}).to({
height: titleImgaeHeight,
top: titleImgaeTop,
left: aTitleAnimEndLeft[key],
alpha: 1
}, 300).easing(TWEEN.Easing.Exponential.Out).onUpdate(function () {
$('#' + key).css('height', this.height + 'px');
$('#' + key).css('top', this.top + 'px');
$('#' + key).css('left', this.left + moveX + 'px');
$('#' + key).css('opacity', this.alpha);
aTitleImgaeLeft[key] = this.left
});
aTitleTween[key].start()
} else if ((aIsTitle[key] == true) && scroolPosY < titleTweenScrollY) {
aIsTitle[key] = false;
var titleHeight = $('#' + key).height();
var titleWidth = $('#' + key).width();
$('#' + key).css('top', titleImgaeTop + 'px');
$('#' + key).css('height', titleHeight + 'px');
$('#' + key).css('width', titleWidth + 'px');
aTitleTween[key] = new TWEEN.Tween({
height: titleHeight,
top: titleImgaeTop,
left: aTitleAnimEndLeft[key],
alpha: 1
}).to({
height: 1,
top: (titleImgaeTop + titleImgaeHeight / 2),
left: aTitleAnimStartLeft[key],
alpha: 0
}, 300).easing(TWEEN.Easing.Exponential.In).onUpdate(function () {
$('#' + key).css('height', this.height + 'px');
$('#' + key).css('top', this.top + 'px');
$('#' + key).css('left', this.left + moveX + 'px');
$('#' + key).css('opacity', this.alpha);
aTitleImgaeLeft[key] = this.left
}).onComplete(function () {
$('#' + key).css('display', 'none')
});
aTitleTween[key].start()
}
}
function surainuRotate() {
for (var i = 0; i < surainuPos.length; i++) {
$('#surainu' + i).rotate(Math.round(Math.random() * 360))
}
}
function scrollDraw() {
windowHeight = $(window).height();
documentHeight = $(document).height();
var scroolPosY = $(document).scrollTop();
if (scroolPosY <= 0) {
$('#btn_scrollup_img').css('display', 'none')
} else {
$('#btn_scrollup_img').css('display', 'block')
} if (scroolPosY >= documentHeight - windowHeight) {
$('#btn_scrolldown_img').css('display', 'none')
} else {
$('#btn_scrolldown_img').css('display', 'block')
}
}
function topArrowAnim() {
var arrowTween = new TWEEN.Tween({
alpha: 1
}).to({
alpha: 0
}, 1000).easing(TWEEN.Easing.Linear.None).onUpdate(function () {
$('#top_arrow').css("opacity", this.alpha)
});
var arrowTweenBack = new TWEEN.Tween({
alpha: 0
}).to({
alpha: 1
}, 1000).easing(TWEEN.Easing.Linear.None).onUpdate(function () {
$('#top_arrow').css("opacity", this.alpha)
}).onComplete(function () {
topArrowAnim()
});
arrowTween.chain(arrowTweenBack);
arrowTween.start()
}
function changeAreaID(scroolPosY) {
var hosei = 300;
if (scroolPosY < menuNewsScrollY - hosei) {
areaID = 0
} else if ((scroolPosY >= menuNewsScrollY - hosei) && (scroolPosY < menuIntroScrollY - hosei)) {
areaID = 1
} else if ((scroolPosY >= menuIntroScrollY - hosei) && (scroolPosY < menuStoryScrollY - hosei)) {
areaID = 2
} else if ((scroolPosY >= menuStoryScrollY - hosei) && (scroolPosY < menuCharaScrollY - hosei)) {
areaID = 3
} else if ((scroolPosY >= menuCharaScrollY - hosei) && (scroolPosY < menuStaffScrollY - hosei)) {
areaID = 4
} else if ((scroolPosY >= menuStaffScrollY - hosei) && (scroolPosY < menuSpecialScrollY - hosei)) {
areaID = 5
} else if ((scroolPosY >= menuSpecialScrollY - hosei) && (scroolPosY < menuProductsScrollY - hosei)) {
areaID = 6
} else if ((scroolPosY >= menuProductsScrollY - hosei) && (scroolPosY < menuLinkScrollY - hosei)) {
areaID = 7
} else if ((scroolPosY >= menuLinkScrollY - hosei)) {
areaID = 8
}
}
$(window).scroll(function () {
backImgScroll();
charaScroll();
allTitleAnim();
scrollDraw()
});
$(window).resize(function () {
windowHeight = $(window).height();
menuNewsScrollY = aTitleImgaeTop['news_title'] + 100 - windowHeight / 2;
menuIntroScrollY = aTitleImgaeTop['intro_title'] + 100 - windowHeight / 2;
menuStoryScrollY = aTitleImgaeTop['story_title'] + 100 - windowHeight / 2;
menuCharaScrollY = aTitleImgaeTop['chara_title'] + 400 - windowHeight / 2;
menuStaffScrollY = aTitleImgaeTop['staff_title'] + 350 - windowHeight / 2;
menuSpecialScrollY = aTitleImgaeTop['special_title'] + 150 - windowHeight / 2;
menuProductsScrollY = aTitleImgaeTop['products_title'] + 150 - windowHeight / 2;
menuLinkScrollY = aTitleImgaeTop['link_title'] + 350 - windowHeight / 2;
var windowWidth = $(window).width();
$('#main').css('min-width', windowWidth + 'px');
positionAdjust(windowWidth);
backImgScroll();
charaScroll();
allTitleAnim();
scrollDraw()
});
$('#udArea').click(function () {
if ($('#udAreaDiv').css('display') == 'none') {
$('#udAreaDiv').css('display', 'block')
} else {
$('#udAreaDiv').css('display', 'none')
}
});
$('#twArea').click(function () {
if ($('#twAreaDiv').css('display') == 'none') {
$('#twAreaDiv').css('display', 'block')
} else {
$('#twAreaDiv').css('display', 'none')
}
});
$('#btn_scrollup').click(function () {
var scroolPosY = $(document).scrollTop();
documentHeight = $(document).height();
if (scrollAnimFlag == true) {
scrollTween.stop();
if (areaID > 0) {
areaID--
}
} else {
changeAreaID(scroolPosY);
if (areaID > 0) {
areaID--
}
}
var movePosY = 0;
switch (areaID) {
case 0:
movePosY = 0;
break;
case 1:
movePosY = menuNewsScrollY;
break;
case 2:
movePosY = menuIntroScrollY;
break;
case 3:
movePosY = menuStoryScrollY;
break;
case 4:
movePosY = menuCharaScrollY;
break;
case 5:
movePosY = menuStaffScrollY;
break;
case 6:
movePosY = menuSpecialScrollY;
break;
case 7:
movePosY = menuProductsScrollY;
break;
case 8:
movePosY = menuLinkScrollY;
break;
case 9:
movePosY = documentHeight;
break
}
scrollTween = new TWEEN.Tween({
scroll: scroolPosY
}).to({
scroll: movePosY
}, 1000).easing(TWEEN.Easing.Exponential.InOut).onUpdate(function () {
$('html,body').scrollTop(this.scroll)
}).onComplete(function () {
scrollAnimFlag = false
});
scrollTween.start();
scrollAnimFlag = true
});
$('#btn_scrolldown').click(function () {
var scroolPosY = $(document).scrollTop();
documentHeight = $(document).height();
if (scrollAnimFlag == true) {
scrollTween.stop();
if (areaID <= 8) {
areaID++
}
} else {
changeAreaID(scroolPosY);
if (areaID <= 8) {
areaID++
}
}
var movePosY = 0;
switch (areaID) {
case 0:
movePosY = 0;
break;
case 1:
movePosY = menuNewsScrollY;
break;
case 2:
movePosY = menuIntroScrollY;
break;
case 3:
movePosY = menuStoryScrollY;
break;
case 4:
movePosY = menuCharaScrollY;
break;
case 5:
movePosY = menuStaffScrollY;
break;
case 6:
movePosY = menuSpecialScrollY;
break;
case 7:
movePosY = menuProductsScrollY;
break;
case 8:
movePosY = menuLinkScrollY;
break;
case 9:
movePosY = documentHeight;
break
}
scrollTween = new TWEEN.Tween({
scroll: scroolPosY
}).to({
scroll: movePosY
}, 1000).easing(TWEEN.Easing.Exponential.InOut).onUpdate(function () {
$('html,body').scrollTop(this.scroll)
}).onComplete(function () {
scrollAnimFlag = false
});
scrollTween.start();
scrollAnimFlag = true
});
$('#btn_logo').click(function () {
if (scrollAnimFlag == true) {
scrollTween.stop()
}
var scroolPosY = $(document).scrollTop();
scrollTween = new TWEEN.Tween({
scroll: scroolPosY
}).to({
scroll: 0
}, 1000).easing(TWEEN.Easing.Exponential.InOut).onUpdate(function () {
$('html,body').scrollTop(this.scroll)
}).onComplete(function () {
scrollAnimFlag = false
});
scrollTween.start();
scrollAnimFlag = true
});
$('#btn_news').click(function () {
if (scrollAnimFlag == true) {
scrollTween.stop()
}
var scroolPosY = $(document).scrollTop();
scrollTween = new TWEEN.Tween({
scroll: scroolPosY
}).to({
scroll: menuNewsScrollY
}, 1000).easing(TWEEN.Easing.Exponential.InOut).onUpdate(function () {
$('html,body').scrollTop(this.scroll)
}).onComplete(function () {
scrollAnimFlag = false
});
scrollTween.start();
scrollAnimFlag = true
});
$('#btn_intro').click(function () {
if (scrollAnimFlag == true) {
scrollTween.stop()
}
var scroolPosY = $(document).scrollTop();
scrollTween = new TWEEN.Tween({
scroll: scroolPosY
}).to({
scroll: menuIntroScrollY
}, 1000).easing(TWEEN.Easing.Exponential.InOut).onUpdate(function () {
$('html,body').scrollTop(this.scroll)
}).onComplete(function () {
scrollAnimFlag = false
});
scrollTween.start();
scrollAnimFlag = true
});
$('#btn_story').click(function () {
if (scrollAnimFlag == true) {
scrollTween.stop()
}
var scroolPosY = $(document).scrollTop();
scrollTween = new TWEEN.Tween({
scroll: scroolPosY
}).to({
scroll: menuStoryScrollY
}, 1000).easing(TWEEN.Easing.Exponential.InOut).onUpdate(function () {
$('html,body').scrollTop(this.scroll)
}).onComplete(function () {
scrollAnimFlag = false
});
scrollTween.start();
scrollAnimFlag = true
});
$('#btn_chara').click(function () {
if (scrollAnimFlag == true) {
scrollTween.stop()
}
var scroolPosY = $(document).scrollTop();
scrollTween = new TWEEN.Tween({
scroll: scroolPosY
}).to({
scroll: menuCharaScrollY
}, 1000).easing(TWEEN.Easing.Exponential.InOut).onUpdate(function () {
$('html,body').scrollTop(this.scroll)
}).onComplete(function () {
scrollAnimFlag = false
});
scrollTween.start();
scrollAnimFlag = true
});
$('#btn_staff').click(function () {
if (scrollAnimFlag == true) {
scrollTween.stop()
}
var scroolPosY = $(document).scrollTop();
scrollTween = new TWEEN.Tween({
scroll: scroolPosY
}).to({
scroll: menuStaffScrollY
}, 1000).easing(TWEEN.Easing.Exponential.InOut).onUpdate(function () {
$('html,body').scrollTop(this.scroll)
}).onComplete(function () {
scrollAnimFlag = false
});
scrollTween.start();
scrollAnimFlag = true
});
$('#btn_special').click(function () {
if (scrollAnimFlag == true) {
scrollTween.stop()
}
var scroolPosY = $(document).scrollTop();
scrollTween = new TWEEN.Tween({
scroll: scroolPosY
}).to({
scroll: menuSpecialScrollY
}, 1000).easing(TWEEN.Easing.Exponential.InOut).onUpdate(function () {
$('html,body').scrollTop(this.scroll)
}).onComplete(function () {
scrollAnimFlag = false
});
scrollTween.start();
scrollAnimFlag = true
});
$('#btn_products').click(function () {
if (scrollAnimFlag == true) {
scrollTween.stop()
}
var scroolPosY = $(document).scrollTop();
scrollTween = new TWEEN.Tween({
scroll: scroolPosY
}).to({
scroll: menuProductsScrollY
}, 1000).easing(TWEEN.Easing.Exponential.InOut).onUpdate(function () {
$('html,body').scrollTop(this.scroll)
}).onComplete(function () {
scrollAnimFlag = false
});
scrollTween.start();
scrollAnimFlag = true
});
$('#btn_link').click(function () {
if (scrollAnimFlag == true) {
scrollTween.stop()
}
var scroolPosY = $(document).scrollTop();
scrollTween = new TWEEN.Tween({
scroll: scroolPosY
}).to({
scroll: menuLinkScrollY
}, 1000).easing(TWEEN.Easing.Exponential.InOut).onUpdate(function () {
$('html,body').scrollTop(this.scroll)
}).onComplete(function () {
scrollAnimFlag = false
});
scrollTween.start();
scrollAnimFlag = true
});
$("#news_titlemore").mouseover(function () {
$("#news_titlemore").attr("src", 'img/img_moreNews_o.png')
});
$("#news_titlemore").mouseout(function () {
$("#news_titlemore").attr("src", 'img/img_moreNews.png')
});
$("#intro_titlemore").mouseover(function () {
$("#intro_titlemore").attr("src", 'img/img_moreNews_o.png')
});
$("#intro_titlemore").mouseout(function () {
$("#intro_titlemore").attr("src", 'img/img_moreNews.png')
});
$("#story_titlemore").mouseover(function () {
$("#story_titlemore").attr("src", 'img/img_moreNews_o.png')
});
$("#story_titlemore").mouseout(function () {
$("#story_titlemore").attr("src", 'img/img_moreNews.png')
});
$("#staff_titlemore").mouseover(function () {
$("#staff_titlemore").attr("src", 'img/img_moreNews_o.png')
});
$("#staff_titlemore").mouseout(function () {
$("#staff_titlemore").attr("src", 'img/img_moreNews.png')
});
$("#special_titlemore").mouseover(function () {
$("#special_titlemore").attr("src", 'img/img_moreNews_o.png')
});
$("#special_titlemore").mouseout(function () {
$("#special_titlemore").attr("src", 'img/img_moreNews.png')
});
$("#products_titlemore").mouseover(function () {
$("#products_titlemore").attr("src", 'img/img_moreNews_o.png')
});
$("#products_titlemore").mouseout(function () {
$("#products_titlemore").attr("src", 'img/img_moreNews.png')
});
$("#chara_neptune").mouseover(function () {
$("#chara_neptune").attr("src", 'img/btn_neptune_o.png')
});
$("#chara_neptune").mouseout(function () {
$("#chara_neptune").attr("src", 'img/btn_neptune.png')
});
$("#chara_purpleHeart").mouseover(function () {
$("#chara_purpleHeart").attr("src", 'img/btn_purpleheart_o.png')
});
$("#chara_purpleHeart").mouseout(function () {
$("#chara_purpleHeart").attr("src", 'img/btn_purpleHeart.png')
});
$("#chara_noire").mouseover(function () {
$("#chara_noire").attr("src", 'img/btn_noire_o.png')
});
$("#chara_noire").mouseout(function () {
$("#chara_noire").attr("src", 'img/btn_noire.png')
});
$("#chara_blackHeart").mouseover(function () {
$("#chara_blackHeart").attr("src", 'img/btn_blackheart_o.png')
});
$("#chara_blackHeart").mouseout(function () {
$("#chara_blackHeart").attr("src", 'img/btn_blackHeart.png')
});
$("#chara_blanc").mouseover(function () {
$("#chara_blanc").attr("src", 'img/btn_blanc_o.png')
});
$("#chara_blanc").mouseout(function () {
$("#chara_blanc").attr("src", 'img/btn_blanc.png')
});
$("#chara_whiteHeart").mouseover(function () {
$("#chara_whiteHeart").attr("src", 'img/btn_whiteheart_o.png')
});
$("#chara_whiteHeart").mouseout(function () {
$("#chara_whiteHeart").attr("src", 'img/btn_whiteHeart.png')
});
$("#chara_vert").mouseover(function () {
$("#chara_vert").attr("src", 'img/btn_vert_o.png')
});
$("#chara_vert").mouseout(function () {
$("#chara_vert").attr("src", 'img/btn_vert.png')
});
$("#chara_greenHeart").mouseover(function () {
$("#chara_greenHeart").attr("src", 'img/btn_greenheart_o.png')
});
$("#chara_greenHeart").mouseout(function () {
$("#chara_greenHeart").attr("src", 'img/btn_greenHeart.png')
});
$("#chara_nepgear").mouseover(function () {
$("#chara_nepgear").attr("src", 'img/btn_nepgear_o.png')
});
$("#chara_nepgear").mouseout(function () {
$("#chara_nepgear").attr("src", 'img/btn_nepgear.png')
});
$("#chara_uni").mouseover(function () {
$("#chara_uni").attr("src", 'img/btn_uni_o.png')
});
$("#chara_uni").mouseout(function () {
$("#chara_uni").attr("src", 'img/btn_uni.png')
});
$("#chara_rom").mouseover(function () {
$("#chara_rom").attr("src", 'img/btn_rom_o.png')
});
$("#chara_rom").mouseout(function () {
$("#chara_rom").attr("src", 'img/btn_rom.png')
});
$("#chara_ram").mouseover(function () {
$("#chara_ram").attr("src", 'img/btn_ram_o.png')
});
$("#chara_ram").mouseout(function () {
$("#chara_ram").attr("src", 'img/btn_ram.png')
});
$("#character_if").mouseover(function () {
$("#character_if").attr("src", 'img/btn_if_o.png')
});
$("#character_if").mouseout(function () {
$("#character_if").attr("src", 'img/btn_if.png')
});
$("#character_compa").mouseover(function () {
$("#character_compa").attr("src", 'img/btn_compa_o.png')
});
$("#character_compa").mouseout(function () {
$("#character_compa").attr("src", 'img/btn_compa.png')
});
$("#character_histoire").mouseover(function () {
$("#character_histoire").attr("src", 'img/btn_histoire_o.png')
});
$("#character_histoire").mouseout(function () {
$("#character_histoire").attr("src", 'img/btn_histoire.png')
});
$("#character_5pb").mouseover(function () {
$("#character_5pb").attr("src", 'img/btn_5pb_o.png')
});
$("#character_5pb").mouseout(function () {
$("#character_5pb").attr("src", 'img/btn_5pb.png')
});
$("#character_magiquone").mouseover(function () {
$("#character_magiquone").attr("src", 'img/btn_magiquone_o.png')
});
$("#character_magiquone").mouseout(function () {
$("#character_magiquone").attr("src", 'img/btn_magiquone.png')
});
$("#character_warechu").mouseover(function () {
$("#character_warechu").attr("src", 'img/btn_warechu_o.png')
});
$("#character_warechu").mouseout(function () {
$("#character_warechu").attr("src", 'img/btn_warechu.png')
});
jQuery.event.add(window, "load", function () {
topArrowAnim();
var windowWidth = $(window).width();
$('#main').css('min-width', windowWidth + 'px');
positionAdjust(windowWidth);
backImgScroll();
charaScroll();
allTitleAnim();
scrollDraw();
animationLoop();
if ($.browser.msie && $.browser.version < 9) {} else {
surainuRotate()
}
var animDelay = 100;
var animCt = 0;
var ramromStartPos = -500;
var ramromAnimTime = 2000;
var ramromDelayTime = animDelay * animCt;
$('#chara-ramrom').css('display', 'block');
var ramromTween = new TWEEN.Tween({
top: ramromStartPos,
alpha: 0
}).to({
top: ramromLastPos,
alpha: 1
}, ramromAnimTime).delay(ramromDelayTime).easing(TWEEN.Easing.Exponential.Out).onUpdate(function () {
$('#chara-ramrom').css('top', this.top + 'px');
$('#chara-ramrom').css('opacity', this.alpha)
});
animCt++;
var mgameStartPos = -500;
var mgameAnimTime = 1600;
var mgameDelayTime = animDelay * animCt;
$('#chara-mgame').css('display', 'block');
var mgameTween = new TWEEN.Tween({
top: mgameStartPos,
alpha: 0
}).to({
top: mgameLastPos,
alpha: 1
}, mgameAnimTime).delay(mgameDelayTime).easing(TWEEN.Easing.Exponential.Out).onUpdate(function () {
$('#chara-mgame').css('top', this.top + 'px');
$('#chara-mgame').css('opacity', this.alpha)
});
animCt++;
var nowalStartPos = -500;
var nowalAnimTime = 2000;
var nowalDelayTime = animDelay * animCt;
$('#chara-nowal').css('display', 'block');
var nowalTween = new TWEEN.Tween({
top: nowalStartPos,
alpha: 0
}).to({
top: nowalLastPos,
alpha: 1
}, nowalAnimTime).delay(nowalDelayTime).easing(TWEEN.Easing.Exponential.Out).onUpdate(function () {
$('#chara-nowal').css('top', this.top + 'px');
$('#chara-nowal').css('opacity', this.alpha)
});
animCt++;
var uniStartPos = -500;
var uniAnimTime = 1800;
var uniDelayTime = animDelay * animCt;
$('#chara-uni').css('display', 'block');
var uniTween = new TWEEN.Tween({
top: uniStartPos,
alpha: 0
}).to({
top: uniLastPos,
alpha: 1
}, uniAnimTime).delay(uniDelayTime).easing(TWEEN.Easing.Exponential.Out).onUpdate(function () {
$('#chara-uni').css('top', this.top + 'px');
$('#chara-uni').css('opacity', this.alpha)
});
animCt++;
var blanStartPos = -500;
var blanAnimTime = 2000;
var blanDelayTime = animDelay * animCt;
$('#chara-blan').css('display', 'block');
var blanTween = new TWEEN.Tween({
top: blanStartPos,
alpha: 0
}).to({
top: blanLastPos,
alpha: 1
}, blanAnimTime).delay(blanDelayTime).easing(TWEEN.Easing.Exponential.Out).onUpdate(function () {
$('#chara-blan').css('top', this.top + 'px');
$('#chara-blan').css('opacity', this.alpha)
});
animCt++;
var ifStartPos = -500;
var ifAnimTime = 2000;
var ifDelayTime = animDelay * animCt;
$('#chara-if').css('display', 'block');
var ifTween = new TWEEN.Tween({
top: ifStartPos,
alpha: 0
}).to({
top: ifLastPos,
alpha: 1
}, ifAnimTime).delay(ifDelayTime).easing(TWEEN.Easing.Exponential.Out).onUpdate(function () {
$('#chara-if').css('top', this.top + 'px');
$('#chara-if').css('opacity', this.alpha)
});
animCt++;
var gameStartPos = -500;
var gameAnimTime = 1600;
var gameDelayTime = animDelay * animCt;
$('#chara-game').css('display', 'block');
var gameTween = new TWEEN.Tween({
top: gameStartPos,
alpha: 0
}).to({
top: gameLastPos,
alpha: 1
}, gameAnimTime).delay(gameDelayTime).easing(TWEEN.Easing.Exponential.Out).onUpdate(function () {
$('#chara-game').css('top', this.top + 'px');
$('#chara-game').css('opacity', this.alpha)
});
animCt++;
var histoireStartPos = -500;
var histoireAnimTime = 1400;
var histoireDelayTime = animDelay * animCt;
$('#chara-histoire').css('display', 'block');
var histoireTween = new TWEEN.Tween({
top: histoireStartPos,
alpha: 0
}).to({
top: histoireLastPos,
alpha: 1
}, histoireAnimTime).delay(histoireDelayTime).easing(TWEEN.Easing.Exponential.Out).onUpdate(function () {
$('#chara-histoire').css('top', this.top + 'px');
$('#chara-histoire').css('opacity', this.alpha)
});
animCt++;
var belStartPos = -500;
var belAnimTime = 1300;
var belDelayTime = animDelay * animCt;
$('#chara-bel').css('display', 'block');
var belTween = new TWEEN.Tween({
top: belStartPos,
alpha: 0
}).to({
top: belLastPos,
alpha: 1
}, belAnimTime).delay(belDelayTime).easing(TWEEN.Easing.Exponential.Out).onUpdate(function () {
$('#chara-bel').css('top', this.top + 'px');
$('#chara-bel').css('opacity', this.alpha)
});
animCt++;
var nepgearStartPos = -500;
var nepgearAnimTime = 1200;
var nepgearDelayTime = animDelay * animCt;
$('#chara-nepgear').css('display', 'block');
var nepgearTween = new TWEEN.Tween({
top: nepgearStartPos,
alpha: 0
}).to({
top: nepgearLastPos,
alpha: 1
}, nepgearAnimTime).delay(nepgearDelayTime).easing(TWEEN.Easing.Exponential.Out).onUpdate(function () {
$('#chara-nepgear').css('top', this.top + 'px');
$('#chara-nepgear').css('opacity', this.alpha)
});
animCt++;
var nepStartPos = -1000;
var nepAnimTime = 1200;
var nepDelayTime = animDelay * animCt;
$('#chara-nep').css('display', 'block');
var nepTween = new TWEEN.Tween({
top: nepStartPos,
alpha: 0
}).to({
top: nepLastPos,
alpha: 1
}, nepAnimTime).delay(nepDelayTime).easing(TWEEN.Easing.Exponential.Out).onUpdate(function () {
$('#chara-nep').css('top', this.top + 'px');
$('#chara-nep').css('opacity', this.alpha)
});
var otherAnimTime = 1500;
var otherDelayTime = 1500;
$('#other_div').css('display', 'block');
var otherDivTween = new TWEEN.Tween({
alpha: 0
}).to({
alpha: 1
}, otherAnimTime).delay(otherDelayTime).easing(TWEEN.Easing.Exponential.Out).onUpdate(function () {
$('#other_div').css('top', this.top + 'px');
$('#other_div').css('opacity', this.alpha);
$('.pv_area').css('display', 'block')
});
ramromTween.start();
mgameTween.start();
nowalTween.start();
uniTween.start();
blanTween.start();
ifTween.start();
gameTween.start();
histoireTween.start();
belTween.start();
nepgearTween.start();
nepTween.start();
otherDivTween.start();
$('#main').css('display', 'block');
$('footer').css('display', 'block');
$('#main').fadeTo(0, 1)
})
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment