Continuous text change depicting encryption/security using code
I want to achieve an effect like this using code. Will start from random and finish at a specific sentence like "Security @ Apple" (without the background effect)
8 Replies
Hyperplexed
YouTube
The Ultimate Hacker Effect That Anyone Can Do
Watch as I show you how to recreate the ultimate hacker text effect from https://kprverse.com.
Support the channel: https://ko-fi.com/hyperplexed (accepts PayPal, card, etc).
Tools used: HTML, CSS, JavaScript
CodePen: https://cdpn.io/rNrJgrd
Music licensed by Audio Socket:
- Dominique Tey - Let It Out
- Dominique Tey - Let It Out - Instrum...
Here is a good video tutorial you may find useful
Here you go (very basic)
https://codepen.io/Christian-Lorenz/pen/XWoBXjj
Edit: Added some comments / clean up a little bit
Here a bit more brute force code cracking
It will pick a random character per position and compares it to the secret. When all characters match, it stops. (can take a while because it is random)
https://codepen.io/MarkBoots/pen/MWZByvr
(Could be a bit neather, but it works)
@MarkBoots @bibamann @Matt Thanks guys, this is exactly what I needed. Just a follow up though, how can I make the entire screen go like this? Adding more h1's and longer strings isn't a good idea I think as then it wouldn't be responsive. (Just to give you guys context I was thining the entire black screen would be filled with these continuously changing letters and numbers. At the centre there would a translucent box with a logo of the company and underneath it would also be random characters going off. And then all of then simultaneously both backdrop and the main one under the logo comes to halt revealing their respective texts. Well all the text at the back will be same though, that is the company name.)
the main text wont be a problem, but the full background text is
If you want to keep it responsive, the amount of characters that fit the window will change, so that'll be tricky. you could just do a really long string of random characters and hide the overflow, also maybe use clamp for font-size
Something like this could work for the backdrop text.
It does include some magic numbers that probably can be solved with handy math's (but unfortunatly don't have much time anymore today)
https://codepen.io/MarkBoots/pen/zYyLogb
--edit: minor changes to keep it more organized
thanks, I'll see what I can do with it