· 즐거'웅' 코드 (Source)/HTML & CSS & JAVASCRIPT

(즐거웅코드) 마우스 위치에 따라 움직이는 도형(백그라운드) 구현하기

즐거 '웅' 인생 2021. 9. 29. 20:12
반응형

[즐거'웅'코드] 목차

  1. 리소스
  2. 예제 소스
  3. 구현 예시
리소스
리소스.zip
8.4 kB
예제 소스
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
 
<style>
    .shape { position:absolute; left: 0; right: 0; margin: 0 auto; top: 0; width: 100%; height: 100vh; overflow: hidden; }
    .shape [class*="layer"] { position: absolute; }
    .shape #item_0 { left: 40%; top: 30%; width: 52px; height: 52px; background: url('/images/shape_1.png') no-repeat center center/contain; }
    .shape #item_1 { left: 31%; top: 33%; width: 52px; height: 52px; background: url('/images/shape_2.png') no-repeat center center/contain; }
    .shape #item_2 { left: 15%; top: 17%; width: 30px; height: 30px; background: url('/images/shape_3.png') no-repeat center center/contain; }
    .shape #item_3 { left: 5%; top: 90%; width: 96px; height: 96px; background: url('/images/shape_4.png') no-repeat center center/contain; }
    .shape #item_4 { left: 75%; top: 55%; width: 56px; height: 56px; background: url('/images/shape_5.png') no-repeat center center/contain; }
    .shape #item_5 { left: 68%; top: 15%; width: 70px; height: 70px; background: url('/images/shape_2.png') no-repeat center center/contain; }
    .shape #item_6 { left: 93%; top: 8%; width: 96px; height: 96px; background: url('/images/shape_1.png') no-repeat center center/contain; }
    .shape #item_7 { left: 60%; top: 40%; width: 30px; height: 30px; background: url('/images/shape_3.png') no-repeat center center/contain; }
    .shape #item_8 { left: 66%; top: 80%; width: 96px; height: 96px; background: url('/images/shape_4.png') no-repeat center center/contain; }
    .shape #item_9 { left: 90%; top: 90%; width: 96px; height: 96px; background: url('/images/shape_5.png') no-repeat center center/contain; }
</style>
 
<div class="shape"></div>
 
<script>
    var shape_cnt = 10;
    var $shape = $(".shape");
    var mouseX, mouseY, time_1 = 1, time_2 = 2, density = 10;
 
    for (var i = 0; i < shape_cnt; i++) {
        if (i % 2) {
            $("<div/>", {id: "item_" + i}).addClass("layer1").appendTo($shape);
        } else {
            $("<div/>", {id: "item_" + i}).addClass("layer2").appendTo($shape);
        }
    }
 
    function shape_move(e) {
        mouseX = e.pageX / density;
        mouseY = e.pageY / density;
        TweenLite.to(".layer1", time_1, {x: mouseX, y: -mouseY, ease: Power4.easeOut}),
            TweenLite.to(".layer2", time_2, {x: -mouseX, y: mouseY, ease: Power4.easeOut});
    }
 
    $('body').on('mousemove', shape_move);
</script>
구현 예시
반응형
저작자표시