Discuss Scratch

TheSmartGuy1234
Scratcher
1000+ posts

Scratch tech tips (except not april fools)

SCRATCH TECH TIPS
tech tips - but in scratch!



it doesn't flow well…

ANSWERED QUESTIONS
  1. none yet

Help with scripts random code

Last edited by TheSmartGuy1234 (April 23, 2022 06:26:32)

TheSmartGuy1234
Scratcher
1000+ posts

Scratch tech tips (except not april fools)

NO ONE FOR FREE TECH TIPS BUMP?

(NOFFTTB)

huh all caps????????????????????????????????????????????????????????????????????
ahk fails

ahh write noffttb instead of NOFFTTB.

but I did
NOFFTTB::(
No one for free tech tips bump?
(NOFFTTB)
)

what

Last edited by TheSmartGuy1234 (April 17, 2022 22:10:39)

god286
Scratcher
1000+ posts

Scratch tech tips (except not april fools)

I don't know if this counts but:

good light audacity theme??
-EmeraldThunder-
Scratcher
1000+ posts

Scratch tech tips (except not april fools)

On my website, I have two themes controlled by the button in the top right.
Light:

Dark:


When I press the button, I'd like the colour change to radiate out from the icon, is this even possible?
Chiroyce
Scratcher
1000+ posts

Scratch tech tips (except not april fools)

-EmeraldThunder- wrote:

When I press the button, I'd like the colour change to radiate out from the icon, is this even possible?
Yep - using CSS's animation property - https://stackoverflow.com/questions/44783546/radiateout-with-css-animation

Now that example is on hover, and since you want on click, you can use an onclick eventlistener to add a class to it, and using the animationend evenetlistener, to remove the class for it. Like this -
element.addEventListener("click", () => element.classList.add("radiate"))
element.addEventListener("animationend", () => element.classList.remove("radiate"))

and your CSS should look like this
.radiate {
    /* .5s is the duration of the animation, you can change this to any number of seconds */
    animation: radiate .5s; 
}
@keyframes radiate {
    to {
        /* a scale of 1 is 100% size, 1.5 will be 150% */
        transform: scale(1.5);
        /* it should disappear completely after the animation */
        opacity: 0;
    }
}

Last edited by Chiroyce (April 10, 2022 14:56:52)

god286
Scratcher
1000+ posts

Scratch tech tips (except not april fools)

Teach me how to detect trustworthy open source software
skymover1239
Scratcher
500+ posts

Scratch tech tips (except not april fools)

god286 wrote:

Teach me how to detect trustworthy open source software
Check for number of contributions, and how many of the PRS are being reviewed.
god286
Scratcher
1000+ posts

Scratch tech tips (except not april fools)

skymover1239 wrote:

god286 wrote:

Teach me how to detect trustworthy open source software
Check for number of contributions, and how many of the PRS are being reviewed.
Only 4 people are working on the project, all PRs merged
skymover1239
Scratcher
500+ posts

Scratch tech tips (except not april fools)

god286 wrote:

Quote
Hmm, what project are we talking about here?
k0d3rrr
Scratcher
1000+ posts

Scratch tech tips (except not april fools)

How do I make an infinite loop in HTML?
PoIygon
Scratcher
1000+ posts

Scratch tech tips (except not april fools)

k0d3rrr wrote:

How do I make an infinite loop in HTML?
HTML is a markup program not a scripting program. Of you wanna do it in python you do “while true” and in js you do “while (true) {}”
k0d3rrr
Scratcher
1000+ posts

Scratch tech tips (except not april fools)

PoIygon wrote:

k0d3rrr wrote:

How do I make an infinite loop in HTML?
HTML is a markup program not a scripting program. Of you wanna do it in python you do “while true” and in js you do “while (true) {}”
Okay!
And then this happened:
TheSmartGuy1234
Scratcher
1000+ posts

Scratch tech tips (except not april fools)

k0d3rrr wrote:

How do I make an infinite loop in HTML?
But you can do
<script type="javascript">
while (true){
// blah blah
}
</script>
NFlex23
Scratcher
1000+ posts

Scratch tech tips (except not april fools)

Chiroyce wrote:

(#5)

-EmeraldThunder- wrote:

When I press the button, I'd like the colour change to radiate out from the icon, is this even possible?
Yep - using CSS's animation property - https://stackoverflow.com/questions/44783546/radiateout-with-css-animation

Now that example is on hover, and since you want on click, you can use an onclick eventlistener to add a class to it, and using the animationend evenetlistener, to remove the class for it. Like this -
element.addEventListener("click", () => element.classList.add("radiate"))
element.addEventListener("animationend", () => element.classList.remove("radiate"))

and your CSS should look like this
.radiate {
    /* .5s is the duration of the animation, you can change this to any number of seconds */
    animation: radiate .5s; 
}
@keyframes radiate {
    to {
        /* a scale of 1 is 100% size, 1.5 will be 150% */
        transform: scale(1.5);
        /* it should disappear completely after the animation */
        opacity: 0;
    }
}
A better version of that code would be this:
.radiate:active {
  transform: scale(1.5);
  opacity: 0;
  transition: all .5s; /* Applying transition after makes it single-directional */
}
No JavaScript needed!

Last edited by NFlex23 (April 22, 2022 16:20:00)

Socialix
Scratcher
1000+ posts

Scratch tech tips (except not april fools)

TheSmartGuy1234 wrote:

k0d3rrr wrote:

How do I make an infinite loop in HTML?
But you can do
<script type="javascript">
while (true){
// blah blah
}
</script>
that still needs the power of yellow programming language

THINK INSIDE THE BOX
ScolderCreations
Scratcher
1000+ posts

Scratch tech tips (except not april fools)

Using CSS properties, it is possibly possible to create an infinite loop in HTML. Using the after property, I theorize that you might be able to use it to create an element that will be affected by the property, which would happen infinitely. Although there is probably some sort of limit preventing that from happening.
TheSmartGuy1234
Scratcher
1000+ posts

Scratch tech tips (except not april fools)

Socialix wrote:

TheSmartGuy1234 wrote:

k0d3rrr wrote:

How do I make an infinite loop in HTML?
But you can do
<script type="javascript">
while (true){
// blah blah
}
</script>
that still needs the power of yellow programming language

THINK INSIDE THE BOX
well the power's user is HTML so boom
Maximouse
Scratcher
1000+ posts

Scratch tech tips (except not april fools)

ScolderCreations wrote:

Using CSS properties, it is possibly possible to create an infinite loop in HTML. Using the after property, I theorize that you might be able to use it to create an element that will be affected by the property, which would happen infinitely. Although there is probably some sort of limit preventing that from happening.
CSS can't create elements, so I don't think that's possible. Even if it was, it still wouldn't be “an infinite loop in HTML”.
TheSmartGuy1234
Scratcher
1000+ posts

Scratch tech tips (except not april fools)

Maximouse wrote:

ScolderCreations wrote:

Using CSS properties, it is possibly possible to create an infinite loop in HTML. Using the after property, I theorize that you might be able to use it to create an element that will be affected by the property, which would happen infinitely. Although there is probably some sort of limit preventing that from happening.
CSS can't create elements, so I don't think that's possible. Even if it was, it still wouldn't be “an infinite loop in HTML”.
Maybe
element::after::after::after...
and some way of doing that forever is what ScolderCreations is talking about
TheSmartGuy1234
Scratcher
1000+ posts

Scratch tech tips (except not april fools)

god286 wrote:

Teach me how to detect trustworthy open source software
open github. read.

Powered by DjangoBB