Kallistero's Effects Maker (make visual effects that are usable on web pages!)

Kallistero
Full Member ⚓︎

SOON.

⛺︎ My Room

Kallistero's Effects Maker (make visual effects that are usable on web pages!)

« on: August 26, 2023 @34.13 »

This is the biggest solo Webdev project I've done yet. I present to you:

Kallistero's Effects Maker

Make & customize your own animated visual effects, and if you want, get their code! The information is on the page. Get creative, share your opinions, suggestions, screenshots, anything at all!

Copy the code for the effects, and attach them to ANY of the elements on your Web pages! You can also just mess around with the effects, just to have fun!

Today is the one-month anniversary of my site going live, and I'm glad I already have something to give back to the community. Including all of the effects that I wrote here, there are over 10,000 lines of entirely self-written code behind this thing. All of the visual effects are the same ones I made for my Web pages, repackaged and made extremely customizable for anyone else's use!

Like it says on the page, this is a prototype version, so I do have changes planned, and I welcome any constructive criticism. I already have the next visual effect planned (for my Links page), and I also plan to make at least one new visual effect for any new page type I create. That way, you can also expect the Effects Maker to stay on my update radar for a while!

Again, I'm interested in what everyone has to say, so if you're having fun or having trouble or something seems broken in any good or bad way, I encourage you, share your thoughts. I made this for everyone to enjoy, so...

Enjoy!


« Last Edit: August 29, 2023 @235.89 by kallistero »	Logged

I miss the pomegranate

DiffydaDude
Sr. Member ⚓︎

Nyah nyah!

⛺︎ My Room
Matrix: Chat!
XMPP: Chat!

Wishing you Happy Times when you're online!

Re: Kallistero's Effects Maker (make visual effects that are usable on web pages!)

« Reply #1 on: August 26, 2023 @61.47 »

I'd love to insert some of these Earthbound-looking effects onto my website, do you have any more info on how to insert them? I only know basic html so I dont know too much about inserting stuff


	Logged

Kallistero
Full Member ⚓︎

SOON.

⛺︎ My Room

Re: Kallistero's Effects Maker (make visual effects that are usable on web pages!)

« Reply #2 on: August 26, 2023 @81.93 »

Quote from: DiffydaDude on August 26, 2023 @61.47

I'd love to insert some of these Earthbound-looking effects onto my website, do you have any more info on how to insert them? I only know basic html so I dont know too much about inserting stuff

Under the "GET THE CODE" tab, there's a text box. Copy what's in that box, and in your HTML, paste it after "<head>" but before "</head>" in your HTML.

Next, you click the name of the effect you want, like "Cybersparks 1," and it'll display ONLY that effect, to make sure you don't confuse it for another effect. If it's the correct effect, then the window that pops up will have the code for that effect. You want to copy that code and paste it in your HTML, after "<body>" but before "</body>" to make it apply to your entire page!

If it's still not clear, feel free to let me know where you're having trouble!

As a bonus, you could also attach the effect to a specific item on your page, like a button or a div, by giving that item an "id" attribute (like <button id="my-button"></button>) and putting that same id ("my-button" in this example) into the little popup window where your your code is, in the TOP text box that's there. Next, you check the box that appears. The code changes by itself so after you've checked the box, you just copy what's in that text box at the bottom. Next, just paste that code near the bottom of your HTML page, right before the "</body>" closing tag. Other things can be underneath that code, just so long as the thing with the ID is still ABOVE the place where you put the code.


« Last Edit: August 26, 2023 @96.62 by kallistero »	Logged

I miss the pomegranate

DiffydaDude
Sr. Member ⚓︎

Nyah nyah!

⛺︎ My Room
Matrix: Chat!
XMPP: Chat!

Re: Kallistero's Effects Maker (make visual effects that are usable on web pages!)

« Reply #3 on: August 26, 2023 @145.34 »

YESS THANK YOU IT LOOKS SO F_ING GOOD!!!!! I love it!!!


	Logged

Kallistero
Full Member ⚓︎

SOON.

⛺︎ My Room

Re: Kallistero's Effects Maker (make visual effects that are usable on web pages!)

« Reply #4 on: September 02, 2023 @982.42 »

Quote from: DiffydaDude on August 26, 2023 @145.34

YESS THANK YOU IT LOOKS SO F_ING GOOD!!!!! I love it!!!

Hey, glad you've enjoyed it!

I've added another visual effect and also added lots of quality-of-life changes!

I think the coolest new addition is the 2-dimensional sliders, so you can control the positions & sizes of things with real-time visual feedback, before fine-tuning them with numbers, as pictured below.

You can also:

re-import any effect code in a new button at the top, then continue mess with that effect's settings again on the page
freeze the effects in place, one at a time or all at once
delete effects one at a time
use sliders that are synced up to the number inputs (and you can also input what limits are on the sliders!)
submit feedback through one of the pages on the info panel
mess with a few new settings that are on the effects
experience much less bugs!

You can see the 6th and newest effect in action on my Links page (WIP), the Glowflakes that are slowly falling from the top of the page. In the Effects Maker, you can control their sizes, colors, spawn rates, motions, all the configurations you could expect if you've seen the others!

Have fun

capture (6).png (111.74 kB, 1366x625 - viewed 21 times.)
	Logged

I miss the pomegranate

larvapuppy
Full Member ⚓︎

⛺︎ My Room

Re: Kallistero's Effects Maker (make visual effects that are usable on web pages!)

« Reply #5 on: September 02, 2023 @355.80 »

This is so cool!     I added a glowflake effect to my landing page. Thanks so much for your hard work on this!


	Logged

the end of an era, one starts anew

Pages: [1]

« previous next »

Vaguely similar topics! (3)