First Commit

web/html/theme/FT_WEB20/js/main.js

@@ -0,0 +1,146 @@
+
+$(document).ready(function(){
+    $('.main-slick').slick({
+        slidesToShow:1,
+        slidesToScroll:1,
+        fade:true,
+        appendArrows:$('.main-controll'),
+        prevArrow:"<div><i class='xi-angle-left'></i></div>",
+        nextArrow:"<div><i class='xi-angle-right'></i></div>",
+        dots:true,
+        appendDots:$('.main-controll'),
+        dotsClass:"main-dots"
+    });
+
+
+    $('.sec3-lt').slick({
+        slidesToShow:1,
+        slidesToScroll:1,
+        fade:true,
+        arrows:false,
+        dots:true,
+        appendDots:$('.sec3-rt ul'),
+        customPaging: function(slider, i) { 
+            return '<span class="dot-button">' + $(slider.$slides[i]).attr('data-dot-title')+ '</span>'+"<div class='circle'></div>";
+        },
+    });
+
+    $('.sec6-wrap').slick({
+        slidesToShow:1,
+        slidesToScroll:1,
+        fade:true,
+        arrows:false,
+        speed:1000,
+        autoplay:true,
+        autoplaySpeed:1500,
+    });
+
+    var $elems = $(".elm");
+    var winheight = $(window).height();
+    var executed=false;
+	$elems.addClass('active');
+    $(window).scroll(function () {
+        animate_elems();
+    });
+    function animate_elems() {
+        wintop = $(window).scrollTop();
+
+        $elems.each(function () {
+            $elm = $(this);
+            topcoords = $elm.offset().top;
+            if(executed==false){
+                if (wintop >= (topcoords - (winheight * 0.5))) {
+                    var progressRate=$('.cha-num').attr("data-rate");
+                    $({rate:0}).animate({rate:progressRate},{
+                        duration:1500,
+                        progress:function(){
+                            var now=this.rate;
+                            $('.cha-num').html(Math.ceil(now))
+                        }
+                    })
+                    var progressRate1=$('.cha-num2').attr("data-rate");
+                    $({rate:0}).animate({rate:progressRate1},{
+                        duration:1500,
+                        progress:function(){
+                            var now=this.rate;
+                            $('.cha-num2').html((Math.ceil(now))+"+")
+                        }
+                    })
+                    var progressRate2=$('.cha-num3').attr("data-rate");
+                    $({rate:0}).animate({rate:progressRate2},{
+                        duration:1500,
+                        progress:function(){
+                            var now=this.rate;
+                            $('.cha-num3').html((Math.ceil(now)))
+                        }
+                    })
+                    executed=true;
+                } 
+            }
+        });
+    };
+
+    $(window).scroll(function(){
+        var wScoll=$(window).scrollTop();
+        if(wScoll>=$('.sec6').offset().top - $('.sec6').height()/2){
+            $('.site-map li').removeClass('on');
+            $('.site-map li').eq(3).addClass('on')
+        }else if(wScoll>=$('.sec4').offset().top-$('.sec4').height()/2){
+            $('.site-map li').removeClass('on');
+            $('.site-map li').eq(2).addClass('on')
+        }else if(wScoll>=$('.sec2').offset().top-$('.sec2').height()/2){
+            $('.site-map li').removeClass('on');
+            $('.site-map li').eq(1).addClass('on')
+        }else if(wScoll>=$('.sec1').offset().top-$('.sec1').height()/2){
+            $('.site-map li').removeClass('on');
+            $('.site-map li').eq(0).addClass('on')
+        }
+        
+
+    })
+    
+
+    if($(window).scrollTop() >=$('.sec4').offset().top && $(window).scrollTop() <=$('.sec6').offset().top){
+        $('#header #nav .menu_tit').css({color:"#fff"});
+    }else{
+        $('#header #nav .menu_tit').css({color:"#000"});
+    }
+
+    $(document).on("click",".site-map a",function(event){
+        event.preventDefault();
+            $('html,body').animate({
+                scrollTop:$(this.hash).offset().top
+        },400);
+    });
+
+    function responsiveSlick(){
+        if($(window).width()<901){
+            $('.sec4-inner ul').slick({
+                slidesToShow:2.3,
+                slidesToScroll:1,
+                appendArrows:$('.mo-con'),
+                prevArrow:"<div><i class='xi-angle-left'></i></div>",
+                nextArrow:"<div><i class='xi-angle-right'></i></div>",
+                responsive:[
+                    {
+                        breakpoint:601,
+                        settings:{
+                            slidesToShow:1,
+                            centerMode:true,
+                        }
+                    }
+                ]
+            });
+
+
+        }
+    };
+    responsiveSlick();
+
+    $(window).resize(function(){
+        responsiveSlick();
+    });
+
+})
+
+