πŸ‘Ύ An interactive swarm


​

​

We're adding new community library scripts each week. Let's take a look at some of them.

πŸ‘Ύ An interactive swarm

Create a dynamic grid of squares that react to mouse movement, simulating a swarm-like effect (is it a swarm?). This code is the scaled back version of something we did for a client. We'll show you the finished experience once that projects launches.

Play with the example: https://slater-original.webflow.io/swarm​

Review the code: https://slater.app/projects/library-ncsco-largely-replaced-by-new-snippets/editor2​

​

β€‹πŸŒˆ Refresh the page after form submit

Clear any form with a page refresh. Simple and useful.

​https://slater.app/community_library/refresh-after-form-submit-1bf16338-06b4-464d-b7ac-dab1f3a2f15b​

​

πŸ“ Handle Resize

Optimize window resize handling by debouncing rerendering of elements.

​https://slater.app/community_library/handle-resize-6290e135-3d12-442b-9263-b939a8f328e5​

​

Not what you are looking for? Go check out the full Community Library.

Do you have useful scripts that the Webflow community could use? Let us know and we'll get them added.

​

Javascript 101: The mousemove Event

We've been creating an interactive experiences that leverages the mousemove event this week. It's the same project mentioned in the Interactive Swarm script. Take a look if you haven't (https://slater-original.webflow.io/swarm) and then let's run through a more basic example that can illustrate how to make an interactive expereince with the mousemove event.

For this example, let's create a simple game where you can move a box around the screen with your mouse!

First, we'll start with some basic HTML:

<div id="box"></div>

And add a bit of CSS to make it visible:

#box {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
}

Now for the fun part - the JavaScript:

// Get our box
let box = document.getElementById('box');

// Listen for mouse movement on the whole page
document.addEventListener('mousemove', function(e) {
  // Move the box to where the mouse is
  box.style.left = e.clientX + 'px';
  box.style.top = e.clientY + 'px';
});

Here's what this code does:

  • We find our box using document.getElementById('box').
  • We tell the computer to listen for when the mouse moves anywhere on the page.
  • When the mouse moves, we run a function that:
    • Sets the box's left position to where the mouse is horizontally (e.clientX)
    • Sets the box's top position to where the mouse is vertically (e.clientY)

The e in function(e) is like a package of information about the mouse movement (try logging it to the console). e.clientX tells us how far right the mouse is, and e.clientY tells us how far down it is. We add 'px' at the end because CSS needs to know we're talking about pixels.

And that's it! Now when you move your mouse around the page, the red box will follow it.

​

Your projects, supported by Slater

Tamir shared this beautiful Rivers project with us on Twitter. Check it out and give him a follow!

​
​

​

Happy coding!

πŸ€™ the Slater Team

​

If Slater helps you create better websites, please support the team behind it.

Welcome To Slater!

Slater resources, updates and community activity

Read more from Welcome To Slater!

We're back from a company-wide summer pause (or winter pause for our Southern Hemisphere team members). Edgar Allan is hitting it's numbers! Let's look at some new Community Library scripts: πŸ‘€ Dynamically loads HTML content based on a random number. This is a quick script we wrote to give a dynamic intro into a soon-to-be-released https://edgarallan.com. https://slater.app/community_library/random-content-aee7f7f2-3ab8-4e6f-887e-ea54cad0ebbf From Jared Malan ✍️ Create a variable for your...

We're rolling into a holiday week in the US. If you need an animated American flag to celebrate, look no further. But! We have users from all over the world. For those outside of the US, try updating the code to make an animated flag of your country (hint: use AI). If you make one, please share. We'll get it added to the Community Library. πŸ‡ΊπŸ‡Έ Render and animate an American flag on a canvas with dynamic waving effects....

We launched the Community Library this week. Let's highlight some of the useful resources. πŸ–¨οΈ Copy to Clipboard Copy text to clipboard on button click with visual feedback. https://slater.app/community_library/copy-to-clibboard-41c30ebc-180e-4e9d-b747-f427f1f05151 πŸ‘» Reveal Words on Scroll Animate text on scroll with GSAP, ScrollTrigger, and SplitType. https://slater.app/community_library/text-by-words-with-scroll-b0810bf3-64b6-40a4-b5ad-46c784fdcc76 πŸ›€ Remove https:// From Text Link Remove...