Animated haze distortion effect for images and text, with WebGL.

Last update: Nov 1, 2022

Related tags

Overview

Animated Heat Distortion Effects with WebGL

A tutorial on how to use fragment shaders in WebGL to create an animated heat haze distortion effect on images and text. By Lucas Bebber.

Article on Codrops

Demo

Installing

First, you'll need node.js, which includes npm. Then, open the project folder on the terminal and run:

$ npm i

Building and running

Building

$ npm run build

Watching

$ npm run watch

Running

$ npm run start

Then open http://localhost:8080/demo.

Watching & Running

$ npm run start-dev

...and when you're done...

$ npm run stop-dev

License

Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is".

Misc

Follow Lucas: Twitter, Dribbble, Flickr

Follow Codrops: Twitter, Facebook, Google+, GitHub, Pinterest

Comments

jquery version about this effect ?

Hi, your effect tutorial is awesome! like it very much. and may I ask you is there any jquery version about this effect ? https://tympanus.net/Tutorials/HeatDistortionEffect/index2.html

opened by alexander-kinvic 0
When included on a page in webapp (Laravel), navigating away from page with this webgl implementation causing really long load time.

I recorded 19 seconds loading going from one page that had the cooking.js invocation of webgl and navigating to another internal page causes extremely long load times and all the while on a local http server in development. Remove the cooking.js file and navigation is swimmingly fast. Not sure what's going on here but needless to say have removed this from my website. Anyways, awesome work though. Thoughts?

opened by david-j-davis 0

won't build... problem with node package

0 info it worked if it ends with ok
1 verbose cli [ 'node', '/usr/local/bin/npm', 'run', 'watch' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prewatch', 'watch', 'postwatch' ]
5 info prewatch [email protected]
6 info watch [email protected]
7 verbose unsafe-perm in lifecycle true
8 info [email protected] Failed to exec watch script
9 verbose stack Error: [email protected] watch: `webpack -w`
9 verbose stack spawn ENOENT
9 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:17:16)
9 verbose stack     at ChildProcess.emit (events.js:110:17)
9 verbose stack     at maybeClose (child_process.js:1015:16)
9 verbose stack     at Process.ChildProcess._handle.onexit (child_process.js:1087:5)
10 verbose pkgid [email protected]
11 verbose cwd /Applications/mamp/htdocs/webgl
12 error Darwin 14.5.0
13 error argv "node" "/usr/local/bin/npm" "run" "watch"
14 error node v0.12.7
15 error npm  v2.11.3
16 error file sh
17 error code ELIFECYCLE
18 error errno ENOENT
19 error syscall spawn
20 error [email protected] watch: `webpack -w`
20 error spawn ENOENT
21 error Failed at the [email protected] watch script 'webpack -w'.
21 error This is most likely a problem with the codrops-photoeffect-test package,
21 error not with npm itself.
21 error Tell the author that this fails on your system:
21 error     webpack -w
21 error You can get their info via:
21 error     npm owner ls codrops-photoeffect-test
21 error There is likely additional logging output above.
22 verbose exit [ 1, true ]

opened by strohrdanz 0

Flickering bug

We have used this plugin for our project for cooking effect. It is an awesome js library. The issue which i found was flickering on the page, especially on the top of the page. It happens randomly. This same issue is there in the official demo link as well. Please recommend a way to resolve this issue. Thank you.

opened by ajsuvarna6 0
Dúvidas

Olá Lucas!, Obrigado por esse projeto, estava aqui testando o efeito Water e tive algumas dúvidas. Troquei a sua imagem por outra e quis trocar a posição das ondas, no código tentei trocar os eixos X e Y, mas não tive o resultado esperado. E outra, como é que você cria o mapa das imagens?

opened by BenevidesLecontes 1

Owner

Lucas Bebber

GitHub

Some ideas for decorative link distortion effects using SVG filters.

Distorted Link Effects A couple of ideas for decorative link distortion effects using SVG filters on lines, circles and squares. Article on Codrops De

122 Dec 4, 2022

A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to create a subtle motion or depth effect.

Image Tilt Effect A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to c

571 Nov 21, 2022

Add a water ripple effect to your background using WebGL.

jQuery Ripples Plugin By the powers of WebGL, add a layer of water to your HTML elements which will ripple by cursor interaction! Important: this plug

976 Dec 30, 2022

"shuffle-text" is JavaScript text effect library such as cool legacy of Flash.

ShuffleText This is the JavaScript library for text effect such as Flash contents. Setup Script Install <script src="shuffle-text.js"></script> NPM In

96 Dec 24, 2022

fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulate the page preloading effect.

What is fakeLoader.js fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulat

721 Dec 6, 2022

Animated images that are superficially attractive and entertaining but intellectually undemanding. Cool as all hell though!

MMM-EyeCandy Animated images that are superficially attractive and entertaining but intellectually undemanding. Add some EyeCandy to your mirror. Some

36 Dec 28, 2022

Liquideffect - Javascript Library for creating liquid effect on image and RGB effect on mouse direction.

LiquidEffect Javascript Library for creating liquid effect on image and RGB effect on mouse direction. Demo https://liquideffect.netlify.app/ Dependen

8 May 6, 2022

A motion hover effect for a background grid of images.

Image Grid Motion Effect A motion hover effect for a background grid of images. Article on Codrops Demo Installation Install dependencies: npm install

118 Dec 31, 2022

Javascript library enabling magnifying glass effect on an images

Magnifier.js Javascript library enabling magnifying glass effect on an images. Demo and documentation Features: Zoom in / out functionality using mous

808 Dec 18, 2022

Add a retro/vintage effect to images using the HTML5 canvas element

vintageJS Add a retro/vintage effect to images using the HTML5 canvas element. Installation $ npm install vintagejs How to use vintagejs is a functio

829 Dec 25, 2022

A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.

Thumbnail Grid with Expanding Preview A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Googl

353 Jan 4, 2023