• 원본 소스보기 : [Studio Meal]
  • [BACK] [1] [2] [3]
















    CSS Tag

    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
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    
      body { margin: 0; }
    
      .content {
        position: absolute;
        top: 335px;
        left: 0px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 15px;
        color: #0083e8;
        line-height: 1.5;
        margin: 0 auto;
        max-width: 800px;
        padding: 2em 2em 4em;
      }
    
      .DORAEMON {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 300px;
        height: 400px;
        background: url('/images/docs_img/doraemon_01.jpeg') no-repeat 50% 50%;
        background-size: contain;
        transform: translate(-50%, -50%);
      }
    
      .eyeballs {
        display: flex;
        position: absolute;
        top: 70px;
        left: 95px;
      }
    
      .eyeball {
        position: relative;
        width: 60px;
        height: 60px;
        border: 2px solid black;
        border-radius: 50%;
        background-color: white;
        transform: scaleX(0.9);
      }
    
      .eyeball-left {
        left: 3px;
      }
    
      .eyeball-right {
        left: -4px;
      }
    
      .pupil {
        position: absolute;
        left: 20px;
        bottom: 0;
        width: 20px;
        height: inherit;
      }
    
      .pupil:before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        width: inherit;
        height: 20px;
        border-radius: 50%;
        background-color: black;
      }
    
      .pupil:after {
        content: '';
        display: block;
        position: absolute;
        left: 11px;
        bottom: 11px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: white;
      }
    
      .pre-small  {
        font-size: 0.8em;
        padding: 0px 0px 0px 50px;
        color: $gray;
        background-color: $lightGray;
      }
    

    JavaScript Tag

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    
        var eyeBall = function(selector) {
          var eye = document.querySelector(selector),
            pupil = eye.querySelector('.pupil'),
            rangeOfEye = eye.getBoundingClientRect();
    
          var getPupilRoll = function(mouseX, mouseY) {
            var radian = Math.atan2(
              mouseY - (rangeOfEye.y + rangeOfEye.height * 0.5),
              mouseX - (rangeOfEye.x + rangeOfEye.width * 0.5));
            pupil.style.transform = 'rotate(' + (180 * radian / Math.PI - 90) + 'deg)';
          };
    
          return {
            getPupilRoll: getPupilRoll
          };
        };
    
        var eyeLeft = eyeBall('.eyeball-left');
        var eyeRight = eyeBall('.eyeball-right');
    
        window.addEventListener('mousemove', function(e) {
          eyeLeft.getPupilRoll(e.pageX, e.pageY);
          eyeRight.getPupilRoll(e.pageX, e.pageY);
        });