본문 바로가기

Webstoryboy

Category

Explanation

ANIMATION/CSS

[CSS Animation] Matrix

sample01
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* option */
        .animation {
            background-color: #f7f7f7;
            border-radius: 3px;
            padding: 20px;
            counter-reset: items;
        }
        h2 {color: #999; font-size: 14px; margin-top: 50px;}
        .box {
            position: relative;
            width: 60px; height: 60px; line-height: 60px;
            text-align: center; color: #fff; font-size: 12px;
            margin: 10px;
            border-radius: 50%;
            background-color: #A2CBFA;
            border: 1px solid #4390E1;
            box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
        }
        .box::before {
            counter-increment: items;
            content: counter(items);
        }
        .btn {margin: 13px 3px 3px 3px;}
        .btn > span, .btn > a {
            color: #3d90b7;
            background: #e7f6fd;
            border: 1px dashed #3d90b7;
            display: inline-block;
            border-radius: 3px;
            padding: 6px 12px;
            text-decoration: none;
            margin: 3px;
            font-size: 14px;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            cursor: pointer;
        }
        .btn > span:hover, 
        .btn > a:hover {text-decoration: underline;}
        
        /* animation */
        .box1:nth-child(1).show {animation: move 2s 1}
        .box1:nth-child(2).show {animation: move 2s 1}
        .box1:nth-child(3).show {animation: move 2s 1}
        
        @keyframes move {
            0% {left: 0%;}
            50% {left: calc(100% - 70px);}
            100% {left: 0%;}
        }
    </style>
</head>
<body>
    <h2>CSS Animation</h2> 
    <div class="animation ani1">
        <div class="box box1"></div>
        <div class="box box1"></div>
        <div class="box box1"></div>
    </div>
    
    <div class="btn btn1">
        <a href="#" class="reset1">리셋</a>
        <a href="#" class="start1">클릭</a>
    </div>
    
    <h2>jQuery Animation</h2> 
    <div class="animation ani2">
        <div class="box box2"></div>
        <div class="box box2"></div>
        <div class="box box2"></div>
    </div>
    
    <div class="btn btn2">
        <a href="#" class="reset2">리셋</a>
        <a href="#" class="start2">클릭</a>
    </div>
    
    <h2>GSAP Animation</h2> 
    <div class="animation ani3">
        <div class="box box3"></div>
        <div class="box box3"></div>
        <div class="box box3"></div>
    </div>
    
    <div class="btn btn3">
        <a href="#" class="reset3">리셋</a>
        <a href="#" class="start3">클릭</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script>
    <script>
        $("a").click(function(e){
            e.preventDefault();
        });
        
        //css
        $(".start1").click(function(e){
            $(".box1").eq(0).addClass("show");
            $(".box1").eq(1).addClass("show");
            $(".box1").eq(2).addClass("show");
        });
        
        $(".reset1").click(function(e){ 
            $(".box1").removeClass("show");
        });
        
        
        //jquery
        //50% {left: calc(100% - 70px);}
        //$(".animation").width() - 70 + "px" 
        
        let leftWidth = $(".animation").width() - 70 + "px"
        $(".start2").click(function(e){
            $(".box2").animate({ left: leftWidth },1000).animate({ left: 0 },1000)
        });
        
        
        //javascript + GSAP
        const btn3 = document.querySelector(".start3");
        btn3.addEventListener("click", moveStart);
        function moveStart(){
            TweenMax.to(".box3", 1, { repeat: 1, yoyo: true, left: leftWidth });
        }
        
    </script>
</body>
</html>
sample02
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* option */
        .animation {
            background-color: #f7f7f7;
            border-radius: 3px;
            padding: 20px;
            counter-reset: items;
        }
        h2 {color: #999; font-size: 14px; margin-top: 50px;}
        .box {
            position: relative;
            width: 60px; height: 60px; line-height: 60px;
            text-align: center; color: #fff; font-size: 12px;
            margin: 10px;
            border-radius: 50%;
            background-color: #A2CBFA;
            border: 1px solid #4390E1;
            box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
        }
        .box::before {
            counter-increment: items;
            content: counter(items);
        }
        .btn {margin: 13px 3px 3px 3px;}
        .btn > span, .btn > a {
            color: #3d90b7;
            background: #e7f6fd;
            border: 1px dashed #3d90b7;
            display: inline-block;
            border-radius: 3px;
            padding: 6px 12px;
            text-decoration: none;
            margin: 3px;
            font-size: 14px;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            cursor: pointer;
        }
        .btn > span:hover, 
        .btn > a:hover {text-decoration: underline;}
        
        /* animation */
        .box1:nth-child(1).show {animation: move 2s 1 linear}
        .box1:nth-child(2).show {animation: move 2s 1 ease}
        .box1:nth-child(3).show {animation: move 2s 1 ease-in}
        .box1:nth-child(4).show {animation: move 2s 1 ease-out}
        .box1:nth-child(5).show {animation: move 2s 1 ease-in-out}
        .box1:nth-child(6).show {animation: move 2s 1 step-start}
        .box1:nth-child(7).show {animation: move 2s 1 step-end}
        .box1:nth-child(8).show {animation: move 2s 1 steps(4, start)}
        .box1:nth-child(9).show {animation: move 2s 1 steps(4, end)}
        .box1:nth-child(10).show {animation: move 2s 1 cubic-bezier(0,.6,1,1.72)}
        .box1:nth-child(11).show {animation: move 2s 1 cubic-bezier(1,-0.04,1,-0.94)}
        
        @keyframes move {
            0% {left: 0%;}
            50% {left: calc(100% - 70px);}
            100% {left: 0%;}
        }

    </style>
</head>
<body>
    <h2>CSS Animation</h2> 
    <div class="animation ani1">
        <div class="box box1"></div>
        <div class="box box1"></div>
        <div class="box box1"></div>
        <div class="box box1"></div>
        <div class="box box1"></div>
        <div class="box box1"></div>
        <div class="box box1"></div>
        <div class="box box1"></div>
        <div class="box box1"></div>
        <div class="box box1"></div>
        <div class="box box1"></div>
    </div>
    
    <div class="btn btn1">
        <a href="#" class="reset1">리셋</a>
        <a href="#" class="start1">클릭</a>
    </div>
    
    <h2>jQuery Animation</h2> 
    <div class="animation ani2">
        <div class="box box2"></div>
        <div class="box box2"></div>
        <div class="box box2"></div>
    </div>
    
    <div class="btn btn2">
        <span>linear</span>
        <span>swing</span>
        <span>easeInQuad</span>
        <span>easeOutQuad</span>
        <span>easeInOutQuad</span>
        <span>easeInCubic</span>
        <span>easeOutCubic</span>
        <span>easeInOutCubic</span>
        <span>easeInQuart</span>
        <span>easeOutQuart</span>
        <span>easeInOutQuart</span>
        <span>easeInQuint</span>
        <span>easeOutQuint</span>
        <span>easeInOutQuint</span>
        <span>easeInSine</span>
        <span>easeOutSine</span>
        <span>easeInOutSine</span>
        <span>easeInExpo</span>
        <span>easeOutExpo</span>
        <span>easeInOutExpo</span>
        <span>easeInCirc</span>
        <span>easeOutCirc</span>
        <span>easeInOutCirc</span>
        <span>easeInElastic</span>
        <span>easeOutElastic</span>
        <span>easeInOutElastic</span>
        <span>easeInBack</span>
        <span>easeOutBack</span>
        <span>easeInOutBack</span>
        <span>easeInBounce</span>
        <span>easeOutBounce</span>
        <span>easeInOutBounce</span>
    </div>
    
    <h2>GSAP Animation</h2> 
    <div class="animation ani3">
        <div class="box box3"></div>
        <div class="box box3"></div>
        <div class="box box3"></div>
    </div>
    
    <div class="btn btn3">
        <span>power1.out</span>
        <span>power2.out</span>
        <span>power3.out</span>
        <span>power4.out</span>
        <span>back.out(1.7)</span>
        <span>elastic.out(1, 0.3)</span>
        <span>slow(0.7, 0.7, false)</span>
        <span>steps(12)</span>
        <span>circ.out</span>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script>
    <script>
        $("a").click(function(e){
            e.preventDefault();
        });
        
        //css
        $(".start1").click(function(e){
            $(".box1").addClass("show");
        });
        
        $(".reset1").click(function(e){ 
            $(".box1").removeClass("show");
        });
        
        //jquery
        let leftWidth = $(".animation").width() - 70 + "px";
        
        $(".btn2 > span").click(function(){
            let easing = $(this).text();
            //alert(easing);
            //let easing2 = $(this).attr("data-easing");
            //alert(easing2);
            $(".box2").animate({ left: leftWidth }, 1000, easing).animate({ left: 0 }, 1000, easing);
        });
        
        
        //javascript + gsap
        //const left = document.querySelector(".animation").offsetWidth - 110 + "px";
//        $(".btn3 > span").click(function(){
//            let easing = $(this).text();
//            TweenMax.to(".box3", 1, { repeat: 1, yoyo: true, left: leftWidth, ease: easing});
//        });
        
        let left = document.querySelector(".animation").offsetWidth - 110 + "px";
        
        document.querySelectorAll(".btn3 span").forEach(function(e){
            e.addEventListener("click", function(){
                let text = this.innerText;
                gsap.to(".box3", 1, { repeat: 1, yoyo: true, left: left, ease: text });
            });
        });
    </script>
</body>
</html>
sample03
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* option */
        .animation {
            background-color: #f7f7f7;
            border-radius: 3px;
            padding: 20px;
            counter-reset: items;
        }
        h2 {color: #999; font-size: 14px; margin-top: 50px;}
        .box {
            position: relative;
            width: 60px; height: 60px; line-height: 60px;
            text-align: center; color: #fff; font-size: 12px;
            margin: 10px;
            border-radius: 50%;
            background-color: #A2CBFA;
            border: 1px solid #4390E1;
            box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
        }
        .box::before {
            counter-increment: items;
            content: counter(items);
        }
        .btn {margin: 13px 3px 3px 3px;}
        .btn > span, .btn > a {
            color: #3d90b7;
            background: #e7f6fd;
            border: 1px dashed #3d90b7;
            display: inline-block;
            border-radius: 3px;
            padding: 6px 12px;
            text-decoration: none;
            margin: 3px;
            font-size: 14px;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            cursor: pointer;
        }
        .btn > span:hover, 
        .btn > a:hover {text-decoration: underline;}
        
        /* animation */
        .box1:nth-child(1).show {animation: move 3s .1s 1}
        .box1:nth-child(2).show {animation: move 3s .2s 1}
        .box1:nth-child(3).show {animation: move 3s .3s 1}
        
        @keyframes move {
            0% {left: 0%;}
            50% {left: calc(100% - 70px);}
            100% {left: 0%;}
        }
    </style>
</head>
<body>
    <h2>CSS Animation</h2> 
    <div class="animation ani1">
        <div class="box box1"></div>
        <div class="box box1"></div>
        <div class="box box1"></div>
    </div>
    
    <div class="btn btn1">
        <a href="#" class="reset1">리셋</a>
        <a href="#" class="start1">클릭</a>
    </div>
    
    <h2>jQuery Animation</h2> 
    <div class="animation ani2">
        <div class="box box2"></div>
        <div class="box box2"></div>
        <div class="box box2"></div>
    </div>
    
    <div class="btn btn2">
        <a href="#" class="reset2">리셋</a>
        <a href="#" class="start2">클릭</a>
    </div>
    
    <h2>GSAP Animation</h2> 
    <div class="animation ani3">
        <div class="box box3-1"></div>
        <div class="box box3-2"></div>
        <div class="box box3-3"></div>
    </div>
    
    <div class="btn btn3">
        <a href="#" class="reset3">리셋</a>
        <a href="#" class="start3">클릭</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script>
<!--    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>-->
    <script>
        $("a").click(function(e){
            e.preventDefault();
        });
        
        //css
        $(".start1").click(function(){
            $(".box1").addClass("show");
        });
        
        $(".reset1").click(function(){ 
            $(".box1").removeClass("show");
        });
        
        //jquery
        let leftWidth = $(".animation").width() - 70 + "px";
        let ease = "easeInOutExpo";
        $(".start2").click(function(){
            $(".box2").eq(0).delay(100).animate({ left: leftWidth },1000, ease).animate({ left: 0},1000, ease);
            $(".box2").eq(1).delay(200).animate({ left: leftWidth },1000, ease).animate({ left: 0},1000, ease);
            $(".box2").eq(2).delay(300).animate({ left: leftWidth },1000, ease).animate({ left: 0},1000, ease);
            $(".box2").eq(3).delay(400).animate({ left: leftWidth },1000, ease).animate({ left: 0},1000, ease);
        });
        
        //javascript + gsap
//        const btn3 = document.querySelector(".start3");
//        btn3.addEventListener("click", moveStart);
//        function moveStart(){
//            TweenMax.to(".box3", 1, { repeat: 1, yoyo: true, left: leftWidth });
//        }
        
        //tweenmax
//        document.querySelector(".start3").addEventListener("click", function(){
//            TweenMax.staggerTo(".box3", 1, { repeat: 1, yoyo: true, left: leftWidth }, 0.25);
//        })
        
        let left = document.querySelector(".animation").offsetWidth - 110 + "px";
        let easing = "power4.out";
        document.querySelector(".start3").addEventListener("click", function(){
            gsap.to(".box3-1", 1, {repeat: 1, yoyo: true, left: left, ease: easing});
            gsap.to(".box3-2", 1, {repeat: 1, yoyo: true, left: left, delay: .5, ease: easing});
            gsap.to(".box3-3", 1, {repeat: 1, yoyo: true, left: left, delay: 1, ease: easing});
        })
        
        
    </script>
</body>
</html>
sample04
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* option */
        .animation {
            background-color: #f7f7f7;
            border-radius: 3px;
            padding: 20px;
            counter-reset: items;
            height: 300px;
        }
        h2 {color: #999; font-size: 14px; margin-top: 50px;}
        .box {
            position: relative;
            width: 60px; height: 60px; line-height: 60px;
            text-align: center; color: #fff; font-size: 12px;
            margin: 10px;
            border-radius: 50%;
            background-color: #A2CBFA;
            border: 1px solid #4390E1;
            box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
        }
        .box::before {
            counter-increment: items;
            content: counter(items);
        }
        .btn {margin: 13px 3px 3px 3px;}
        .btn > span, .btn > a {
            color: #3d90b7;
            background: #e7f6fd;
            border: 1px dashed #3d90b7;
            display: inline-block;
            border-radius: 3px;
            padding: 6px 12px;
            text-decoration: none;
            margin: 3px;
            font-size: 14px;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            cursor: pointer;
        }
        .btn > span:hover, 
        .btn > a:hover {text-decoration: underline;}
        
        /* animation */
        .box1.show {animation: move 2s .1s}
        
        @keyframes move {
            0% {left: 0; top: 0; }
            25% {left: calc(100% - 70px); top: 0; }
            50% {left: calc(100% - 70px); top: calc(100% - 80px); }
            75% {left: 0; top: calc(100% - 80px); }
            100% {left: 0; top: 0; }
        }
    </style>
</head>
<body>
    <h2>CSS Animation</h2> 
    <div class="animation ani1">
        <div class="box box1"></div>
    </div>
    
    <div class="btn btn1">
        <a href="#" class="reset1">리셋</a>
        <a href="#" class="start1">클릭</a>
    </div>
    
    <h2>jQuery Animation</h2> 
    <div class="animation ani2">
        <div class="box box2"></div>
    </div>
    
    <div class="btn btn2">
        <a href="#" class="reset2">리셋</a>
        <a href="#" class="start2">클릭</a>
    </div>
    
    <h2>GSAP Animation</h2> 
    <div class="animation ani3">
        <div class="box box3"></div>
    </div>
    
    <div class="btn btn3">
        <a href="#" class="reset3">리셋</a>
        <a href="#" class="start3">클릭</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script>
<!--    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>-->
    <script>
        $("a").click(function(e){
            e.preventDefault();
        });
        
        //css
        $(".start1").click(function(){
            $(".box1").addClass("show");
        });
        
        $(".reset1").click(function(){ 
            $(".box1").removeClass("show");
        });
        
        //jquery
        let leftWidth = $(".animation").width() - 70 + "px";
        let leftHeight = $(".animation").height() - 80 + "px";
        let ease = "easeInOutExpo";
        $(".start2").click(function(){
            $(".box2")
                .animate({ left: leftWidth }, 500, ease)
                .animate({ top: leftHeight }, 500, ease)
                .animate({ left: 0 }, 500, ease)
                .animate({ top: 0 }, 500, ease)
        });
        
        //javascript + gsap
        let left = document.querySelector(".animation").offsetWidth - 110 + "px";
        let height = document.querySelector(".animation").offsetHeight - 110 + "px";
        let easing = "power4.out";
        
        document.querySelector(".start3").addEventListener("click", function(){
            const tl = new TimelineMax();
            tl.to(".box3", 0.5, {left: left, ease: easing});
            tl.to(".box3", 0.5, {top: height, ease: easing});
            tl.to(".box3", 0.5, {left: 0, ease: easing});
            tl.to(".box3", 0.5, {top: 0, ease: easing});
        })
    </script>
</body>
</html>
sample05
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* option */
        .animation {
            background-color: #f7f7f7;
            border-radius: 3px;
            padding: 20px;
            counter-reset: items;
        }
        h2 {color: #999; font-size: 14px; margin-top: 50px;}
        .box {
            position: relative;
            width: 60px; height: 60px; line-height: 60px;
            text-align: center; color: #fff; font-size: 12px;
            margin: 10px;
            border-radius: 50%;
            background-color: #A2CBFA;
            border: 1px solid #4390E1;
            box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
        }
        .box::before {
            counter-increment: items;
            content: counter(items);
        }
        .btn {margin: 13px 3px 3px 3px;}
        .btn > span, .btn > a {
            color: #3d90b7;
            background: #e7f6fd;
            border: 1px dashed #3d90b7;
            display: inline-block;
            border-radius: 3px;
            padding: 6px 12px;
            text-decoration: none;
            margin: 3px;
            font-size: 14px;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            cursor: pointer;
        }
        .btn > span:hover, 
        .btn > a:hover {text-decoration: underline;}
        
        /* animation */
        .box1:nth-child(1).show {animation: move 2s 1}
        .box1:nth-child(2).show {animation: move 2s 2}
        .box1:nth-child(3).show {animation: move 2s 3}
        .box1:nth-child(4).show {animation: move 2s infinite}
        
        @keyframes move {
            0% {left: 0%;}
            50% {left: calc(100% - 70px);}
            100% {left: 0%;}
        }
    </style>
</head>
<body>
    <h2>CSS Animation</h2> 
    <div class="animation ani1">
        <div class="box box1"></div>
        <div class="box box1"></div>
        <div class="box box1"></div>
        <div class="box box1"></div>
    </div>
    
    <div class="btn btn1">
        <a href="#" class="reset1">리셋</a>
        <a href="#" class="start1">클릭</a>
    </div>
    
    <h2>jQuery Animation</h2> 
    <div class="animation ani2">
        <div class="box box2"></div>
        <div class="box box2"></div>
        <div class="box box2"></div>
        <div class="box box2"></div>
    </div>
    
    <div class="btn btn2">
        <a href="#" class="start2-1">무한 반복하기</a>
        <a href="#" class="start2-2">반복적 움직이기</a>
        <a href="#" class="start2-3">한번 움직이기</a>
    </div>
    
    <h2>GSAP Animation</h2> 
    <div class="animation ani3">
        <div class="box box3 box3-1"></div>
        <div class="box box3 box3-2"></div>
        <div class="box box3 box3-3"></div>
        <div class="box box3 box3-4"></div>
    </div>
    
    <div class="btn btn3">
        <a href="#" class="start3-1">한번 움직이기</a>
        <a href="#" class="start3-2">두번 움직이기</a>
        <a href="#" class="start3-3">무한 움직이기</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script>
<!--    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>-->
    <script>
        $("a").click(function(e){
            e.preventDefault();
        });
        
        //css
        $(".start1").click(function(){
            $(".box1").addClass("show");
        });
        
        $(".reset1").click(function(){ 
            $(".box1").removeClass("show");
        });
        
        //jquery
        let leftWidth = $(".animation").width() - 70 + "px";
        let ease = "easeInOutExpo";
        
        $(".start2").click(function(){
            $(".box2").animate({ left: leftWidth }, 1000, ease).animate({ left: 0 }, 1000, ease);
        });
        
        $(".start2-1").click(function(){
            loop();
        });
        function loop(){
            $(".box2").animate({ left: leftWidth }, 1000, ease).animate({ left: 0 }, 1000, ease, loop);
        };
        
        $(".start2-2").click(function(){
            setInterval(time1, 3000);
        });
        function time1(){
            $(".box2").animate({ left: leftWidth }, 1000, ease).animate({ left: 0 }, 1000, ease);
        };
        
        $(".start2-3").click(function(){
            $(".box2").animate({ left: leftWidth }, 1000, ease).animate({ left: 0 }, 1000, ease);
            setTimeout(time2, 3000);
        });
        function time2(){
            $(".box2").clearQueue();
        };
        
        
        //javascript + gsap
        let left = document.querySelector(".animation").offsetWidth - 110 + "px";
        let easing = "power4.out";
        
//        document.querySelector(".start3-1").addEventListener("click", function(){
//            gsap.to(".box3-1", 1, {repeat: 1, yoyo: true, left: left, ease: easing});
//            gsap.to(".box3-2", 1, {repeat: 2, yoyo: true, left: left, ease: easing});
//            gsap.to(".box3-3", 1, {repeat: 3, yoyo: true, left: left, ease: easing});
//            gsap.to(".box3-4", 1, {repeat: 4, yoyo: true, left: left, ease: easing});
//        })
        
        document.querySelector(".start3-1").addEventListener("click", function(){
            const tl = new TimelineMax();
            tl.to(".box3", {x: left, duration: 1, ease: easing});
            tl.to(".box3", {x: 0,  duration: 1, ease: easing});
        })
        
        document.querySelector(".start3-2").addEventListener("click", function(){
            const tl = new TimelineMax({repeat: 1});
            tl.to(".box3", {x: left, duration: 1, ease: easing});
            tl.to(".box3", {x: 0,  duration: 1, ease: easing});
        })
        
        document.querySelector(".start3-3").addEventListener("click", function(){
            const tl = new TimelineMax({repeat: -1});
            tl.to(".box3", {x: left, duration: 1, ease: easing});
            tl.to(".box3", {x: 0,  duration: 1, ease: easing});
        })
        
    </script>
</body>
</html>
sample06
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* option */
        .animation {
            background-color: #f7f7f7;
            border-radius: 3px;
            padding: 20px;
            counter-reset: items;
            height: 300px;
        }
        h2 {color: #999; font-size: 14px; margin-top: 50px;}
        .box {
            position: relative;
            width: 60px; height: 60px; line-height: 60px;
            text-align: center; color: #fff; font-size: 12px;
            margin: 10px;
            border-radius: 50%;
            background-color: #A2CBFA;
            border: 1px solid #4390E1;
            box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
        }
        .box::before {
            counter-increment: items;
            content: counter(items);
        }
        .btn {margin: 13px 3px 3px 3px;}
        .btn > span, .btn > a {
            color: #3d90b7;
            background: #e7f6fd;
            border: 1px dashed #3d90b7;
            display: inline-block;
            border-radius: 3px;
            padding: 6px 12px;
            text-decoration: none;
            margin: 3px;
            font-size: 14px;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            cursor: pointer;
        }
        .btn > span:hover, 
        .btn > a:hover {text-decoration: underline;}
        
        /* animation */
        .box1.running {animation: move 2s infinite; animation-play-state: running;}
        .box1 {animation: move 2s infinite; animation-play-state: paused;}
        
        @keyframes move {
            0% {left: 0; top: 0; }
            25% {left: calc(100% - 70px); top: 0; }
            50% {left: calc(100% - 70px); top: calc(100% - 80px); }
            75% {left: 0; top: calc(100% - 80px); }
            100% {left: 0; top: 0; }
        }
    </style>
</head>
<body>
    <h2>CSS Animation</h2> 
    <div class="animation ani1">
        <div class="box box1"></div>
    </div>
    
    <div class="btn btn1">
        <a href="#" class="reset1">paused</a>
        <a href="#" class="start1">running</a>
    </div>
    
    <h2>jQuery Animation</h2> 
    <div class="animation ani2">
        <div class="box box2"></div>
    </div>
    
    <div class="btn btn2">
        <a href="#" class="reset2">paused</a>
        <a href="#" class="start2">running</a>
    </div>
    
    <h2>GSAP Animation</h2> 
    <div class="animation ani3">
        <div class="box box3"></div>
    </div>
    
    <div class="btn btn3">
        <a href="#" class="reset3">pause() </a>
        <a href="#" class="start3-1">play() </a>
        <a href="#" class="start3-2">resume() </a>
        <a href="#" class="start3-3">reverse() </a>
        <a href="#" class="start3-4">seek(0.5)</a>
        <a href="#" class="start3-5">timeScale(0.5)</a>
        <a href="#" class="start3-6">timeScale(2)</a>
        <a href="#" class="start3-7">kill() </a>
        <a href="#" class="start3-8">restart() </a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script>
<!--    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>-->
    <script>
        $("a").click(function(e){
            e.preventDefault();
        });
        
        //css
        $(".start1").click(function(){
            $(".box1").addClass("running");
        });
        
        $(".reset1").click(function(){ 
            $(".box1").removeClass("running");
        });
        
        //jquery
        let leftWidth = $(".animation").width() - 70 + "px";
        let leftHeight = $(".animation").height() - 80 + "px";
        let ease = "easeInOutExpo";
        
        $(".start2").click(function(){
            $(".box2")
                .animate({ left: leftWidth }, 500, ease)
                .animate({ top: leftHeight }, 500, ease)
                .animate({ left: 0 }, 500, ease)
                .animate({ top: 0 }, 500, ease)
        });
        $(".reset2").click(function(){
            $(".box2").stop();
        });

        //javascript + gsap
        let left = document.querySelector(".animation").offsetWidth - 110 + "px";
        let height = document.querySelector(".animation").offsetHeight - 110 + "px";
        let easing = "power4.out";
        
        const tl = new TimelineMax({repeat:-1});
        tl.to(".box3", 0.5, {left: left, ease: easing});
        tl.to(".box3", 0.5, {top: height, ease: easing});
        tl.to(".box3", 0.5, {left: 0, ease: easing});
        tl.to(".box3", 0.5, {top: 0, ease: easing});
        
        tl.pause();
        document.querySelector(".reset3").addEventListener("click", function(){ tl.pause() });
        document.querySelector(".start3-1").addEventListener("click", function(){ tl.play() });
        document.querySelector(".start3-2").addEventListener("click", function(){ tl.resume() });
        document.querySelector(".start3-3").addEventListener("click", function(){ tl.reverse() });
        document.querySelector(".start3-4").addEventListener("click", function(){ tl.seek(0.5) });
        document.querySelector(".start3-5").addEventListener("click", function(){ tl.timeScale(0.5) });
        document.querySelector(".start3-6").addEventListener("click", function(){ tl.timeScale(2) });
        document.querySelector(".start3-7").addEventListener("click", function(){ tl.kill() });
        document.querySelector(".start3-8").addEventListener("click", function(){ tl.restart() });
    </script>
</body>
</html>
sample07
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* option */
        .animation {
            background-color: #f7f7f7;
            border-radius: 3px;
            padding: 20px;
            counter-reset: items;
        }
        h2 {color: #999; font-size: 14px; margin-top: 50px;}
        .box {
            position: relative;
            width: 60px; height: 60px; line-height: 60px;
            text-align: center; color: #fff; font-size: 12px;
            margin: 10px;
            border-radius: 50%;
            background-color: #A2CBFA;
            border: 1px solid #4390E1;
            box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
        }
        .box::before {
            counter-increment: items;
            content: counter(items);
        }
        .btn {margin: 13px 3px 3px 3px;}
        .btn > span, .btn > a {
            color: #3d90b7;
            background: #e7f6fd;
            border: 1px dashed #3d90b7;
            display: inline-block;
            border-radius: 3px;
            padding: 6px 12px;
            text-decoration: none;
            margin: 3px;
            font-size: 14px;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            cursor: pointer;
        }
        .btn > span:hover, 
        .btn > a:hover {text-decoration: underline;}
        
        /* animation */
        .box1.animation1 {animation: move1 4s;}
        .box1.animation2 {animation: move2 4s;}
        .box1.animation3 {animation: move3 4s;}
        
        @keyframes move1 {
            0%   {left: 0; top: 0; border-radius: 50%; background-color: #A2CBFA; border-color: #4390E1} 
            50%  {left: calc(100% - 70px); top: 0; border-radius: 0; background-color: #faa2cb; border-color: #e14360}
            100% {left: 0; top: 0; border-radius: 50%; background-color: #A2CBFA; border-color: #4390E1}
        }
        
    </style>
</head>
<body>
    <h2>CSS Animation</h2> 
    <div class="animation ani1">
        <div class="box box1"></div>
        <div class="box box1"></div>
        <div class="box box1"></div>
    </div>
    
    <div class="btn btn1">
        <a href="#" class="start1-1">animation1</a>
        <a href="#" class="start1-2">animation2</a>
        <a href="#" class="start1-2">animation3</a>
    </div>
    
    <h2>jQuery Animation</h2> 
    <div class="animation ani2">
        <div class="box box2"></div>
        <div class="box box2"></div>
        <div class="box box2"></div>
    </div>
    
    <div class="btn btn2">
        <a href="#" class="start2-1">animation1</a>
        <a href="#" class="start2-2">animation2</a>
        <a href="#" class="start2-2">animation3</a>
    </div>
    
    <h2>GSAP Animation</h2> 
    <div class="animation ani3">
        <div class="box box3"></div>
        <div class="box box3"></div>
        <div class="box box3"></div>
    </div>
    
    <div class="btn btn3">
        <a href="#" class="start3-1">animation1</a>
        <a href="#" class="start3-2">animation2</a>
        <a href="#" class="start3-2">animation3</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script>
<!--    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>-->
    <script>
        $("a").click(function(e){
            e.preventDefault();
        });
        
        //css       
        $(".btn1 a").click(function(){ 
            var text = $(this).text();
            //alert(text);
            $(".box1").removeClass().addClass("box box1").addClass(text);
        });
        
        //jquery
        let leftWidth = $(".animation").width() - 70 + "px";
        $(".start2-1").click(function(){
            $(".box2")
                .animate({ left: leftWidth , borderRadius: 0, backgroundColor :"#faa2cb", borderColor: "#e14360"}, 2000, "easeOutQuint")
                .animate({ left: 0 , borderRadius: "50%", backgroundColor: "#A2CBFA", borderColor: "#4390E1"}, 2000, "easeOutQuint")

        });
        
        $(".start2-2").click(function(){
            $(".box2")
                .animate({ left: "0%", borderRadius:"0%"},1000,"easeOutQuint")
                .animate({left: "80%", borderRadius:"20%"},1500,"easeOutBounce")
                .animate({ left:"40%" , borderRadius:"40%"},1500,"easeOutBounce").animate({ left:"0" },1000,"easeOutQuint")
                .animate({ width: 90, opacity:1, borderRadius:"50%" , opacity: 0.7 },"slow","easeOutCirc")
                .animate({ left: "0%", width: 150, height: 150, opacity: 0.3 ,borderRadius:"50%"},1500, "easeOutCirc")
                .animate({ left: "0%", width: 60, height: 60, opacity: 1 },1000, "easeOutQuint")
        });
        
        //javascript
        let left = document.querySelector(".animation").offsetWidth - 110 + "px";
        let easing = "power4.out";
        
        document.querySelector(".start3-1").addEventListener("click", function(){
            const tl = new TimelineMax();
            tl.to(".box3", {x: left, borderRadius: 0, duration: 2, backgroundColor :"#faa2cb", borderColor: "#e14360", ease: easing});
            tl.to(".box3", {x: 0,  borderRadius: "50%", duration: 2, backgroundColor: "#A2CBFA", borderColor: "#4390E1", ease: easing});
        })
        
        document.querySelector(".start3-2").addEventListener("click", function(){
            const tl = new TimelineMax();
            tl.to(".box3", 1, {left: "80%", scale: "0.5", rotation:"100deg" });
            tl.to(".box3", 2, {left: "0%", opacity: 0.5, skewY: "720deg", rotation:"300deg", scale: "1" });
            tl.to(".box3", 1, {left: "90%", rotation:"1000deg" , borderRadius: "0%", scale: "0.5", backgroundImage: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)"});
            tl.to(".box3", 1, {rotation:"-2000deg"});
            tl.to(".box3", 1, {opacity:1, left: "0", scale: "1", rotation:"-0deg", borderRadius: "50%", backgroundImage: "linear-gradient(135deg, #A2CBFA 0%, #A2CBFA 100%)"});
        }) 
    </script>
</body>
</html>

AD

comments