Giving the old corner ribbon a refresh with a nice animated gradient cycling between two colors using the hue-rotate() CSS function. Slap some text or an SVG in there and you've got yourself one fancy banner. Wanted this for a project, so i figured I'd take advantage of the live reloading on here. I'll come back one day and add ribbons to the other 3 corners.
A Pen by Code_Nit_Whit on CodePen.
A trippy CSS + JavaScript animation looping the duplication of rotating squares, then reducing the size of and nesting a child square element... and repeating. Threw a nice color changing gradient effect for good measure.
A Pen by Code_Nit_Whit on CodePen.
Pretty simple. Falling , rotating squares morph into circles and then back. Background color, size, animation duration, and location in X are randomly generated. A new shape is created every 4 seconds. A z index of -1 means in most cases this can run in the background with covering important content or getting in the way. Limits quantity of existing animated to 10, killing of each element after 6 animation iterations to avoid monotony. Animation is pure CSS. Elements created and randomized attributes set in JS.
A Pen by Code_Nit_Whit on CodePen.
| // ╔═══╗ ╔╗ ╔╗ ╔╗ ╔═══╗ ╔╗ | |
| // ║╔═╗║ ╔╝╚╗ ║║ ╔╝╚╗ ║╔══╝ ╔╝╚╗ | |
| // ║║ ║║╔══╗╚╗╔╝╔╗ ║║ ╔╗╔══╗╚╗╔╝╔══╗╔═╗ ║╚══╗╔══╗╔═╗╚╗╔╝╔═╗╔══╗╔══╗╔══╗ | |
| // ║╚═╝║║╔╗║ ║║ ╠╣╔═══╗║║ ╔╗╠╣║╔╗║ ║║ ║╔╗║║╔╝ ║╔══╝║╔╗║║╔╝ ║║ ║╔╝║╔╗║║══╣║══╣ | |
| // ║╔═╗║║║║║ ║╚╗║║╚═══╝║╚═╝║║║║║║║ ║╚╗║║═╣║║ ╔╝╚╗ ║╚╝║║║ ║╚╗║║ ║║═╣╠══║╠══║ | |
| // ╚╝ ╚╝╚╝╚╝ ╚═╝╚╝ ╚═══╝╚╝╚╝╚╝ ╚═╝╚══╝╚╝ ╚══╝ ╚══╝╚╝ ╚═╝╚╝ ╚══╝╚══╝╚══╝ | |
| // | |
| // FOR FORMATTED COMMENT BLOCKS | |
| // | |
| /*٩◔̯◔۶ █████▓▓▓▓▒▒▒░░ Whatever Script Comment You Want to Protect ░░▒▒▒▓▓▓▓▓█████ ఠ ͟ಠ*/ |
"Scrambling" an SVG icon by replacing its first moveto event in each of its path's data attributes with randomized coordinates and reversed letter casing (switches between absolute and relative positioning). Then unscrambling the icon back to its original form when the icon is clicked. Utilizes anime.js..
A Pen by Code_Nit_Whit on CodePen.
Upon receiving a paragraph element from the HTML page, the script dissects the text, assigning each character to its own encapsulated span element. Through this separation, the script gains the ability to manipulate individual characters. The program randomly transforms characters, cycling through an array of non-alphabetic symbols such as punctuation marks, numerals, and special characters. The program adjusts the size and styling of characters, enhancing the visual impact. It achieves this through class list manipulation and CSS transition properties, facilitating seamless simultaneous animations. This approach ensures that each transformation unfolds smoothly without interfering with others. The end result is a glitchy animated transition reminiscent of the falling code from th matrix movie.
A Pen by Code_Nit_Whit on [Cod