canva.js

<script>



    jQuery( function( $ ) { 
       
        /*-----------------------------------------------------*/
        /*-------------------- ON READY------------------------*/
        /*-----------------------------------------------------*/
       
        $( document ).ready(function() {
            /* 
                wordcloud animation@2021-01-22 jonghyeon
            */
            
            //slide-in animation
            $('.wordcloud-line').addClass('loaded')
                
            $('.wordcloud-line').each(function(i, wrapperElem){
                //pause the animation before get all element
                let sentence = $(wrapperElem).find('.wordcloud-sentence')
                
                //fill the text in wrapper
                repeatText(sentence)
                
                //double the length
                let parent = $(sentence).parent()
                $(sentence).clone().appendTo(parent)
                
                //ready to be animated
                $(wrapperElem).addClass('animated')
            })
            
            $('.wordcloud-word').hover(function(){
                
                //pause sliding animation
                $(this).closest('.wordcloud-line').addClass('paused')
                
                //move animation wrapper to very center position of the word
                let {left, top} = getCenterOffset(this)
                left = left - $('.wordcloud-graphic').width() / 2
                top = top - $('.wordcloud-graphic').height() / 2
                $('.wordcloud-graphic').offset({left: left, top: top})
                
                //show animation by keyword
                let keyword = $(this).attr('data-id')
                $(`.wordcloud-anim#anim-${keyword}`).addClass('active')
                if(keyword == 'brand'){
                    $('#brand-image').css({transform: `translate(0px, 0px)`})
                }
                $(this).addClass('active')
            }, function(){
                //hide animation
                let id = $(this).attr('data-id')
                $(this).closest('.wordcloud-line').removeClass('paused')
                $(this).removeClass('active')
                $('.wordcloud-anim').removeClass('active')
            })
            
            /* brand interactive animation @2021-01-26 jonghyeon*/
            let relX = 0
            let relY = 0
            let nextX = 0
            let nextY = 0
            let mouseVelX = 0
            
            $('.wordcloud-word[data-id="brand"]').on("mousemove", function(e){
                let {left, top} = getCenterOffset(this)
                nextX = e.clientX - left
                nextY = e.clientY - top
            })
            //global variables
            let canvas = document.querySelector('#brand-image')
            let ctx = canvas.getContext('2d')
            let img = new Image
            img.src = canvas.dataset.imageSrc
            
            img.onload = function(){
                //animate canvas when once the image is loaded
                animate()
            }
            
            //TODO optimize it when user went out of wordcloud section
            function animate(){
                //excuted every frame
                requestAnimationFrame(animate)
                
                //get current x, y of canvas transform
                let matrix = $('#brand-image').css('transform').replace(/[^0-9\-.,]/g, '').split(',')
                let prevX = matrix[12] || matrix[4] || 0
                let prevY = matrix[13] || matrix[5] || 0
                
                //lerp values for smooth movement
                relX = lerp(relX, nextX, 0.03)
                relY = lerp(relY, nextY, 0.03)
                
                //move the canvas following the mouse
                $('#brand-image').css({transform: `translate(${relX}px, ${relY}px)`})
                
                //calculate and normalize velocity of mouse
                mouseVelX = clamp((nextX - prevX) * 0.002, -1, 1)
                
                //distort image on the canvas
                warpImage(img, mouseVelX)
            }
            
            function warpImage(image, velocity){
                //ref https://www.rgraph.net/canvas/reference/quadraticcurveto.html
                let imgWidth = image.width
                let imgHeight = image.height
                let warpOffsetX = img.width * velocity
                
                canvas.width = imgWidth + Math.abs(Math.ceil( warpOffsetX * 2 )) + 150
                canvas.height = imgHeight
                
                let startPoint = { x: canvas.width/2 - imgWidth/2, y: 0 }
                let controlPoint = { x: canvas.width/2 - imgWidth/2 + warpOffsetX, y: imgHeight/2 }
                let endPoint = { x: canvas.width/2 - imgWidth/2, y: imgHeight }
                
                let offsetXPoints = []
                
                for(let i = 0; i < imgHeight; i ++){
                    //slice image and get the offset value for each row pixel
                    let xy = getQuadraticBezierXY( startPoint,  controlPoint,  endPoint, i/imgHeight )
                    offsetXPoints.push(parseInt(xy.x))
                }
                
                ctx.clearRect(0, 0, canvas.width, canvas.height)
                
                for(let i = 0; i < imgHeight; i ++){
                    ctx.drawImage(img,
                        0, i, imgWidth + Math.abs(warpOffsetX), 1,
                        offsetXPoints[i], i, imgWidth + Math.abs(warpOffsetX), 1
                    )
                }
                // center line for debugging
                // ctx.strokeStyle = 'rgb(0,255,255)'
                // ctx.lineWidth = 2;
                // ctx.beginPath()
                // ctx.moveTo(startPoint.x + imgWidth/2, startPoint.y)
                // ctx.quadraticCurveTo(controlPoint.x + imgWidth/2, controlPoint.y, endPoint.x + imgWidth/2, endPoint.y)
                // ctx.stroke()
            }
            
            /* accordion work setting */
            updateFieldAccordionStyle(0)
            
            $('#accordion_whatwedo .elementor-accordion-title').on('click', function(e) {
                /* 
                    click event for opened tab is disabled, check page custom CSS
                    jonghyeon@2021-01-18
                */
                
                let index = $('#accordion_whatwedo .elementor-accordion-title').index(this)
                
                updateFieldAccordionStyle(index)        
                
            })
            
            
            /* slider in who we are*/
            let slider_whoweare = document.querySelector('#slider-whoweare .swiper-container').swiper
            
            let sliderLength = 0
            $('#slider-whoweare .swiper-slide').each(function(index, item){
                //get slide length from the highest index from every slide attr
                let itemIndex = $(item).attr('data-swiper-slide-index')
                if(itemIndex > sliderLength) sliderLength = itemIndex
            })
            
            slider_whoweare.on( "slideChangeTransitionEnd", function() {
                updateWhoWeAreSliderStyle(slider_whoweare.activeIndex, sliderLength)
            })
            
            updateWhoWeAreSliderStyle(slider_whoweare.activeIndex, sliderLength)
            
            
            /* slider work setting */
            let slider_howwework = document.querySelector('#slider-howwework .swiper-container').swiper
            $('#slider-howwework .swiper-slide-contents').each(function(i, obj) {
                $(obj).prepend( "<div class='elementor-slide-numerotation'> 0" + (i+1) + " </div>")
            })
            slider_howwework.on( "slideChange", function() {
                updateWorkSliderStyle(slider_howwework.activeIndex)
            })
            updateWorkSliderStyle(0)
            
            
        })  
        
        /*-----------------------------------------------------*/
        /*------------------- FUNCTIONS------------------------*/
        /*-----------------------------------------------------*/
        
        /* accordion field  */
        function updateFieldAccordionStyle(index) {
            //console.log('updatingIcon', index)
            
            $('#icons-whatwedo-container #immersive').hide()
            $('#icons-whatwedo-container #exhibition').hide()
            $('#icons-whatwedo-container #retail').hide()
            $('#icons-whatwedo-container #vizualization').hide()
            $('#icons-whatwedo-container #machinelearning').hide()
            switch(index){
                case 0 : 
                    $('#icons-whatwedo-container #immersive').show()
                    break
                case 1 : 
                    $('#icons-whatwedo-container #exhibition').show()
                    break
                case 2 : 
                    $('#icons-whatwedo-container #retail').show()
                    break
               case 3 : 
                    $('#icons-whatwedo-container #vizualization').show()
                    break
                case 4 : 
                    $('#icons-whatwedo-container #machinelearning').show()
                    break
            }
        }
        
        /* tab mouse hover class */
        $('.elementor-tab-title').addClass('magic-hover magic-hover-classic')
        
        /* slider whoweare */
        function updateWhoWeAreSliderStyle(index, sliderLength){
            let currentIndex = 0
            //get the index of active slide
            $('#slider-whoweare .swiper-slide').each(function(index, item){
                if($(item).hasClass('swiper-slide-active')) currentIndex = $(item).attr('data-swiper-slide-index')
            })
            //update numerotation by index
            let numerotation = `${Number(currentIndex) + 1}\xa0\xa0-\xa0\xa0${Number(sliderLength) + 1}`
            
            $('#slider-whoweare').attr('data-numerotation', numerotation)
            // console.log('slider-whoweare', numerotation)
        }
        
        /* slider work */
        function updateWorkSliderStyle(index) {
            // slider style
            
            $('#slider-howwework .swiper-slide-contents').each(function(i, value) {
               if(i == index) $('#slider-howwework .swiper-slide-contents').eq(i).removeClass('slider-howwework-off')
                else $('#slider-howwework .swiper-slide-contents').eq(i).addClass('slider-howwework-off')
            })
            // slider icons
            switch(index){
                case 0 : 
                     $('#icons-howwework-container #production').hide()
                     $('#icons-howwework-container #operation').hide()
                    break
                case 1 : 
                     $('#icons-howwework-container #production').show()
                     $('#icons-howwework-container #operation').hide()
                    break
                case 2 : 
                    $('#icons-howwework-container #production').show()
                    $('#icons-howwework-container #operation').show()
                    break
            }
        }
        
    })
    
    /* helpers */
    function repeatText(sentence){
        let parent = $(sentence).parent()
        let counter = 0
        
        while($(sentence).width() < $(parent).width() && counter < 10){
            $(sentence).clone().appendTo(parent)
            counter += 1
        }
    }
    
    function getCenterOffset(elem){
        let left = $(elem).offset().left + $(elem).width()/2
        let top = $(elem).offset().top + $(elem).height()/2
        return {left, top}
    }
    
    function lerp(start, end, amt){
      return (1-amt)*start+amt*end
    }
    
    function clamp(num, a, b){
      return Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b))
    }

    function getQuadraticBezierXY(start_point, control_point, end_point, T) {
    
    		var pow1minusTsquared = Math.pow(1 - T, 2),
    			powTsquared = Math.pow(T, 2);
    
    		var x = pow1minusTsquared * start_point.x + 2 * (1 - T) * T * control_point.x + powTsquared * end_point.x,
    			y = pow1minusTsquared * start_point.y + 2 * (1 - T) * T * control_point.y + powTsquared * end_point.y; 
    		
    		return {
    			x: x,
    			y: y
    		};
    	}
    /* helpers end*/
</script>