Random Animation and Grid Practice


by Jeremy Caudle
notes

Getting my practice in on a Friday night can be a bit tough, but I have to keep the streak going. Today's is a bit random.

Jeremy CaudleJeremy Caudle

Over the last 21 years, I have been learning about the web and working on websites. My first website existed only on an old 100 MHz PC, and any images I had were either made by me or downloaded from the web onto a floppy disk wherever I could get access. I didn't have an internet connection at home, but I made the best of every opportunity to get online. My first exposure to HTML was within a book, HTML 4 for the World Wide Web by Elizabeth Castro, at my local library. That book started my obsession with building for the web and I'm still actively learning about it today.

If you would like to get in touch, just send an email to jeremy@jeremycaudle.com.

View the code:

HTML and JS 
<div class="codedoodle-block">
        <h1><span class="screen-reader-text">Jeremy Caudle</span><span>J</span><span>e</span><span>r</span><span>e</span><span>m</span><span>y</span> <span>C</span><span>a</span><span>u</span><span>d</span><span>l</span><span>e</span></h1>
        <p>Over the last 21 years, I have been learning about the web and working on websites. My first website existed only on an old 100 MHz PC, and any images I had were either made by me or downloaded from the web onto a floppy disk wherever I could get access. I didn't have an internet connection at home, but I made the best of every opportunity to get online. My first exposure to HTML was within a book, HTML 4 for the World Wide Web by Elizabeth Castro, at my local library. That book started my obsession with building for the web and I'm still actively learning about it today.</p>
        <footer>If you would like to get in touch, just send an email to jeremy@jeremycaudle.com.</footer>
    </div>
CSS 
/* Variables */

        :root {
            --headline: headline;
            --footer: footer;
        }

        /* Code Block styles */

        div.codedoodle-block {
            margin: 3rem auto;
            width: auto;
            max-width:60%;
            height: auto;
            background-color: transparent;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .screen-reader-text {
            color: transparent;
            position: absolute;
            top: 0;
            left: -10000px;
        }

        @keyframes float {
            from {transform: translateY(-10px);}
            to {transform: translateY(10px);}
        }

        @supports (display:grid) {

            .codedoodle-block h1 {
                display: grid;
                grid-template-columns: repeat(6, 1fr);
                grid-template-rows: 100px 100px;
                align-items: center;
                justify-items: center;
            }

            .codedoodle-block h1 span:nth-of-type(2n) {
                display: block;
                animation: float 5s ease-in-out 0s infinite alternate;
            }

            .codedoodle-block h1 span:nth-of-type(3n) {
                display: block;
                animation: float 5s ease-in-out 0s infinite alternate-reverse;
            }

        }

Tags