일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- #이미지
- 게시판
- 해피CGI
- 웹솔루션
- #cgimall
- #해피CGI
- CSS
- #웹솔루션
- #쇼핑몰
- CGIMALL
- #홈페이지
- #image
- #CSS
- 홈페이지
- #동영상
- #jQuery
- 사이트제작
- #업종별
- javascript
- 홈페이지제작
- #뉴스
- php
- 쇼핑몰
- #happycgi
- happycgi
- 솔루션
- #솔루션
- #홈페이지제작
- 해피씨지아이
- jquery
- Today
- Total
웹솔루션개발 22년 노하우! 해피CGI의 모든것
[해피CGI][cgimall] Star trails 본문
마우스 따라 별이 생기는 효과입니다.
코드 및 데모는 데모링크를 통해서 확인하실 수 있습니다.
HTML
<h1> Move your mouse around</h1> |
CSS
.star {
transform-style: preserve-3d;
width: 1px;
height: 1px;
position: absolute;
color: red;
}
.star:before {
position: absolute;
content: '\2726';
color: inherit;
inset: 0;
//box-shadow: 0 0 1em .5em #a3c2;
//filter: drop-shadow(0 0 .5em white);
text-shadow: 0 0 .8em #fff5;
}
body {
margin: 0;
min-height: 100vh;
font-family: 'Montserrat', sans-serif;
color: #F9F6EF;
display: grid;
place-content: center;
background-image:
radial-gradient(
circle at 50% 50%,
#2f3040,
#1f2020
);
}
|
JS
let x1=0, y1=0;
window.client
const
vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0),
dist_to_draw = 50,
delay = 1000,
fsize = [
'1.1rem', '1.4rem', '.8rem', '1.7rem'
],
colors = [
'#E23636',
'#F9F3EE',
'#E1F8DC',
'#B8AFE6',
'#AEE1CD',
'#5EB0E5'
],
rand = (min, max) =>
Math.floor(Math.random() * (max - min + 1)) + min,
selRand = (o) => o[rand(0, o.length -1)],
distanceTo = (x1, y1, x2, y2) =>
Math.sqrt((Math.pow(x2-x1,2))+(Math.pow(y2-y1,2))),
shouldDraw = (x, y) =>
(distanceTo(x1, y1, x, y) >= dist_to_draw),
addStr = (x, y) => {
const str = document.createElement("div");
str.innerHTML = '✦';
str.className = 'star';
str.style.top = `${y + rand(-20,20)}px`;
str.style.left = `${x}px`;
str.style.color = selRand(colors);
str.style.fontSize = selRand(fsize);
document.body.appendChild(str);
//console.log(rand(0, 3));
const fs = 10 + 5 * parseFloat(getComputedStyle(str).fontSize);
//console.log(vh, y, fs);
//console.log((y+fs)>vh?vh-y:fs);
str.animate({
translate: `0 ${(y+fs)>vh?vh-y:fs}px`,
opacity: 0,
transform: `rotateX(${rand(1, 500)}deg) rotateY(${rand(1, 500)}deg)`
}, {
duration: delay,
fill: 'forwards',
});
//could add a animation terminate listener, but why add the additional load
setTimeout(() => {
str.remove();
}, delay);
}
addEventListener("mousemove", (e) => {
const {clientX, clientY} = e;
if(shouldDraw(clientX, clientY)){
addStr(clientX, clientY);
x1 = clientX;
y1 = clientY;
}
});
|
'웹프로그램밍 자료실 > 기타 자료' 카테고리의 다른 글
[해피CGI][cgimall] Freebiesbug - 디자인과 모바일 앱 디자인을 위한 무료 리소스 사이트 (0) | 2024.05.22 |
---|---|
[해피CGI][cgimall] Sketch App Sources -무료 리소스 사이트 (0) | 2024.05.22 |
[해피CGI][cgimall] Comic Speech Bubbles (0) | 2024.05.21 |
[해피CGI][cgimall] 별도의 프로그램 설치 없이 온라인에서 바코드 / QR코드 생성기 (0) | 2024.05.20 |
[해피CGI][cgimall] HTML/JS/CSS 코드 압축 사이트 (0) | 2024.05.20 |
Comments