滑鼠光暈 | 程式專案 | 橘蘋學習平台

{"id":174171,"student_id":12205,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\r\\n\u003chtml lang=\\\"en\\\" dir=\\\"ltr\\\"\u003e\\r\\n  \u003chead\u003e\\r\\n    \u003cmeta charset=\\\"utf-8\\\"\u003e\\r\\n    \u003ctitle\u003e\u003c/title\u003e\\r\\n  \\r\\n    \u003cstyle media=\\\"screen\\\" type=\\\"text/css\\\"\u003e\\r\\n\\r\\n      :root{\\r\\n        --radius: 40px;\\r\\n        --mouse-x;\\r\\n        --mouse-y;\\r\\n        --factor: 1;\\r\\n        --scale;\\r\\n      }\\r\\n\\r\\n      body{\\r\\n        background-color: black;\\r\\n      }\\r\\n\\r\\n      #ball{\\r\\n        width: var(--radius);\\r\\n        height:  var(--radius);\\r\\n        border-radius:50%;\\r\\n        background-color:#fbd771;\\r\\n        position: absolute;\\r\\n        transform: translate(calc(var(--mouse-x) * 1px - var(--radius)/2),  calc(var(--mouse-y) * 1px - var(--radius)/2) );\\r\\n\\r\\n      }\\r\\n\\r\\n      .halo{\\r\\n        width: var(--radius);\\r\\n        height:  var(--radius);\\r\\n        border-radius:50%;\\r\\n        background-color:#fbd771;\\r\\n        opacity: 0.15;\\r\\n        transform: scale(calc(var(--factor)*var(--scale)));\\r\\n        position: absolute;\\r\\n      }\\r\\n\\r\\n      .halo:nth-of-type(1){\\r\\n        --factor:0.3;\\r\\n      }\\r\\n\\r\\n      .halo:nth-of-type(2){\\r\\n        --factor:0.5;\\r\\n      }\\r\\n\\r\\n      .halo:nth-of-type(3){\\r\\n        --factor:0.9;\\r\\n      }\\r\\n\\r\\n    \u003c/style\u003e\\r\\n\\r\\n  \u003c/head\u003e\\r\\n\\r\\n  \u003cbody\u003e\\r\\n    \u003cdiv id=\\\"ball\\\"\u003e\\r\\n      \u003cdiv class=\\\"halo\\\"\u003e\u003c/div\u003e\\r\\n      \u003cdiv class=\\\"halo\\\"\u003e\u003c/div\u003e\\r\\n      \u003cdiv class=\\\"halo\\\"\u003e\u003c/div\u003e\\r\\n    \u003c/div\u003e\\r\\n\\r\\n    \u003cscript type=\\\"text/javascript\\\" src=\\\"javascript/script.js\\\"\u003e\u003c/script\u003e\\r\\n\\r\\n  \u003c/body\u003e\\r\\n\u003c/html\u003e\\r\\n\",\"css\":\"/* 設定整個頁面內容水平置中、內寬為 30 像素：*/\\nbody {\\n    text-align: center;\\n    padding: 30px;\\n}\\n\\n/* 設定圖片的寬度為銀幕一半寬 */\\nimg {    \\n    max-width: 50%; \\n}\\n\\n/* 設定文字的顏色為淡黑色 */\\np {\\n    color: #555555;\\n}\",\"js\":\"var ball_X=0;\\r\\nvar ball_Y=0;\\r\\nvar mouse_X =0;\\r\\nvar mouse_Y =0;\\r\\nvar vel_x = 0;\\r\\nvar vel_y = 0;\\r\\n\\r\\nconst docStyle = document.documentElement.style;\\r\\nconst strength = 0.15;\\r\\nconst drag = 0.15;\\r\\ndocument.addEventListener(\\\"mousemove\\\",(event) =\u003e {\\r\\n  mouse_X = event.clientX;\\r\\n  mouse_Y = event.clientY;\\r\\n});\\r\\n\\r\\nfunction delayMotion(){\\r\\n\\r\\n  var distance_x = mouse_X - ball_X;\\r\\n  distance_x *= strength;\\r\\n  vel_x *= drag;\\r\\n  vel_x += distance_x;\\r\\n\\r\\n  ball_X += vel_x;\\r\\n  var distance_y = mouse_Y - ball_Y;\\r\\n  distance_y *= strength;\\r\\n  vel_y *= drag;\\r\\n  vel_y += distance_y;\\r\\n  ball_Y += vel_y;\\r\\n  docStyle.setProperty(\\\"--mouse-x\\\",  ball_X);\\r\\n  docStyle.setProperty(\\\"--mouse-y\\\",  ball_Y);\\r\\n  docStyle.setProperty(\\\"--scale\\\", (vel_x + vel_y)*strength);\\r\\n  requestAnimationFrame(delayMotion);\\r\\n}\\r\\n\\r\\ndelayMotion();\"}","created_at":"2020-07-31T16:11:06.056+08:00","updated_at":"2020-08-14T14:08:31.796+08:00","name":"滑鼠光暈","language":"web","screenshot":{"url":"https://cdn6.koding.school/uploads/project/screenshot/174171/c693154d9cbdf6d287c5d417af8a8dc2.jpg"},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":52,"hashid":"882s8g68","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}