TweenMax.js视差切片动画不流畅

问题描述

我在主页英雄部分中实现了一个滑块。

幻灯片图像的动画是将它们按上下视差效果的交替顺序垂直分成5个部分。我已经将TweenMax.js用于动画。

效果差不多完成了，但是动画一点都不流畅，也无法有效地附加按钮以紧贴最后两个部分

网站网址： http://www.procopiocompanies.devrocketmad.com/

所需的动画效果如下： https://drive.google.com/file/d/1EM4ozCZPNcY0x0QC-knSgXi1ITBKQiBr/view?usp=sharing

滑块js位于http://www.procopiocompanies.devrocketmad.com/wp-content/themes/Impreza/js/slider/home_slider.js?ver=5.5.1文件中

我花了很多时间在此上，但仍然找不到解决方法。

该功能在文件下面

function setHomeSlider(){   

    jQuery(".home_slider:not(.ready)").each(function(index){

        home_slider = jQuery(this);
        home_slides = home_slider.find(".home_slider_content_slides .home_slider_single_slide");
        TweenMax.set(home_slides,{autoAlpha:0,className: "-=current_slide"})
        
        slide_images = "";
        home_slides.each(function(index_slide){
            
            //jQuery(this).find(".home_slide_index_letter").html(alphabet_index.charat(index_slide))
            jQuery(this).find(".home_slide_index_letter").html((index_slide+1))
            
            splitSlideContent(jQuery(this))
            jQuery(this).find(".page_dynamic").each(function(a){
                jQuery(this).unbind( "click" ).click(function(e){
                    if(jQuery(".ajax_content_container").length > 0){
                        e.preventDefault();
                        href = jQuery(this).attr("href")
                        if(href != window.location.href){
                            getSinglePageAjax(href,true)
                        }
                    }
                })
            })
            TweenMax.set(jQuery(this).find(".home_slide_title_top h1,.home_slide_title_bottom h1,.home_slider_copy"),{cursor:"pointer"})
            jQuery(this).find(".home_slide_title_top h1,.home_slider_copy").unbind( "click" ).click(function(e){
                e.preventDefault();
                jQuery(this).closest(".home_slide_holder").find(".slider_plus_button a").trigger("click");
            })
            
            jQuery(this).attr("data-index",index_slide)
            
            
            image_src = jQuery(this).find(".slider_image_ref").attr("src");
            
            slide_images += '<div class="home_slider_image" data-index="'+index_slide+'" >';
                for(i=0;i<5;i++){
                slide_images += '<div class="home_slider_image_slice" >';
                slide_images += '<div class="home_slider_image_slice_img" style="background-image:url(\''+image_src+'\');" ></div>';
                slide_images += '</div>';
                }
            slide_images += '</div>';
            
        
        })
        home_slider.find(".home_slider_images").html("").append(slide_images)
        
        
        home_slider_images = home_slider.find(".home_slider_images .home_slider_image")
        home_slider.find('.home_slider_image_slice').each(function(indx){           
                homesliceheight = $(this).height();
                $(this).find('.home_slider_image_slice_img').css({"height":homesliceheight});
                /*indx1 = (indx < 5)?indx:indx-5;
                if(indx1 != 0 && indx1%3 ==0){
                    $(this).find(".viewmore_work_cta").remove();
                    $(this).append($(".viewmore_work_cta").clone());
                }
                if(indx1 != 0 && indx1%4 ==0){
                    $(this).find(".long_right_arrow_cta").remove();
                    $(this).append($(".long_right_arrow_cta").clone());
                }*/
        });
        //$(".home_companies_sec").hide();

        TweenMax.set(home_slider_images,className: "-=current_slide",cursor:"pointer"})
        
        
        
        home_slider.find(".arrows_control_left").click(function(){
            waitBeforeRepeatEvent(function(){
                openPrevHomeSlider();
            },500,"openHomeSlider");
        })
        home_slider.find(".arrows_control_right").click(function(){
            waitBeforeRepeatEvent(function(){
                openNextHomeSlider();
            },"openHomeSlider");
        })
        home_slider.find('.carousel-bullet').click(function(){
            var index = $(this).index();
            waitBeforeRepeatEvent(function(){
                openNextHomeSlider();
            },"openHomeSlide");
        })
        jQuery(".long_right_arrow_cta_img.view_btn_cntent.align_center").on("click",function(){
            waitBeforeRepeatEvent(function(){
                openNextHomeSlider();
            },"");
        })          
            openHomeSlide(0)    
        
    }).addClass("ready")
}

任何帮助将不胜感激。

谢谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）