MyController

WEB業界素人の僕がまた見返しそうなことのメモです。

【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();