css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

An example of a plane with a ripple effect vertex shader using curtains.js lib.

Comments

  1. Amazing pen and library! Is there a way to add multiple images on a page with this effect? Thank you!

  2. Hi @kathryn-carmichael-reina,

    yes of course you can! Most simple way would be by mixing this pen and that one: https://codepen.io/martinlaxenaire/pen/LrovPy You'd just have to change the planes definition, send your mouse coords to each plane and use this pen shaders.

    Cheers,

  3. Thank you so much for the quick response @ martinlaxenaire! I think I am running into some trouble with my mouse coords. Do you think you could offer some advice? My pen is below:

    https://codepen.io/kathryn-carmichael-reina/pen/oapydo

  4. Hey @kathryn-carmichael-reina,

    looks like you were a bit confused about the process. You are instanciating the first plane two times, and you're not sending the mouse coords to the right planes. Did you just copy/paste the whole javascript code from the second pen into the first one? Anyway, here's a working fork of your pen: https://codepen.io/martinlaxenaire/pen/jeZyZM

    Cheers,

  5. @martinlaxenaire you are a rockstar! Thank you for creating this library and thank you for your help. Much appreciated!

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...