Skip to content

Commit a107571

Browse files
GoldenGoCodingGoldenGoCoding
authored
Add files via upload
1 parent 4cf96b5 commit a107571

9 files changed

+825
-0
lines changed

‎MacOS-Light-Full.jpg

952 KB
Loading

‎MacOS.jpg

906 KB
Loading

‎MacOS_11.jpg

65.8 KB
Loading

‎MacOS_Monterey_12.1.dmg

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"items": {
3+
"test": "hello world"
4+
}
5+
}

‎apple_logo.ico

66.1 KB
Binary file not shown.

‎dummy.html

+326
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,326 @@
1+
<html lang="en">
2+
3+
<head>
4+
5+
<meta charset="UTF-8">
6+
7+
<link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png">
8+
<meta name="apple-mobile-web-app-title" content="CodePen">
9+
10+
<link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">
11+
12+
<link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111">
13+
14+
15+
<title>CodePen - Mouse cursor motion blur with TweenMax #html5 #motion #blur #motionblur #css3 #tweenmax @greensock</title>
16+
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,400italic,700italic,900&amp;subset=cyrillic-ext,latin,latin-ext" rel="stylesheet" type="text/css">
17+
18+
19+
20+
<style>
21+
* {
22+
cursor: none;
23+
-webkit-touch-callout: none;
24+
-webkit-user-select: none;
25+
-khtml-user-select: none;
26+
-moz-user-select: none;
27+
-ms-user-select: none;
28+
user-select: none;
29+
}
30+
31+
html {
32+
font-family: 'Lato', sans-serif;
33+
min-height: 100%;
34+
height: 100%;
35+
background: #000;
36+
overflow: hidden;
37+
cursor: none;
38+
}
39+
40+
html body {
41+
min-height: 100%;
42+
height: 100%;
43+
cursor: none;
44+
margin: 0;
45+
padding: 0;
46+
background: #4a4a4a;
47+
/* Old browsers */
48+
background: -moz-radial-gradient(center, ellipse cover, #4a4a4a 0%, #2a2a2a 100%);
49+
/* FF3.6+ */
50+
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #4a4a4a), color-stop(100%, #2a2a2a));
51+
/* Chrome,Safari4+ */
52+
background: -webkit-radial-gradient(center, ellipse cover, #4a4a4a 0%, #2a2a2a 100%);
53+
/* Chrome10+,Safari5.1+ */
54+
background: -o-radial-gradient(center, ellipse cover, #4a4a4a 0%, #2a2a2a 100%);
55+
/* Opera 12+ */
56+
background: -ms-radial-gradient(center, ellipse cover, #4a4a4a 0%, #2a2a2a 100%);
57+
/* IE10+ */
58+
background: radial-gradient(ellipse at center, #4a4a4a 0%, #2a2a2a 100%);
59+
/* W3C */
60+
}
61+
62+
html body #copy {
63+
position: absolute;
64+
bottom: 0;
65+
height: 40px;
66+
width: 100%;
67+
text-align: center;
68+
text-transform: uppercase;
69+
line-height: 14px;
70+
font-size: 10px;
71+
font-weight: 400;
72+
z-index: 999;
73+
}
74+
75+
html body #copy a {
76+
color: #898989;
77+
text-decoration: none;
78+
transition: all 0.3s ease-in-out 0s;
79+
cursor: none;
80+
}
81+
82+
html body #copy a b {
83+
font-weight: 700;
84+
}
85+
86+
html body #copy a:hover {
87+
color: #fff;
88+
}
89+
90+
html body .box {
91+
position: absolute;
92+
width: 25px;
93+
height: 25px;
94+
top: 50%;
95+
left: 50%;
96+
margin: -50 0 0 -50px;
97+
background: rgba(255, 255, 255, 0.2);
98+
border-radius: 50px;
99+
-webkit-backface-visibility: hidden;
100+
opacity: 0;
101+
cursor: none;
102+
}
103+
104+
html body .box.arrow {
105+
background: url('http://lmgtfy.com/assets/mouse_arrow_windows_aero-b118000dc97d4558d6db021793acc613.png') no-repeat 0 0 transparent;
106+
border-radius: 0;
107+
}
108+
109+
html #intro {
110+
position: relative;
111+
font-size: 20px;
112+
font-weight: 100;
113+
text-align: center;
114+
float: none;
115+
display: block;
116+
width: 100%;
117+
color: #767676;
118+
cursor: none;
119+
padding-top: 80px;
120+
text-transform: uppercase;
121+
}
122+
123+
html #intro .select {
124+
margin-top: 20px;
125+
position: relative;
126+
z-index: 999999;
127+
}
128+
129+
html #intro .select span {
130+
color: #fff;
131+
font-weight: 400;
132+
padding: 0 20px;
133+
position: relative;
134+
letter-spacing: 1px;
135+
}
136+
137+
html #intro a {
138+
color: #fff;
139+
text-decoration: none;
140+
font-weight: 900;
141+
font-size: 11px;
142+
text-shadow: none;
143+
margin-top: 20px;
144+
display: block;
145+
text-shadow: 0 1px 0 #000;
146+
letter-spacing: 1px;
147+
cursor: pointer;
148+
position: relative;
149+
z-index: 9999;
150+
}
151+
152+
html #intro h1 {
153+
margin: 0;
154+
padding: 0;
155+
color: #eee;
156+
font-weight: 100;
157+
letter-spacing: 10px;
158+
font-size: 120%;
159+
}
160+
161+
html #intro h1 b {
162+
font-size: 260%;
163+
letter-spacing: -0.4px;
164+
font-weight: 700;
165+
display: block;
166+
overflow-y: hidden;
167+
text-shadow: 10px 0 106px rgba(255, 255, 255, 0.96), -10px 0 106px rgba(255, 255, 255, 0.96), 0 0 20px #ffffff, 0 0 5px #ffffff;
168+
overflow-x: visible;
169+
height: 45px;
170+
line-height: 42px;
171+
margin-top: 10px;
172+
box-shadow: 0 0 50px 20px rgba(0, 0, 0, 0.07);
173+
}
174+
175+
html #intro h2 {
176+
margin: 10px 0 0 0;
177+
padding: 0;
178+
color: #999;
179+
font-size: 80%;
180+
font-weight: 300;
181+
}
182+
</style>
183+
184+
<script>
185+
window.console = window.console || function(t) {};
186+
</script>
187+
188+
189+
190+
<script>
191+
if (document.location.search.match(/type=embed/gi)) {
192+
window.parent.postMessage("resize", "*");
193+
}
194+
</script>
195+
196+
197+
</head>
198+
199+
<body translate="no">
200+
</div>
201+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
202+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
203+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
204+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
205+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
206+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
207+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
208+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
209+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
210+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
211+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
212+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
213+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
214+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
215+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
216+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
217+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
218+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
219+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
220+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
221+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
222+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
223+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
224+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
225+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
226+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
227+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
228+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
229+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
230+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
231+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
232+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
233+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
234+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
235+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
236+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
237+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
238+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
239+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
240+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
241+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
242+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
243+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
244+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
245+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
246+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
247+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
248+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
249+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
250+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
251+
<div class="box" style="visibility: inherit; opacity: .00005; top: 1px; left: 652px;"></div>
252+
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
253+
254+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
255+
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js"></script>
256+
<script id="rendered-js">
257+
/*
258+
* I will keep publishing examples to help push the web foward.
259+
* PLEASE Like, Heart or Share if you like, and don't forget to follow.
260+
* Thanks.
261+
*
262+
* Now let's animate it :)
263+
*/
264+
265+
var $box = $('.box'),
266+
inter = 30,
267+
speed = 0;
268+
269+
function moveBox(e) {
270+
//TweenMax.killTweensOf();
271+
$box.each(function(index, val) {
272+
TweenLite.to($(this), 0.05, {
273+
css: {
274+
left: e.pageX,
275+
top: e.pageY,
276+
opacity: .25
277+
},
278+
delay: index / (20 * 100)
279+
});
280+
});
281+
}
282+
283+
$(window).on('mousemove', moveBox);
284+
285+
$box.each(function(index, val) {
286+
index = index + 1;
287+
TweenMax.set(
288+
$(this), {
289+
autoAlpha: 1,
290+
delay: 0
291+
});
292+
293+
});
294+
TweenMax.set(
295+
$('.text:nth-child(30)'), {
296+
autoAlpha: 1,
297+
delay: 0
298+
});
299+
300+
301+
302+
//V2.0
303+
$('.pointer').mouseover(function() {
304+
//console.log('cursor');
305+
$box.addClass('arrow');
306+
});
307+
$('.circle').mouseover(function() {
308+
//console.log('circle');
309+
$box.removeClass('arrow');
310+
});
311+
//# sourceURL=pen.js
312+
</script>
313+
314+
315+
316+
317+
318+
<style>
319+
body {
320+
background: black;
321+
}
322+
</style>
323+
324+
</body>
325+
326+
</html>

0 commit comments

Comments
 (0)