M.스위치

mswitch.co.kr에 사용된 JS

$(document).ready(function () {
  mswitch = {
    init: function () {
      mswitch.bubble();
      mswitch.scroll();
      mswitch.gnb();
      mswitch.anchor();
      mswitch.mobile();
      mswitch.layer();
    },
    /* 거품 올라오는 애니메이션 */
    bubble: function() {
      var bArray = [];
      var sArray = [6,8,10,12,20,50];
      var $bubbles = $('.bubbles');
      var $document_width = $(document).width();

      if($document_width > 800) {
        for (var i = 0; i < $bubbles.width(); i++) {
          bArray.push(i);
        }
        function randomValue(arr) {
          return arr[Math.floor(Math.random() * arr.length)];
        }
  
        setInterval(function(){
          var size = randomValue(sArray);
  
          if(size >= 20) {
            $bubbles.append('<div class="individual-bubble round" style="left: ' + randomValue(bArray) + 'px; width: ' + size + 'px; height:' + size + 'px;"></div>');
          } else {
            $bubbles.append('<div class="individual-bubble" style="left: ' + randomValue(bArray) + 'px; width: ' + size + 'px; height:' + size + 'px;"></div>');
          }
            
          $('.individual-bubble').animate({
            'bottom': '100%',
            'opacity' : '-=0.7'
          }, 9000, 'easeOutQuad', function(){
            $(this).remove()
          });
        }, 300)
      }
    },
    /* 스크롤 이벤트 관련 */
    scroll: function() {
      var el = $('section');
      var el_sub = $('.sub_section')
      var disScroll;
      var scrollInterval;
      var $header = $('header');
      var $gnb = $('.gnb');
      var $document_width = $(document).width();
      var _height_top = 1;
      var _height_num = 81;

      if($document_width <= 800) {
        _height_top = -200;
        _height_num = 0;
      }

      if(el.lenth <= 0){
        return;
      }
      $(document).on('scroll', function(){
        disScroll = true;
      }).trigger('scroll');
      clearInterval(scrollInterval);
      scrollInterval = setInterval(function(){
        if(disScroll){
          scrollDone();
          disScroll = false;
        }
      }, 250);

      

      function scrollDone() {
        var winH = window.innerHeight;
        var sct = $(window).scrollTop();
        el.each(function(idx, obj){
          if(sct >= $(obj).offset().top - _height_num) {

            $(obj).addClass('active');

            var obj_index = $(obj).index() - _height_top;
            $gnb.find("a").removeClass("active");
            $gnb.find("li").eq(obj_index).find("a").addClass("active");
          }
          /* 메뉴 */
          if(sct >= 600){
            $header.addClass('active');
          } else {
            $header.removeClass('active');
          }
        });
        el_sub.each(function(idx, obj){
          if(winH + sct >= $(obj).offset().top + 300){
            if(sct < $(obj).offset().top + ($(obj).height()/2)){
              $(obj).addClass('action');
            }
          }
        });
      }
    },
    /* GNB 메뉴 클릭 스크롤 */
    gnb: function() {
      var $gnb = $('.gnb');
      var $document_width = $(document).width();
      var _height_top = 1;
      var _height_num = 81;

      if($document_width <= 800) {
        _height_top = -200;
        _height_num = 0;
      }

      $gnb.find("li a").on('click', function(e) {
        if($(this).attr("href") === '#') {
          e.preventDefault();
          var _this_value = $(this).attr("id");
          var _value = $("."+_this_value).offset().top - _height_num;
          if($(this).attr("id") === 'about') {
            var _value = $("."+_this_value).offset().top - _height_top;
          }
          
          $('html,body').animate({scrollTop: _value+"px"});
        }
      });
    },
    /* 버튼 클릭 스크롤 */
    anchor: function() {
      var $anchor = $(".anchor");
      var $document_width = $(document).width();
      var _height_num = 81;

      if($document_width <= 800) {
        _height_num = 0;
      }

      $anchor.on('click', function() {
        var _this_value = $(this).attr("href").split('#')[1];
        var _value = $("#"+_this_value).offset().top - _height_num;
        $('html,body').animate({scrollTop: _value+"px"});
      });
    },
    /* 모바일 메뉴 토글 */
    mobile: function() {
      var $document_width = $(document).width();
      var $gnb = $('.gnb');

      if($document_width <= 800) {
        $(document).on("click", ".mobile_menu",  function() {
          if(!$(this).hasClass("active")) {
            $gnb.addClass("active");
            $(this).addClass("active");
          } else {
            $gnb.removeClass("active");
            $(this).removeClass("active");
          }
        });

        $gnb.on("click", function() {
          $gnb.removeClass("active");
          $(".mobile_menu").removeClass("active");
        });
      }
    },
    /* 레이어 관련 */
    layer: function() {
      var $layer = $('.layer');
      var $layer_open = $(".layer_open");
      var $layer_close = $(".layer_close");
      var $body =  $("body");

      $layer_open.on("click", function(e) {
        e.preventDefault();
        $layer.addClass("action")
        $body.addClass("noscroll");
      });
      $layer_close.on("click", function() {
        $layer.removeClass("action");
        $body.removeClass("noscroll");
      });
    },
  }
  mswitch.init();
});

 

mswitch.co.kr/center/home?domain_sub=mswitch에 사용된 소스

$(document).ready(function () {
  academy = {
    init: function () {
      academy.anchor();
      academy.mainMenu();
      // academy.scroll();
       academy.layer();
       academy.typing();
       academy.imgSize();
       academy.sound();
    },
    /* Anchor 이동 */
    anchor: function() {
      var $anchor = $(".anchor");
      var $logo = $(".logo");
      $anchor.find('a[href^="#"]').on('click',function (e) {
        e.preventDefault();

        var target = this.hash;
        var $target = $(target);

        $('html, body').stop().animate({
          'scrollTop': $target.offset().top
        }, 300, 'swing', function () {
          window.location.hash = target;
          $(".lnb").removeClass("active");
        });
      });
      
      /* 라이브온 클릭 시 */
      $(".live_on").on('click',function (e) {
	      e.preventDefault();
	      $('html, body').stop().animate({
	        'scrollTop': $("#live_lecture").offset().top
	      }, 900, 'swing');
	    });
      
      /* 로고 클릭 시 */
      $logo.find("a").on('click',function () {
		  $('html, body').animate({'scrollTop': 0}, 300, 'swing');
		});
    },
    /* 메인 메뉴 및 이벤트 관련 */
    mainMenu: function() {
		var fired = [];
		
		$(window).on('resize', function () {
		  if ($(this).width() >= 800 && !fired[1]) {
		    fired[0] = false;
		    fired[1] = true;
		    
		    var $document_width = $(document).width();
		    var disScroll;
	        var scrollInterval;
	        var $body = $("body");
	        var $title = $(".title");
	        var $map = $(".map");
	        var $main = $(".main");
	        var $slogan = $(".slogan");

	        $(document).on('scroll', function(){
	          var sct = $(window).scrollTop();
	          var mapOffset = $map.offset().top;

	          /* 메인 밀어올리기 */
	          if(sct >= mapOffset-1000) {
	            var calcSct = sct-(mapOffset-1000);
	            //$main.css({top: -calcSct+'px'},100);
	            $(".poabb").css({bottom: calcSct+40+'px'});
	            $(".consultation").css({bottom: calcSct+40+'px'});
	          }
	          disScroll = true;
	        }).trigger("scroll");
	        clearInterval(scrollInterval);
	        scrollInterval = setInterval(function(){
	          if(disScroll){
	            scrollDone();
	            disScroll = false;
	          }
	        }, 250);

	        function scrollDone() {
	          var sct = $(window).scrollTop();
	          var el_sub = $('.sub_section');
	          var $lnb = $('.lnb');

	          /* 메인 텍스트 이동 */
	          var sct = $(window).scrollTop();
	          if(sct >= 30) {
	            var _dwidth = $(document).width();
	            var $main_title = $(".main .title");

	            $main_title.css('width', (_dwidth-680)/2);
	            $title.addClass("active");
	          } else {
	            var $main_title = $(".main .title");
	            $main_title.css('width', '');
	            $title.removeClass("active");
	          }

	          /* 메뉴 활성화 */
	          el_sub.each(function(idx, obj){
	        	
	            if(sct >= $(obj).offset().top-100) {
	              var obj_index = $(obj).index();
	              $lnb.find("a").removeClass("active");
	              $lnb.find("li").eq(obj_index).find("a").addClass("active");
	            }
	          });
	          
	          /* 슬로건 유/무 체크 */
	          if($main.find(".title .slogan").length === 0) {
	        	  $body.addClass("noslogan");
	          }
	        }
		  }
		}).trigger('resize');
    },
    /* Scroll Stop 이벤트 확장 함수
    Scroll 이동 */
    scroll: function() {
      var _scrollTop;
      var scrollInterval;
      var disScroll;
      var $document_width = $(document).width();
      var requestId;
     

      if($document_width > 800) {
        $.fn.scrollStopped = function(callback) {
          var that = this, $this = $(that);
          $this.scroll(function(ev) {
            disScroll = false;
            clearInterval(scrollInterval);
            clearTimeout($this.data('scrollTimeout'));
            $this.data('scrollTimeout', setTimeout(callback.bind(that), 250, ev));
          }).trigger("scroll");
        };
        $(window).scrollStopped(function(ev){
          _scrollTop = $(document).scrollTop();
          disScroll = true;
          start();
        });

        $(".notice").on("mouseenter", function() {
          pause()
        });
        $(".notice").on("mouseleave", function() {
          start()
        })
        function draw(timestamp) {
          start();
        }
        function scrollStart() {
          $('html').animate({scrollTop: '+=1px'}, 10, function() {
            requestId = requestAnimationFrame(scrollStart);
          });
        }
        function start() {
          requestId = requestAnimationFrame(draw);
        }
        function pause() {
          cancelAnimationFrame(requestId);
       }
      //  setTimeout(pause,1000);
      }
    },
    /* 레이어/LNB 관련 */
    layer: function() {
      var $body = $("body");
      var $toggle = $(".main .toggle .btn");
      var $lnb = $(".lnb");
      var $lnb_close = $(".lnb_close");
      var $layer = $(".layer");

      var $anchor = $("a[data-lyer]");
      $anchor.on('click',function (e) {
        e.preventDefault();
        var layer_name = $(this).attr("data-lyer")
        $("html").removeAttr("style");
        $body.addClass("noscroll");
        $("."+layer_name).show();
      });
      $layer.find(".close").on("click", function(){    	
    	if($(this).parent().parent().hasClass("sound_layer")) {
    		$(".book_list").show();
    		$(".sound_list").hide();
    	}
        
        $body.removeClass("noscroll");
        $layer.hide();
      });

      $toggle.on("click", function(){
        $lnb.addClass("active");
      });
      $lnb_close.on("click", function(){
        $lnb.removeClass("active");
      });
    },
    /* 학원명 타이핑 */
    typing: function() {
    	var $typing = $(".typing");
    	var text = $typing.text();
    	$typing.html("");
    	var chars = text.split("");
    	chars.forEach(function (item) {
    		item = (item == " ") ? "&nbsp" : item;
    		$("<span></span>").html(item).appendTo($typing);
    	});
    	var $caret = $("<span></span>").attr("id", "caret").appendTo($typing);
    	var delayStart = 1500;
    	var speed = 150;
    	var count = $typing.children(":not(#caret)").length;
    	$typing.children(":not(#caret)").hide().each(function (index) {
    		var delay = delayStart + speed * index;
    		$(this).delay(delay).show(10);
    	});
    	setTimeout(function() {
    		$("#caret").addClass("hide");
    	}, count*speed+delayStart);
    },
    /* 이미지 가로 세로 체크 */
    imgSize: function() {
      var $check_img = $(".wh_check");
      
      $check_img.find("img").each(function(idx, obj){
        var _this = $(this);
        var _thisWidth = _this.width()
        var _thisHeight = _this.height()
        if(_thisWidth > _thisHeight) {
          _this.parent().addClass("width_first");
        } else {
          _this.parent().addClass("height_first");
        }
      });
    },
    /* 음원 */
    sound: function() {
    	var $list = $(".list");
        var $box = $(".box");
        var $play_icon = $(".play_icon");
        var $nav = $(".mp3");
        var $book_list = $(".book_list");
        var $sound_list = $(".sound_list");
        
        
        var _dwidth = $(document).width();
        if(_dwidth <= 767) {
            $nav.find("ul").on("click", function() {
                console.log(1)
                if($(this).hasClass("blind")) {
                    $(this).removeClass("blind");
                } else {
                    $(this).addClass("blind");
                }
            });
        }
        
        $book_list.find("a").on("click", function() {
            var _this_index = Number($(this).attr("data-index"));
            $book_list.hide();
            $sound_list .show();
            selectBook(_this_index);
        });
        
        function selectBook(value) {
            $nav.find(">li >a").off().on("click", function() {
                var _index = $(this).parent().index();
                $nav.find(">li >a").removeClass("active").siblings("ul").find("a").removeClass("active");
                $nav.find(">li ul").hide();
                $(this).addClass("active").siblings("ul").show().find(">li").eq(0).find("a").addClass("active");
                
                $nav.find("ul li a").off().on("click", function(e) {
                    e.stopPropagation();
                    
                    var _data_name = $(this).text();
                    $box.find(">div").remove();
                    $nav.find("ul").removeClass("blind").find("li a").removeClass("active");
                    $list.find(">li").remove();
                    $(this).addClass("active").parents().parents().siblings("a").addClass("active");
                    
                    $.getJSON("/mp3/book_data.els", function (json) {
                        $.each(json, function(key, val) {
                            var _keytitle = json[key].title,
                            _keytarget = json[key].target,
                            _keylistening = json[key].listening;
                            
                            if(_data_name === _keytitle) {
                                html = "<div class='box_area'><img src='/images/center/sound_img_"+_keytitle.slice(-5, -1, _keytitle.length) +".png' class='img'><p class='title'>"+_keytitle+"</p><dl><dt>Listening</dt><dd>"+_keylistening+"</dd><dt class='dib'>학습대상</dt><dd class='dib'>"+_keytarget+"</dd></dl></div>";
                                $box.append(html);
                            }
                        });
                    });
                    
                    $.getJSON("/mp3/data.els", function (json) {
                        $.when(
                            $.each(json, function(key, val) {
                                    var _keyid = json[key].id,
                                    _keydepth1 = json[key].depth1,
                                    _keydepth2 = json[key].depth2,
                                    _keytitle = json[key].title,
                                    _keyfile = json[key].file;
                                    
                                    if(_data_name === _keydepth2) {
                                        html = "<li><a href='javascript:void(0);' id='play"+_keyid+"' class='play_icon'><span class='num'>"+_keytitle.substring(0,2)+"</span><i class='play'>아이콘</i><span class='subject'>"+_keytitle+"</span><div class='icon'><span><i></i><i></i><i></i><i></i><i></i></span></div></a><audio><source src='/mp3/"+_keydepth1+"/"+_keydepth2+"/"+_keyfile+"' type='audio/mpeg'></audio></li>";
                                        $list.append(html);
                                    }
                                })
                          ).then(function(){
                            $list.css({"height":52*$list.find(">li").length/2+50}).find(">li").eq(Math.ceil($list.find(">li").length/2)).addClass("line");
                            return false;
                          });
                    });
                }).parent().parent().parent().eq(_index).find("ul li").eq(0).find("a").trigger( "click" );
            }).parent().eq(value).find(">a").trigger( "click" );
        }
        
        
        $(document).on("click", ".play_icon", function() {
            if($(this).hasClass("active")) {
                $(this).removeClass("active");
                $(this).find(".icon").removeClass("active");
                $(this).siblings("audio")[0].pause();
                $(this).siblings("audio")[0].currentTime = 0;
            } else {
                $(this).addClass("active");
                $(this).find(".icon").addClass("active");
                $(this).siblings("audio")[0].play();
            }
        });
    },
  }
  academy.init();
});