【JS】良く使うJSメモ(全体をふわっと表示してその間はスクロール禁止、ワンホイールでスルスルスクロール)
ソース的に分かるかと。
CSS省略するけど、body初期値をopacity:0にしておくくらい。
JS
function Animation() { "use strict"; this.initialize(); } Animation.prototype.initialize = function() { this.$window = $(window); this.$document = $(document); this.handleEvents(); }; //リスナー登録 Animation.prototype.handleEvents = function() { var self = this; // DOMがロードされて操作・解析が可能になった時 this.$document.on('ready', function(){ //ふわっと表示途中のスクロールを禁止 self.noscroll(); //全体をふわっと表示 $('body').animate({ 'opacity':'1' }, { duration:2000, complete:self.doscroll //スクロール禁止解除 }) //ワンスクロール self.onescroll(); }); //スクロールさせない Animation.prototype.noscroll = function(){ //PC用 var scroll_event = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll'; $(document).on(scroll_event,function(e){e.preventDefault();}); //SP用 $(document).on('touchmove.noScroll', function(e) {e.preventDefault();}); }; //スクロール禁止解除 Animation.prototype.doscroll = function(){ //PC用 var scroll_event = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll'; $(document).off(scroll_event); //SP用 $(document).off('.noScroll'); }; //ワンスクロールで移動 Animation.prototype.onescroll = function(){ var eventFlg = 0; var nowPosition = $(window).scrollTop(); $(window).scroll(function() { var scrollValue = $(window).scrollTop(); if(eventFlg == 0){ if(nowPosition == 0){ if(scrollValue < 80){ $("html,body").stop().animate({scrollTop:$('#message').offset().top}); eventFlg = 1; } } } }); }; //PC用 // スムーズスクロール // #で始まるアンカーをクリックした場合に処理 this.$document.on("click","a[href^=#]",function() { // スクロールの速度 var speed = 400; // ミリ秒 // アンカーの値取得 var href= $(this).attr("href"); // 移動先を取得 var target = $(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得 var headerHight = 0;//固定ヘッダの高さ ないなら0にするか削除 var position = target.offset().top-headerHight; // スムーススクロール $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); } //インスタンス化 var animation = new Animation();