Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 9bd7fb8

Browse files
Update mouse move shadow project
1 parent c115c69 commit 9bd7fb8

File tree

3 files changed

+59
-17
lines changed

3 files changed

+59
-17
lines changed

β€Ž16 - Mouse Move Shadow/css/style.css

Lines changed: 31 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
11
:root {
22
--font-family: "Source Serif Pro", serif;
3+
--black: #000000;
34
--red: #ff0000;
45
--pink: #fed3d3;
5-
--yellow: #ffff00;
6-
--purple: #9932cc;
7-
--blue: #3862e2;
8-
--green: #00ff00;
6+
--selection-bg-clr: #0000002f;
97
}
108

119
* {
1210
margin: 0;
1311
padding: 0;
14-
border: 0;
12+
outline: 0;
1513
box-sizing: border-box;
1614
}
1715

@@ -23,10 +21,10 @@ body {
2321
cursor: url(../img/cursor.png), auto;
2422
overflow: hidden;
2523
background-color: var(--pink);
24+
user-select: none;
2625
}
2726

2827
.hero {
29-
user-select: none;
3028
display: flex;
3129
align-items: center;
3230
justify-content: center;
@@ -52,39 +50,58 @@ body {
5250
transform: rotate(180deg);
5351
}
5452

53+
.shape-fill {
54+
fill: var(--red);
55+
}
56+
5557
svg {
5658
position: relative;
5759
display: block;
5860
width: calc(100% + 1.3rem);
5961
height: 61rem;
6062
}
6163

62-
.shape-fill {
63-
fill: var(--red);
64-
}
65-
6664
.text {
6765
cursor: text;
6866
text-transform: uppercase;
6967
font: 800 90rem var(--font-family);
7068
text-shadow: 10rem 10rem 0 var(--red);
71-
z-index: 100;
69+
transition: 0.08s;
70+
border-radius: 4rem;
71+
z-index: 10;
72+
max-width: 60%;
73+
}
74+
75+
.text::selection {
76+
background-color: var(--selection-bg-clr);
7277
}
7378

74-
@media screen and (max-width: 800px) {
79+
@media screen and (max-width: 1090px) {
7580
html {
7681
font-size: 0.8px;
7782
}
7883
}
7984

80-
@media screen and (max-width: 600px) {
85+
@media screen and (max-width: 870px) {
8186
html {
8287
font-size: 0.6px;
8388
}
8489
}
8590

86-
@media screen and (max-width: 450px) {
91+
@media screen and (max-width: 660px) {
8792
html {
8893
font-size: 0.4px;
8994
}
9095
}
96+
97+
@media screen and (max-width: 450px) {
98+
html {
99+
font-size: 0.3px;
100+
}
101+
}
102+
103+
@media screen and (max-width: 320px) {
104+
html {
105+
font-size: 0.2px;
106+
}
107+
}

β€Ž16 - Mouse Move Shadow/index.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<meta charset="UTF-8" />
99
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
1010
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
11+
<meta name="theme-color" content="#fed3d3" />
1112

1213
<!-- google font -->
1314
<link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -52,7 +53,7 @@
5253
</svg>
5354
</div>
5455

55-
<div class="text" contenteditable>Hello❀</div>
56+
<div class="text" contenteditable>HelloπŸ’—</div>
5657
</div>
5758

5859
<!-- javascript -->

β€Ž16 - Mouse Move Shadow/js/app.js

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,16 @@
22

33
const hero = document.querySelector(".hero");
44
const text = hero.querySelector(".text");
5+
const mq = window.matchMedia("(max-width: 1007px)");
56
let walk = 200; // 200px
67

7-
hero.addEventListener("mousemove", shadow);
8+
hero.addEventListener("mousemove", addShadow);
9+
text.addEventListener("click", addOutline);
10+
text.addEventListener("input", addOutline);
11+
text.addEventListener("mouseout", removeOutline);
12+
text.addEventListener("keydown", setMaxLength);
813

9-
function shadow(e) {
14+
function addShadow(e) {
1015
let { offsetWidth: width, offsetHeight: height } = hero;
1116
let { offsetX: x, offsetY: y } = e;
1217

@@ -25,3 +30,22 @@ function shadow(e) {
2530
${xWalk * -1}rem ${yWalk * -1}rem #00FF00
2631
`;
2732
}
33+
34+
function addOutline() {
35+
text.style.outline = "3rem solid var(--black)";
36+
}
37+
38+
function removeOutline() {
39+
text.style.outline = "0";
40+
}
41+
42+
function setMaxLength(e) {
43+
if (text.textContent.length === 7 && e.key != "Backspace") {
44+
e.preventDefault();
45+
}
46+
}
47+
48+
if (mq.matches) {
49+
text.removeAttribute("contenteditable");
50+
text.removeEventListener("click", addOutline);
51+
}

0 commit comments

Comments
(0)

AltStyle γ«γ‚ˆγ£γ¦ε€‰ζ›γ•γ‚ŒγŸγƒšγƒΌγ‚Έ (->γ‚ͺγƒͺγ‚ΈγƒŠγƒ«) /