Skip to content

Commit 41c38fd

Browse files
crnacuracrnacura
committed
Clean up
1 parent 17e9371 commit 41c38fd

13 files changed

+18
-18
lines changed

‎README.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,15 @@ An interactive "fake" 3D effect for images with plain WebGL.
66

77
[Article on Codrops](https://tympanus.net/codrops/?p=38413)
88

9-
[Demo](http://tympanus.net/Tutorials/fake3d/)
9+
[Demo](http://tympanus.net/Tutorials/Fake3DEffect/)
1010

1111
## Credits
1212

1313
* [Gyronorm](https://github.com/dorukeker/gyronorm.js/) library by [Doruk Eker](http://dorukeker.com)
1414
* Photo by [Cosmic Timetraveler](https://unsplash.com/photos/YK_8mABhrtc)
1515
* Photo by [Chelsea Ferenando](https://unsplash.com/photos/WJRZNL7rDF8)
1616
* Photo by [Rio Syhputra](https://unsplash.com/photos/JnOHvMgw_Jo)
17+
* Phoyo by [Jonatan Pie](https://unsplash.com/photos/3l3RwQdHRHg)
1718

1819
## License
1920
This resource can be used freely if integrated or build upon in personal or commercial projects such as websites, web apps and web templates intended for sale. It is not allowed to take the resource "as-is" and sell it, redistribute, re-publish it, or sell "pluginized" versions of it. Free plugins built using this resource should have a visible mention and link to the original work. Always consider the licenses of all included libraries, scripts and images used.

‎css/base.css

+15-8
Original file line numberDiff line numberDiff line change
@@ -16,22 +16,25 @@ body {
1616
--color-link-hover: #fff;
1717
color: var(--color-text);
1818
background-color: var(--color-bg);
19-
font-family: Futura, "futura-pt", Arial, sans-serif;
19+
font-family: moderno-fb, "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;
2020
-webkit-font-smoothing: antialiased;
2121
-moz-osx-font-smoothing: grayscale;
2222
overscroll-behavior: none;
2323
}
2424

25-
.demo-1,
26-
.demo-3 {
27-
font-family: moderno-fb, "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;
25+
.demo-2 {
26+
font-family: Futura, "futura-pt", Arial, sans-serif;
2827
}
2928

3029
.demo-2,
3130
.demo-3 {
3231
--color-link: #fbc966;
3332
}
3433

34+
.demo-4 {
35+
--color-link: #52e093;
36+
}
37+
3538
#gl {
3639
width: 100vw;
3740
height: 100vh;
@@ -155,10 +158,6 @@ a:focus {
155158
line-height: 0.8;
156159
pointer-events: none;
157160
margin-top: 13vh;
158-
}
159-
160-
.demo-1 .frame__content,
161-
.demo-3 .frame__content {
162161
font-size: 40vw;
163162
font-family: essonnes-display, serif;
164163
mix-blend-mode: soft-light;
@@ -172,12 +171,20 @@ a:focus {
172171
text-transform: uppercase;
173172
font-weight: bold;
174173
mix-blend-mode: soft-light;
174+
text-align: left;
175+
color: #fff;
176+
font-family: Futura, "futura-pt", Arial, sans-serif;
175177
}
176178

177179
.demo-3 .frame__content {
178180
color: #24211d;
179181
}
180182

183+
.demo-4 .frame__content {
184+
color: #75c298;
185+
mix-blend-mode: overlay;
186+
}
187+
181188
@media screen and (min-width: 53em) {
182189
.message {
183190
display: none;

‎img/canyon-map.jpg

-5.87 KB
Loading

‎img/canyon.jpg

-11.2 KB
Loading

‎img/cloud-map.jpg

-18.9 KB
Binary file not shown.

‎img/cloud.jpg

-73.3 KB
Binary file not shown.

‎img/gif.mp4

-197 KB
Binary file not shown.

‎img/gif2.mp4

-127 KB
Binary file not shown.

‎img/gif3.mp4

-243 KB
Binary file not shown.

‎index.html

-2
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,8 @@
88
<meta name="keywords" content="webgl, 3d, image, shader, javascript, tutorial, demo, web development, effect" />
99
<meta name="author" content="Codrops" />
1010
<link rel="shortcut icon" href="favicon.ico">
11-
<link rel="stylesheet" href="https://use.typekit.net/dat1mce.css">
1211
<link rel="stylesheet" type="text/css" href="css/base.css" />
1312
<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
14-
<!--script src="//tympanus.net/codrops/adpacks/analytics.js"></script-->
1513
</head>
1614
<body class="demo-1">
1715
<main>

‎index2.html

-2
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,8 @@
88
<meta name="keywords" content="webgl, 3d, image, shader, javascript, tutorial, demo, web development, effect" />
99
<meta name="author" content="Codrops" />
1010
<link rel="shortcut icon" href="favicon.ico">
11-
<link rel="stylesheet" href="https://use.typekit.net/txt8osa.css">
1211
<link rel="stylesheet" type="text/css" href="css/base.css" />
1312
<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
14-
<!--script src="//tympanus.net/codrops/adpacks/analytics.js"></script-->
1513
</head>
1614
<body class="demo-2">
1715
<main>

‎index3.html

-2
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,8 @@
88
<meta name="keywords" content="webgl, 3d, image, shader, javascript, tutorial, demo, web development, effect" />
99
<meta name="author" content="Codrops" />
1010
<link rel="shortcut icon" href="favicon.ico">
11-
<link rel="stylesheet" href="https://use.typekit.net/dat1mce.css">
1211
<link rel="stylesheet" type="text/css" href="css/base.css" />
1312
<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
14-
<!--script src="//tympanus.net/codrops/adpacks/analytics.js"></script-->
1513
</head>
1614
<body class="demo-3">
1715
<main>

‎index4.html

+1-3
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,10 @@
88
<meta name="keywords" content="webgl, 3d, image, shader, javascript, tutorial, demo, web development, effect" />
99
<meta name="author" content="Codrops" />
1010
<link rel="shortcut icon" href="favicon.ico">
11-
<link rel="stylesheet" href="https://use.typekit.net/dat1mce.css">
1211
<link rel="stylesheet" type="text/css" href="css/base.css" />
1312
<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
14-
<!--script src="//tympanus.net/codrops/adpacks/analytics.js"></script-->
1513
</head>
16-
<body class="demo-3">
14+
<body class="demo-4">
1715
<main>
1816
<div class="message">Tilt your phone to see the effect.</div>
1917
<div class="frame">

0 commit comments

Comments
 (0)