jQuery.event.add(window,"load",function() {
var pageH = $("#メインコンテンツ").height();
$("#ローディングバックグランド").css("height", pageH).delay(200).fadeOut(500,'easeInOutQuart');
$("#ローダー").fadeOut(100,'easeInOutQuart');
$("#メインコンテンツの親div").css("display", "block");
});
$(document).ready(function(){
$('#メニュー').delay(1000).animate({top:350},3000,'easeInOutQuart',function(){});
$("#記事").addClass('space');
$("#メニュー2").hide();
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 240) {
$('#記事').removeClass('space');
$('#記事').delay(1000).animate({top:350},3000,'easeInOutQuart',function(){});
$('.タイトル').addClass('opTxtB');
$('.サブタイトル').addClass('opSubB');
$('.サブタイトル2').addClass('opSub2B');
$('.サブタイトル3').addClass('opSub3B');
$('.メニュー2').fadeIn(100);
$('video').fadeOut(1000)
} else {
$('#記事').addClass('space');
$('.タイトル').removeClass('opTxtB');
$('.サブタイトル').removeClass('opSubB');
$('.サブタイトル2').removeClass('opSub2B');
$('.サブタイトル3').removeClass('opSub3B');
$('.メニュー2').fadeOut(100);
$('video').fadeIn(100)
}
});
});
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 500) {
$('#title').addClass('grad');
} else {
$('#title').removeClass('grad');
}
});
});
});
お世話になっております。
現在画面がスクロール値240でぱっと変わる様なHPを作っているのですが
240を行き来したり、どうしてもスクロール値で取得しているためマウスを高速移動すると挙動が一気に現れて
少し滑稽な感じになってしまいます。
デザインはお見せできませんが、マウスをゆっくり移動しないとちゃんと流れで視覚的にうまく行かないというのと
ハイスピードマウス操作対策等はあるのでしょうか。
それと、今回はオープニングスプラッシュはないのですがオープニングが終わった後にふわっと画面を遷移して
メインを登場させたいと思っているのですが、delayやeasingでうまく行きません。
ご教授頂けますでしょうか。
jquery-1.11.1.min.js を使っています。
よろしくお願い致します。