β β We're adding new community library scripts each week. Let's take a look at some of them. πΎ An interactive swarmCreate 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 submitClear any form with a page refresh. Simple and useful. βhttps://slater.app/community_library/refresh-after-form-submit-1bf16338-06b4-464d-b7ac-dab1f3a2f15bβ β π Handle ResizeOptimize 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 EventWe'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:
And add a bit of CSS to make it visible:
Now for the fun part - the JavaScript:
Here's what this code does:
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 SlaterTamir 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.
|
Slater resources, updates and community activity
You may recall that the original Slater had access controls for projects and files. We didn't want just anyone going in there and rewriting our Javascript. However, managing access for teammates became cumbersome (I even added a "god mode" to give myself access to any project or file). Since we generally trusted each other and never had issues, we decided to leave it out of the latest version of Slater. That said, we understand that some teams work differently, and maintaining control can be...
We're going to take a brief break from the regular newsletter format to celebrate the release of ask.edgarallan.com. Today, let's hear from Mason Poe, the Founder of Edgar Allan and Slater. I'm thrilled to announce the launch of ask.edgarallan.com and the start of a new conversation. We can all feel it: the web is changing in ways that seem both dramatic and, in a weird way, imperceptible. At times, itβs hard to know where to start exploring what could be next. Sometimes, when you think...
Our new Edgar Allan website, which we're launching next week π€«, uses over 3,000 lines of code. Itβs a bit unwieldy! To better support the new EA website and similar JavaScript-heavy projects, weβve added slater_import. This feature allows you to write a function once and then reuse it across all the files in your project. You can see how to use it here. β¬οΈ Not ready to watch the video? No problem. To import a file, simply start typing the name of the file you want to import and click on the...