mouseEffect08

https://garenchoi.github.io/webs_class/javascript/effect/mouseEffect08.html

마우스 이펙트

 

 

8번째 마우스 이펙트는 수업으로 만들지 않고 혼자 만들었다. (코드펜을 많이 참고함.)

랜덤으로 색을 뽑는 코드를 알게 됐다.

var shapes = [
          'circle',
          'square',
          'triangle'
        ];

        // create array of colors
        var colors = [
          '#A32734',
          '#195259',
          '#C38542'
        ]

        // Function that will randomize two numbers
        function getRandom(lower, upper){
          var randomNumber = Math.round(Math.random()*(upper - lower) + lower);
          return randomNumber;
        }

        var amount = 300;
        // append chosen number of shapes
        for (var i = 0; i < amount; i++){
          var color = colors[getRandom(0, 2)];

          $('.container').append('<div class="shape shape-' + i + ' ' + shapes[getRandom(0, 2)] + '" style="background-color: ' + color +  '; border: 2px solid ' + color + '"></div>');

        }

        for (var i = 0; i < amount; i++){
          TweenMax.to($('.shape-' + i), 0.5, {delay: Math.random(),x: getRandom(-200, 200), y: getRandom(-200, 200), opacity: 0, repeat:-1, ease: Power2.easeOut});
        }

        $(document).bind('mousemove', function(e){
            $('.container').css({
               left:  e.pageX,
               top:   e.pageY
            });
        });

        $('.mouse__text').mouseenter(function(){
            $('body').removeClass('img09');
            $('body').addClass('img10');
            $('.mouse__text p').css('filter','blur(0)');
        })
        $('.mouse__text').mouseleave(function(){
            $('body').removeClass('img10');
            $('body').addClass('img09');
            $('.mouse__text p').css('filter','blur(3px)');
        })

        let randC = [
            '#A32734',
            '#195259',
            '#C38542',
            'rgb(44 89 25)',
            'rgb(167 30 156)',
            'rgb(94 91 94)',
            '#fff'
        ]

        $('.mouse__text p').mouseenter(function(){
            let randColor = randC[getRandom(0, 6)];
            gsap.to($(this), {duration:0.5, scale: 1.6, color: randColor})
        })
        $('.mouse__text p').mouseleave(function(){
            gsap.to($(this), {duration:0.5, scale: 1})
        })