Breathing Halftone effect - js

Ole_Hansen · December 9, 2020, 6:48am

Hi there,

I really need some help with an effect I would like to apply an image on my site.

I found the js effect on PRODUCTHUNT:

Also found this on GITHUB:

desandro/breathing-halftone/blob/master/sandbox.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">

  <title>breathing halftone</title>

  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <style>
  .halftone {
    width: 50%;
    display: block;
  }
  </style>

</head>
<body>

  <!-- <h1>breathing halftone</h1> -->

This file has been truncated. show original

I have tried but as I don’t know code it’s an uphill battle.

My questions I hope some kind soul would help me with are:

Where and how do I install breathing-halftone.pkgd.js and breathing-halftone.pkgd.js)?
Where and what code do I paste on the page in order to get it working on my ball image?
How do I set up the fall back image?

Please bear with me - new to this

Thanks in advance…

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Pablo_Cortes · December 21, 2020, 5:20pm

Hello @Ole_Hansen,

I gave it a try since the set up didn’t seem so hard. Unfortunately, it doesn’t work in webflow. The set up site states the following:

I think all webflow images are hosted at an uploads-ssl.webflow domain. So that is the reason why it won’t work. You could probably design your site in webflow transfer the code to a different hosting where you also host your images and it should work, but I think that is not what you want, right?

Ole_Hansen · January 18, 2021, 10:14am

Hi Pablo

Sorry for the late respons.
Thank you for taking the time to look into this.
Kinda glad you came to the conclusion it’s not possible.
Went with another solution instead

Thanks for your effort…