Css with javascript import

Need help
1

updated Does anyone know how to get this css and the javascript import to work with the mouse over action and set to the background?

  /* add any necessary styles here */
  #app {
    margin: 0;
    padding: 0;
    height: 100vh;
   
  }
  #background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
background-color: black;
      }
</style>

<div id="app">
  
  <div id="background"></div>
</div>

<script type="module">
  import { neonCursor } from 'https://unpkg.com/threejs-toys@0.0.8/build/threejs-toys.module.cdn.min.js';



  neonCursor({
    el: document.getElementById('background'),
    shaderPoints: 16,
    curvePoints: 80,
    curveLerp: 0.5,
    radius1: 5,
    radius2: 30,
    velocityTreshold: 10,
    sleepRadiusX: 125,
    sleepRadiusY: 100,
    sleepTimeCoefX: 0.0025,
    sleepTimeCoefY: 0.0025
  });

</script> ```
2

You can surround text with three backtick (```) to insert multiline code in the forum:

<p>hello</p>

it’s better like that when you post code.
What you have in your code is not a css module, you are importing a javascript library.
It’s not clear what it should do, but I guess that you don’t have an element with id background.
Also it doesn’t look like you are closing the style tag.

1 Like
3

Yes! You are right. I started trying to find a cool CSS effect. This creates a neon tracer that’s supposed to follow the mouse. I finally found a way to get it to load in the background but the mouse action isn’t working. That’s the part I can’t figure out. Thank you for the reply.

If I set the page or an element with an ID of background it doesn’t work. I have to create a <div> in order for it work. I’m a bit stumped as to why it won’t access the element when I set an ID. The cursor works if its buried in two divs. It’s such a cool effect I’d love to get it working. Also the position: fixed part if you change that it puts it at the top of the screen and works but if its set to fixed the mouse over does not work.

4

It doesn’t matter if the element is inside your custom html, what matters is that the element exists in the page before your code looks for it.

Anyway for your example try to put this in the page html header:

<script type="module" defer>
import { neonCursor } from 'https://unpkg.com/threejs-toys@0.0.8/build/threejs-toys.module.cdn.min.js'

window.neonCursor=neonCursor
</script>

and this in your html element:

<div id="app">
</div>

<script>
window.neonCursor({
  el: document.getElementById('app'),
  shaderPoints: 16,
  curvePoints: 80,
  curveLerp: 0.5,
  radius1: 5,
  radius2: 30,
  velocityTreshold: 10,
  sleepRadiusX: 100,
  sleepRadiusY: 100,
  sleepTimeCoefX: 0.0025,
  sleepTimeCoefY: 0.0025
})
</script>

Cheers
Mariano

1 Like
5

This gets close but it won’t fill the background, behind the other elements on the page. It looks like the maximum height it will fill is about 150px. I’m stumped, sadly. So I tried adding some css to make it 100% and it does and the cursor works! Which is great but I’m having trouble setting it as a background for the page.
Thank you @dorilama for taking the time to look at this.

6

here is a link to what I am trying to accomplish. It’s the second option down. neon

7

Well, obviously you need to target a different element, something that cover your whole page.
That html structure is ok for the example it was in, but not your app.
Try targeting the page itself.

Needless to say that while this effect looks cool it is probably an accessibility nightmare and adds a big payload to your page (around 264kb of extra javascript).

8

You bring up a good point about accessibility. I was just reading about it. I even tried a floating group and a group focus. The group focus was the most promising but I think I’m going to abandon it just based on the concern you just brought up. Focus on the functionality.

9

This topic was automatically closed after 70 days. New replies are no longer allowed.