-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
143 lines (127 loc) · 4.63 KB
/
index.html
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blog Daffa</title>
<meta name="description" content="Blogging Dengan ReactVite + Sanity & THREEjs">
<meta name="keywords" content="ReactVite, Sanity, THREEjs">
<link rel="canonical" href="https://blog.daffadev.my.id/" />
<meta name="robots" content="index, follow" />
<meta property="og:title" content="Daffa Blog" />
<meta property="og:description" content="Blogging Dengan ReactVite + Sanity & THREEjs" />
<meta property="og:image" content="/vite.svg" />
<meta property="og:url" content="https://blog.daffadev.my.id/" />
<meta property="og:type" content="website" />
</head>
<body id='grain'>
<div class="slider js-slider">
<div class="slider__inner js-slider__inner"></div>
<div class="slide js-slide">
<div class="slide__content">
<figure class="slide__img js-slide__img">
<div class=""/>
</figure>
<figure class="slide__img js-slide__img">
<div class=""/>
</figure>
</div>
<div class="slider__text">
<div class="slider__text-line js-slider__text-line">
<div></div>
</div>
<div class="slider__text-line js-slider__text-line">
<div></div>
</div>
<div class="slider__text-line js-slider__text-line">
<div></div>
</div>
<div class="slider__text-line js-slider__text-line">
</div>
</div>
</div>
<div class="slide js-slide">
<div class="slide__content">
<figure class="slide__img js-slide__img">
<div class=""/>
</figure>
<figure class="slide__img js-slide__img">
<div class=""/>
</figure>
</div>
</div>
<div class="slide js-slide">
<div class="slide__content">
<figure class="slide__img js-slide__img">
<div class=""/>
</figure>
<figure class="slide__img js-slide__img">
<div class=""/>
</figure>
</div>
</div>
<nav class="slider__nav js-slider__nav">
<div class="slider-bullet js-slider-bullet">
<span class="slider-bullet__text js-slider-bullet__text"></span>
<span class="slider-bullet__line js-slider-bullet__line"></span>
</div>
<div class="slider-bullet js-slider-bullet">
<span class="slider-bullet__text js-slider-bullet__text"></span>
<span class="slider-bullet__line js-slider-bullet__line"></span>
</div>
<div class="slider-bullet js-slider-bullet">
<span class="slider-bullet__text js-slider-bullet__text"></span>
<span class="slider-bullet__line js-slider-bullet__line"></span>
</div>
</nav>
<div class="scroll js-scroll"></div>
</div>
<div id="root"></div>
<script type="module" src="./src/main.jsx"></script>
<script type="module" src='./src/utils/module.jsx'></script>
<!-- Three JS shaders -->
<script id="vertexShader" type="x-shader/x-vertex">
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
varying vec2 vUv;
uniform sampler2D texture1;
uniform sampler2D texture2;
uniform sampler2D disp;
uniform float dispPower;
uniform float intensity;
void main() {
vec2 uv = vUv;
vec4 disp = texture2D(disp, uv);
vec2 dispVec = vec2(disp.x, disp.y);
vec2 distPos1 = uv + (dispVec * intensity * dispPower);
vec2 distPos2 = uv + (dispVec * -(intensity * (1.0 - dispPower)));
vec4 _texture1 = texture2D(texture1, distPos1);
vec4 _texture2 = texture2D(texture2, distPos2);
gl_FragColor = mix(_texture1, _texture2, dispPower);
}
</script>
<script type="module" src="./src/script.jsx"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js'></script>
<script src='https://cdnjs.daffadev.workers.dev/0ccb05d7a3cdd3fd5bf6ecc5a188d29effca7322/lib/module.js'></script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1171588080744378"
crossorigin="anonymous"></script>
<script type="text/javascript">
(function(l) {
if (l.search[1] === '/' ) {
var decoded = l.search.slice(1).split('&').map(function(s) {
return s.replace(/~and~/g, '&')
}).join('?');
window.history.replaceState(null, null,
l.pathname.slice(0, -1) + decoded + l.hash
);
}
}(window.location))
</script>
</body>
</html>