자유게시판
test
2021.11.28
715
johyojun

OFF      (function () { var msg = '○'; //★마우스 스토커 효과를 낼 문장을 넣는다 var colour = 'random'; //★문자색 지정 'random'으로 지정했으나, 여기에 색상을 지정하면 지정한 색상으로 문장이 표기된다. //★「1은 빨간색 계열로 랜덤색상」「2는 녹색 계열로 랜덤색상」「3은 파란색 계열로 랜덤색상」「4는 무지개색 계열로 랜덤색상」「5는 회색 계열로 랜덤색상」「0」은 검정색으로 지정 var r_mode = 4; var fs = 30; //★문자 크기 조정. 단위px var sc = 0.8; //★마우스가 정지했을 째 문자 사이의 폭 지정 var ft = ''; //★문자 서체를 지정. 지정하지 않을 경우 var ft='';으로 var delay = 0.5; //★문자가 흔들리는 정도. 1미만으로 지정 Must be less than 1!! var speed = 60; //★문자 속도 setTimeout - run speed var hy = 20; //★마우스와 문자간 상하 거리 조정. 마이너스로 문자가 위 var hx = 20; //★마우스와 문자간 좌우 거리 조정. 마이너스로 문자가 좌 /*★↓문자 그림자 설정을 CSS형식으로 지정. 여기선 검정 그림자 지정. 지정할 필요가 없으면var fcss='';로 한다*/ var fcss = 'text-shadow:1px 1px 1px #000;'; var toggleFollow = false; // true: 따라다님 / false: 따라다니지 않음 //End user config.-------------------------------------------------- msg = msg.split(''); var n = msg.length; var y = 0, x = 0, yp = [], xp = [], yd = [], xd = [], temp = [], scy = 0, scx = 0, i = 0; for (i = 0; i < n; i++) { document.write("" + msg[i] + "<\/span>"); } document.onmousemove = function (e) { y = e.pageY + hy; x = e.pageX + hx; } function assign() { var h = window.pageYOffset + window.innerHeight - fs - hy - 18; for (i = 0; i < n; i++) { temp[i].top = Math.min(h, yp[i]) + 'px'; temp[i].left = xp[i] + (i * (fs * sc)) + 'px'; } } function ripple() { if (!toggleFollow) return; yp[0] = yd[0] += (y - yd[0]) * delay; xp[0] = xd[0] += (x - xd[0]) * delay; for (var i = 1; i < n; i++) { yp[i] = yd[i] += (yp[i - 1] - yd[i]) * delay; xp[i] = xd[i] += (xp[i - 1] - xd[i]) * delay; } assign(); setTimeout(ripple, speed); } function newColour() { /*■문자 지정색 추가*/ var c = [Math.floor(Math.random() * 256), Math.floor(Math.random() * 256)]; if (r_mode === 1) { return ('rgb(255,' + c[0] + ',' + c[1] + ')'); } //빨강색 else if (r_mode === 2) { return ('rgb(' + c[0] + ',255,' + c[1] + ')'); } //초록색 else if (r_mode === 3) { return ('rgb(' + c[0] + ',' + c[1] + ',255)'); } //파란색 else if (r_mode === 4) { var cc = []; cc[0] = 255; cc[1] = Math.floor(Math.random() * 256); cc[2] = Math.floor(Math.random() * (256 - cc[1] / 2)); cc.sort(function () { return (0.5 - Math.random()); }); return ('rgb(' + cc[0] + ',' + cc[1] + ',' + cc[2] + ')'); } //무지개색 else if (r_mode === 5) { return ('rgb(' + c[0] + ',' + c[0] + ',' + c[0] + ')'); } //회색 else if (r_mode === 0) { document.getElementById('letters' + i).style.color = colour; } } function init() { for (i = 0; i < n; i++) { yp[i] = xp[i] = yd[i] = xd[i] = 0; temp[i] = document.getElementById('letters' + i).style; temp[i].color = (colour == 'random') ? newColour() : colour; //■문자색 지정 추가 } ripple(); } var toggleButton = document.getElementById('toggle'); toggleButton.addEventListener('click', function () { toggleFollow = !toggleFollow; if (toggleFollow === true) { init(); toggleButton.innerText = '>" + msg[i] + "<\/span>"); } document.onmousemove = function (e) { y = e.pageY + hy; x = e.pageX + hx; } function assign() { var h = window.pageYOffset + window.innerHeight - fs - hy - 18; for (i = 0; i < n; i++) { temp[i].top = Math.min(h, yp[i]) + 'px'; temp[i].left = xp[i] + (i * (fs * sc)) + 'px'; } } function ripple() { if (!toggleFollow) return; yp[0] = yd[0] += (y - yd[0]) * delay; xp[0] = xd[0] += (x - xd[0]) * delay; for (var i = 1; i < n; i++) { yp[i] = yd[i] += (yp[i - 1] - yd[i]) * delay; xp[i] = xd[i] += (xp[i - 1] - xd[i]) * delay; } assign(); setTimeout(ripple, speed); } function newColour() { /*■문자 지정색 추가*/ var c = [Math.floor(Math.random() * 256), Math.floor(Math.random() * 256)]; if (r_mode === 1) { return ('rgb(255,' + c[0] + ',' + c[1] + ')'); } //빨강색 else if (r_mode === 2) { return ('rgb(' + c[0] + ',255,' + c[1] + ')'); } //초록색 else if (r_mode === 3) { return ('rgb(' + c[0] + ',' + c[1] + ',255)'); } //파란색 else if (r_mode === 4) { var cc = []; cc[0] = 255; cc[1] = Math.floor(Math.random() * 256); cc[2] = Math.floor(Math.random() * (256 - cc[1] / 2)); cc.sort(function () { return (0.5 - Math.random()); }); return ('rgb(' + cc[0] + ',' + cc[1] + ',' + cc[2] + ')'); } //무지개색 else if (r_mode === 5) { return ('rgb(' + c[0] + ',' + c[0] + ',' + c[0] + ')'); } //회색 else if (r_mode === 0) { document.getElementById('letters' + i).style.color = colour; } } function init() { for (i = 0; i < n; i++) { yp[i] = xp[i] = yd[i] = xd[i] = 0; temp[i] = document.getElementById('letters' + i).style; temp[i].color = (colour == 'random') ? newColour() : colour; //■문자색 지정 추가 } ripple(); } var toggleButton = document.getElementById('toggle'); toggleButton.addEventListener('click', function () { toggleFollow = !toggleFollow; if (toggleFollow === true) { init(); toggleButton.innerText = '>

0 · 0
2021.11.28
johyojun OFF 활용한 마우스 스토커 효과 입니다
0 · 0
2021.11.28
johyojun https://ko-kro.tistory.com/ [마우스 이동 효과 test 용]
ⓒ 청일TV

이용약관개인정보 취급방침 에 동의합니다.