JSFiddle - React, Tailwind, and code Playground

jQuery 3D Text Intro Animation

by Jennifer Perrin

HTML

<div id="spaceContainer"> 
        <div class="spaceWord">This</div>
        <div class="spaceWord">is</div>
        <div class="spaceWord">the</div>
        <div class="spaceWord">most</div>
        <div class="spaceWord">Awesome</div>
        <div class="spaceWord">Intro</div>
        <div class="spaceWord">Ever</div>
        <div class="spaceWord">made</div>
        <div class="spaceWord">In</div>
        <div class="spaceWord">HTML AND JAVASCRIPT!!!!</div>
        <div class="spaceWord">You Can Change:</div>
        <div class="spaceWord">Time Speed, Easing Type</div>
        <div class="spaceWord"> Zoom Level,Bounding Area </div>
        <div class="spaceWord">And much more</div>
        </div>

CSS

body
{
    color:#000;
    overflow:hidden
}
.endMessage{
    visibility: hidden;
    font: italic 1.05em/1.55em "Skolar Italic", "Times New Roman", serif;
}
            .spaceWord{
            text-align:center;
                position:absolute;
                color:#000;
                font:bold 10px Arial,sans-serif;
                visibility:hidden
                
                
            }
            .spaceLogo img{
                
                position:absolute;
                visibility:hidden;
                
                
            }
            
            .camera{
                position:absolute;
                color:#000;
                font:bold 10px Arial,sans-serif;
                visibility:hidden

                
            }
            .camera3D{
                position:absolute;
                color:#000;
                font:bold 10px Arial,sans-serif;
                visibility:hidden

                
            }

JavaScript

jQuery.easing['jswing'] = jQuery.easing['swing'];
jQuery.extend(jQuery.easing, {
    def: 'easeOutQuad',
    swing: function(x, t, b, c, d) {
        return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
    },
    easeInQuad: function(x, t, b, c, d) {
        return c * (t /= d) * t + b;
    },
    easeOutQuad: function(x, t, b, c, d) {
        return -c * (t /= d) * (t - 2) + b;
    },
    easeInOutQuad: function(x, t, b, c, d) {
        if ((t /= d / 2) < 1) return c / 2 * t * t + b;
        return -c / 2 * ((--t) * (t - 2) - 1) + b;
    },
    easeInCubic: function(x, t, b, c, d) {
        return c * (t /= d) * t * t + b;
    },
    easeOutCubic: function(x, t, b, c, d) {
        return c * ((t = t / d - 1) * t * t + 1) + b;
    },
    easeInOutCubic: function(x, t, b, c, d) {
        if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
        return c / 2 * ((t -= 2) * t * t + 2) + b;
    },
    easeInQuart: function(x, t, b, c, d) {
        return c * (t /= d) * t * t * t + b;
    },
    easeOutQuart: function(x, t, b, c, d) {
        return -c * ((t = t / d - 1) * t * t * t - 1) + b;
    },
    easeInOutQuart: function(x, t, b, c, d) {
        if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
        return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
    },
    easeInQuint: function(x, t, b, c, d) {
        return c * (t /= d) * t * t * t * t + b;
    },
    easeOutQuint: function(x, t, b, c, d) {
        return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
    },
    easeInOutQuint: function(x, t, b, c, d) {
        if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
        return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
    },
    easeInSine: function(x, t, b, c, d) {
        return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
    },
    easeOutSine: function(x, t, b, c, d) {
        return c * Math.sin(t / d * (Math.PI / 2)) + b;
    },
    easeInOutSine: function(x, t, b, c, d) {
        return -c / 2 * (Math.cos(Math.PI * t / d) -...