Inspired of http://codepen.io/nenuadrian/details/iHoKq (not works for now) By the way this pen already inspired many other people :) And I have my first article about this - https://martijnbrekelmans.com/generative-art/heart-deconstruction/techniques.html Thank you!
techbrain19
/ auto-typing-text-function.markdown
Created
February 13, 2024 15:37
Auto Typing Text (function)
I was looking around for an auto typing thing where you didn't have to change anything other than the text and it still work perfectly. Now either I wasn't looking hard enough or I just didn't see one on here, so I decided to create my own. I wrapped it up in a small function so all you have to do is call the function on your class and boom, typing text. You can also adjust the speed at which it "types".
A Pen by Connor Gaunt on CodePen.
techbrain19
/ css-animations-obvious-cta-buttons.markdown
Created
February 13, 2024 15:34
CSS Animations: Obvious CTA Buttons
techbrain19
/ i-love-you-mo-js-animation.markdown
Created
February 13, 2024 15:33
I Love You (mo.js animation)
A Pen by Anton Mudrenok on CodePen.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href='https://fonts.googleapis.com/css?family=Ubuntu:400,300' rel='stylesheet' type='text/css'> | |
| <div class="loader"> | |
| <canvas width="480px" height="480px" id="loader"></canvas> | |
| <h1>Loading</h1> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class='console-container'><span id='text'></span><div class='console-underscore' id='console'>_</div></div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="monster"> | |
| <svg version="1.0" xmlns="http://www.w3.org/2000/svg" | |
| width="124.000000pt" height="174.000000pt" viewBox="0 0 124.000000 174.000000" | |
| preserveAspectRatio="xMidYMid meet"> | |
| <g transform="translate(0.000000,174.000000) scale(0.100000,-0.100000)" | |
| fill="#000000" stroke="none"> | |
| <path d="M0 870 l0 -870 620 0 620 0 0 870 0 870 -620 0 -620 0 0 -870z m745 | |
| 779 c17 -10 40 -23 53 -29 12 -5 22 -16 22 -24 0 -8 12 -19 28 -24 25 -9 26 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="container"> | |
| <div id="message"> | |
| <a id="animate" href="#">Transmit</a> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <article class="starwars"> | |
| <audio preload="auto"> | |
| <source src="https://s.cdpn.io/1202/Star_Wars_original_opening_crawl_1977.ogg" type="audio/ogg" /> | |
| <source src="https://s.cdpn.io/1202/Star_Wars_original_opening_crawl_1977.mp3" type="audio/mpeg" /> | |
| </audio> | |
| <section class="start"> | |
| <p> | |
| Start <br> <span>Star Wars opening crawl</span> <br> from 1977 | |
| <br> |