├── images ├── test.txt ├── lisa.jpg ├── love.jpg ├── rose.jpeg ├── jennie.png ├── jennie.webp ├── jisoo.jpeg └── secret.png ├── index.html ├── style.css └── script.js /images/test.txt: -------------------------------------------------------------------------------- 1 | Hwllo qorld 2 | -------------------------------------------------------------------------------- /images/lisa.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerrahulofficial/secretCrush/HEAD/images/lisa.jpg -------------------------------------------------------------------------------- /images/love.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerrahulofficial/secretCrush/HEAD/images/love.jpg -------------------------------------------------------------------------------- /images/rose.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerrahulofficial/secretCrush/HEAD/images/rose.jpeg -------------------------------------------------------------------------------- /images/jennie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerrahulofficial/secretCrush/HEAD/images/jennie.png -------------------------------------------------------------------------------- /images/jennie.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerrahulofficial/secretCrush/HEAD/images/jennie.webp -------------------------------------------------------------------------------- /images/jisoo.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerrahulofficial/secretCrush/HEAD/images/jisoo.jpeg -------------------------------------------------------------------------------- /images/secret.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerrahulofficial/secretCrush/HEAD/images/secret.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CodePen - WebGL Gooey Effect 8 | 9 | 10 | 11 | 12 |

Here is something special for you .

13 |
14 | 15 | 16 |
17 | 18 |
19 |
20 |
21 | My image 22 |
23 |
24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Roboto); 2 | 3 | html { 4 | font-family: 'Roboto', sans-serif; 5 | } 6 | 7 | .form__group { 8 | position: relative; 9 | padding: 15px 0 0; 10 | margin-top: 10px; 11 | } 12 | 13 | .form__field { 14 | font-family: inherit; 15 | width: 100%; 16 | border: 0; 17 | border-bottom: 1px solid #d2d2d2; 18 | outline: 0; 19 | font-size: 16px; 20 | color: #212121; 21 | padding: 7px 0; 22 | background: transparent; 23 | transition: border-color 0.2s; 24 | } 25 | 26 | .form__field::placeholder { 27 | color: transparent; 28 | } 29 | 30 | .form__field:placeholder-shown ~ .form__label { 31 | font-size: 16px; 32 | cursor: text; 33 | top: 20px; 34 | } 35 | 36 | label, 37 | .form__field:focus ~ .form__label { 38 | position: absolute; 39 | top: 0; 40 | display: block; 41 | transition: 0.2s; 42 | font-size: 12px; 43 | color: #9b9b9b; 44 | } 45 | 46 | .form__field:focus ~ .form__label { 47 | color: #009788; 48 | } 49 | 50 | .form__field:focus { 51 | padding-bottom: 6px; 52 | border-bottom: 2px solid #009788; 53 | } 54 | 55 | 56 | 57 | .container { 58 | display: flex; 59 | align-items: center; 60 | justify-content: center; 61 | flex-wrap: wrap; 62 | position: relative; 63 | width: 50%; 64 | height: 50%; 65 | z-index: 10; 66 | } 67 | 68 | .tile { 69 | width: 90%; 70 | max-width: 35vw; 71 | flex: 1 1 auto; 72 | margin: 10px; 73 | } 74 | 75 | .tile__image { 76 | width: 100%; 77 | height: auto; 78 | object-fit: cover; 79 | object-position: center; 80 | } 81 | 82 | canvas { 83 | position: fixed; 84 | left: 0; 85 | top: 0; 86 | width: 50%; 87 | height: 50%; 88 | z-index: 9; 89 | } 90 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | 2 | let canvas = document.getElementById('stage'); 3 | 4 | document.getElementById("name").addEventListener("keyup", function() { 5 | // Code to run when a key is releas 6 | var value= document.getElementById('name').value; 7 | // console.log(value); 8 | 9 | value=value.toLowerCase(); 10 | 11 | if(value=="jisoo"){ 12 | console.log("User entered Jisooo"); 13 | const myImage = document.getElementById("myImage"); 14 | const imageUrl = `images/jisoo.jpeg`; 15 | const hoverUrl = "images/love.jpg"; 16 | myImage.setAttribute("src", imageUrl); 17 | myImage.setAttribute("data-hover", hoverUrl); 18 | new Scene(); 19 | canvas.style.display=""; 20 | } 21 | 22 | if(value=="lisa"){ 23 | 24 | console.log("User entered Lisa"); 25 | const myImage = document.getElementById("myImage"); 26 | const imageUrl = `images/lisa.jpg`; 27 | const hoverUrl = "images/love.jpg"; 28 | myImage.setAttribute("src", imageUrl); 29 | myImage.setAttribute("data-hover", hoverUrl); 30 | new Scene(); 31 | canvas.style.display=""; 32 | 33 | 34 | } 35 | 36 | if(value=="jennie"){ 37 | console.log("User entered Jennie"); 38 | const myImage = document.getElementById("myImage"); 39 | const imageUrl = `images/jennie.png`; 40 | const hoverUrl = "images/love.jpg"; 41 | myImage.setAttribute("src", imageUrl); 42 | myImage.setAttribute("data-hover", hoverUrl); 43 | new Scene(); 44 | canvas.style.display=""; 45 | } 46 | 47 | if(value=="rose"){ 48 | console.log("User entered Rose"); 49 | const myImage = document.getElementById("myImage"); 50 | const imageUrl = `images/rose.jpeg`; 51 | const hoverUrl = "images/love.jpg"; 52 | myImage.setAttribute("src", imageUrl); 53 | myImage.setAttribute("data-hover", hoverUrl); 54 | new Scene(); 55 | canvas.style.display=""; 56 | } 57 | 58 | if(value=="dua"){ 59 | console.log("User entered dua"); 60 | canvas.style.display=""; 61 | } 62 | 63 | if(value=="selena"){ 64 | console.log("User entered selena"); 65 | } 66 | 67 | }); 68 | const perspective = 800 69 | 70 | 71 | 72 | const vertexShader = `varying vec2 v_uv; 73 | 74 | void main() { 75 | v_uv = uv; 76 | 77 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 78 | }` 79 | 80 | const fragmentShader = ` 81 | uniform vec2 u_mouse; 82 | uniform vec2 u_res; 83 | 84 | uniform sampler2D u_image; 85 | uniform sampler2D u_imagehover; 86 | 87 | uniform float u_time; 88 | 89 | varying vec2 v_uv; 90 | 91 | float circle(in vec2 _st, in float _radius, in float blurriness){ 92 | vec2 dist = _st; 93 | return 1.-smoothstep(_radius-(_radius*blurriness), _radius+(_radius*blurriness), dot(dist,dist)*4.0); 94 | } 95 | 96 | vec3 mod289(vec3 x) { 97 | return x - floor(x * (1.0 / 289.0)) * 289.0; 98 | } 99 | 100 | vec4 mod289(vec4 x) { 101 | return x - floor(x * (1.0 / 289.0)) * 289.0; 102 | } 103 | 104 | vec4 permute(vec4 x) { 105 | return mod289(((x*34.0)+1.0)*x); 106 | } 107 | 108 | vec4 taylorInvSqrt(vec4 r) 109 | { 110 | return 1.79284291400159 - 0.85373472095314 * r; 111 | } 112 | 113 | float snoise3(vec3 v) 114 | { 115 | const vec2 C = vec2(1.0/6.0, 1.0/3.0) ; 116 | const vec4 D = vec4(0.0, 0.5, 1.0, 2.0); 117 | 118 | // First corner 119 | vec3 i = floor(v + dot(v, C.yyy) ); 120 | vec3 x0 = v - i + dot(i, C.xxx) ; 121 | 122 | // Other corners 123 | vec3 g = step(x0.yzx, x0.xyz); 124 | vec3 l = 1.0 - g; 125 | vec3 i1 = min( g.xyz, l.zxy ); 126 | vec3 i2 = max( g.xyz, l.zxy ); 127 | 128 | // x0 = x0 - 0.0 + 0.0 * C.xxx; 129 | // x1 = x0 - i1 + 1.0 * C.xxx; 130 | // x2 = x0 - i2 + 2.0 * C.xxx; 131 | // x3 = x0 - 1.0 + 3.0 * C.xxx; 132 | vec3 x1 = x0 - i1 + C.xxx; 133 | vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y 134 | vec3 x3 = x0 - D.yyy; // -1.0+3.0*C.x = -0.5 = -D.y 135 | 136 | // Permutations 137 | i = mod289(i); 138 | vec4 p = permute( permute( permute( 139 | i.z + vec4(0.0, i1.z, i2.z, 1.0 )) 140 | + i.y + vec4(0.0, i1.y, i2.y, 1.0 )) 141 | + i.x + vec4(0.0, i1.x, i2.x, 1.0 )); 142 | 143 | // Gradients: 7x7 points over a square, mapped onto an octahedron. 144 | // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294) 145 | float n_ = 0.142857142857; // 1.0/7.0 146 | vec3 ns = n_ * D.wyz - D.xzx; 147 | 148 | vec4 j = p - 49.0 * floor(p * ns.z * ns.z); // mod(p,7*7) 149 | 150 | vec4 x_ = floor(j * ns.z); 151 | vec4 y_ = floor(j - 7.0 * x_ ); // mod(j,N) 152 | 153 | vec4 x = x_ *ns.x + ns.yyyy; 154 | vec4 y = y_ *ns.x + ns.yyyy; 155 | vec4 h = 1.0 - abs(x) - abs(y); 156 | 157 | vec4 b0 = vec4( x.xy, y.xy ); 158 | vec4 b1 = vec4( x.zw, y.zw ); 159 | 160 | //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0; 161 | //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0; 162 | vec4 s0 = floor(b0)*2.0 + 1.0; 163 | vec4 s1 = floor(b1)*2.0 + 1.0; 164 | vec4 sh = -step(h, vec4(0.0)); 165 | 166 | vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ; 167 | vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ; 168 | 169 | vec3 p0 = vec3(a0.xy,h.x); 170 | vec3 p1 = vec3(a0.zw,h.y); 171 | vec3 p2 = vec3(a1.xy,h.z); 172 | vec3 p3 = vec3(a1.zw,h.w); 173 | 174 | //Normalise gradients 175 | vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3))); 176 | p0 *= norm.x; 177 | p1 *= norm.y; 178 | p2 *= norm.z; 179 | p3 *= norm.w; 180 | 181 | // Mix final noise value 182 | vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0); 183 | m = m * m; 184 | return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), 185 | dot(p2,x2), dot(p3,x3) ) ); 186 | } 187 | 188 | void main() { 189 | // We manage the device ratio by passing PR constant 190 | vec2 res = u_res * PR; 191 | vec2 st = gl_FragCoord.xy / res.xy - vec2(0.5); 192 | // tip: use the following formula to keep the good ratio of your coordinates 193 | st.y *= u_res.y / u_res.x; 194 | 195 | // We readjust the mouse coordinates 196 | vec2 mouse = u_mouse * -0.5; 197 | 198 | vec2 circlePos = st + mouse; 199 | float c = circle(circlePos, 0.15, 2.) * 2.5; 200 | 201 | float offx = v_uv.x + sin(v_uv.y + u_time * .1); 202 | float offy = v_uv.y - u_time * 0.1 - cos(u_time * .001) * .01; 203 | 204 | float n = snoise3(vec3(offx, offy, u_time * .1) * 8.) - 1.; 205 | 206 | float finalMask = smoothstep(0.4, 0.5, n + pow(c, 2.)); 207 | 208 | vec4 image = texture2D(u_image, v_uv); 209 | vec4 hover = texture2D(u_imagehover, v_uv); 210 | 211 | vec4 finalImage = mix(image, hover, finalMask); 212 | 213 | gl_FragColor = finalImage; 214 | } 215 | ` 216 | 217 | class Scene { 218 | constructor() { 219 | this.container = document.getElementById('stage') 220 | 221 | this.scene = new THREE.Scene() 222 | this.renderer = new THREE.WebGLRenderer({ 223 | canvas: this.container, 224 | alpha: true, 225 | }) 226 | 227 | this.renderer.setSize(window.innerWidth, window.innerHeight) 228 | this.renderer.setPixelRatio(window.devicePixelRatio) 229 | 230 | this.initLights() 231 | this.initCamera() 232 | 233 | this.figure = new Figure(this.scene, () => { 234 | this.update() 235 | }) 236 | 237 | } 238 | 239 | initLights() { 240 | const ambientlight = new THREE.AmbientLight(0xffffff, 2) 241 | this.scene.add(ambientlight) 242 | } 243 | 244 | 245 | initCamera() { 246 | const fov = (180 * (2 * Math.atan(window.innerHeight / 2 / perspective))) / Math.PI 247 | 248 | this.camera = new THREE.PerspectiveCamera(fov, window.innerWidth / window.innerHeight, 1, 1000) 249 | this.camera.position.set(0, 0, perspective) 250 | } 251 | 252 | update() { 253 | requestAnimationFrame(this.update.bind(this)) 254 | 255 | this.figure.update() 256 | 257 | this.renderer.render(this.scene, this.camera) 258 | } 259 | } 260 | 261 | 262 | 263 | class Figure { 264 | constructor(scene, cb) { 265 | this.$image = document.querySelector('.tile__image') 266 | this.scene = scene 267 | this.callback = cb 268 | 269 | this.loader = new THREE.TextureLoader() 270 | 271 | this.image = this.loader.load(this.$image.src, () => { 272 | this.start() 273 | }) 274 | 275 | this.hoverImage = this.loader.load(this.$image.dataset.hover) 276 | this.$image.style.opacity = 0 277 | this.sizes = new THREE.Vector2(0, 0) 278 | this.offset = new THREE.Vector2(0, 0) 279 | 280 | this.mouse = new THREE.Vector2(0, 0) 281 | window.addEventListener('mousemove', (ev) => { this.onMouseMove(ev) }) 282 | } 283 | 284 | start(){ 285 | this.getSizes() 286 | this.createMesh() 287 | this.callback() 288 | } 289 | 290 | getSizes() { 291 | const { width, height, top, left } = this.$image.getBoundingClientRect() 292 | 293 | this.sizes.set(width, height); 294 | 295 | this.offset.set(left - window.innerWidth / 2 + width / 2, 296 | -top + window.innerHeight / 2 - height / 2) 297 | } 298 | 299 | 300 | createMesh() { 301 | this.uniforms = { 302 | u_image: { type: 't', value: this.image }, 303 | u_imagehover: { type: 't', value: this.hoverImage }, 304 | u_mouse: { value: this.mouse }, 305 | u_time: { value: 0 }, 306 | u_res: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) } 307 | } 308 | 309 | this.geometry = new THREE.PlaneBufferGeometry(1, 1, 1, 1) 310 | this.material = new THREE.ShaderMaterial({ 311 | uniforms: this.uniforms, 312 | vertexShader: vertexShader, 313 | fragmentShader: fragmentShader, 314 | defines: { 315 | PR: window.devicePixelRatio.toFixed(1) 316 | } 317 | }) 318 | 319 | this.mesh = new THREE.Mesh(this.geometry, this.material) 320 | 321 | this.mesh.position.set(this.offset.x, this.offset.y, 0) 322 | this.mesh.scale.set(this.sizes.x, this.sizes.y, 1) 323 | 324 | this.scene.add(this.mesh) 325 | } 326 | 327 | onMouseMove(event) { 328 | TweenMax.to(this.mouse, 0.4, { 329 | x: (event.clientX / window.innerWidth) * 2 - 1, 330 | y: -(event.clientY / window.innerHeight) * 2 + 1, 331 | }) 332 | 333 | TweenMax.to(this.mesh.rotation, 0.5, { 334 | x: -this.mouse.y * 0.3, 335 | y: this.mouse.x * (Math.PI / 6) 336 | }) 337 | } 338 | 339 | update() { 340 | this.uniforms.u_time.value += 0.01 341 | } 342 | 343 | } 344 | 345 | 346 | --------------------------------------------------------------------------------