Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                .loader
    .loader_inner
#canvas
.ui
    .noise
    .vig
    .bloom
    .fullscreen
        %i.fa.fa-expand
    .logo
        %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/notEarthLogo.png'}
    .gems
        %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/gemsBg.png'}
    .friends
        %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/friendsBg.png'}
    .follow
        %a{:href => 'https://codepen.io/jcoulterdesign', :target => '_blank'}
            %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/followBg.png'}
    .left.button
        %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/arrowBg.png'}
    .right.button
        %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/arrowBg.png'}
    .box
        .box_inner{'data-deep-ui' => 'true', 'data-deep-animate' => 'false', 'data-deep-animate-time' => '.7'}
            .box_inner__title{'data-depth' => '20'}
                Noob loot crate
            .box_inner__decal
                %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/decalBg.png'}
            .box_inner__text{'data-depth' => '10'}
                You probably wont get much in this loot crate to be honest, but what can you expect for such a low cost?
            .box_inner__cost{'data-depth' => '31'}
                .left
                    %i.fa.fa-diamond
                .right
                    20,000
            .box_inner__cta{'data-depth' => '31'}
                %span{'data-depth' => '44'} Buy with credits
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Montserrat:200,400');
body {
    background: black;
    height: 100vh;
    margin: 0;
    font-weight:200;
    overflow: hidden;
        margin: 0;font-family: 'Montserrat', sans-serif;

}

* {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */      
}

#canvas {pointer-events:none}

* {
    box-sizing: border-box;
}

.vig,
.noise,
.bloom {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    height: 100%;
    width: 100%;
    z-index: 1;
    pointer-events: none;
}

.vig {
    background: -webkit-radial-gradient(center, ellipse cover, transparent 0%, rgba(0, 0, 0, 0.29) 100%);
}

.noise {
    background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/noiseOverlay.png');
}

.bloom {
    background: #7d0a3e;
    opacity: 0.1;
}

.logo {
    position: absolute;
    left: 70px;
    top: 70px;
    z-index: 2;
    img {
        width: 220px;
    }
    .spinner {
        position: absolute;
        left: 22px;
        top: 19px;
        width: 2px;
        background: rgba(255, 255, 255, 0.95);
        height: 31px;
        animation: spin 20s linear infinite;
        transform-origin: 1px 4px;
        border-radius: 100px;
    }
}

.gems {
    position: absolute;
    right: 70px;
    top: 70px;
    z-index: 2;
    img {
        width: 140px;
    }
}

.friends {
    position: absolute;
    right: 70px;
    bottom: 70px;
    z-index: 2;
    img {
        width: 180px;
    }
}

.fullscreen{
    position: absolute;
    z-index: 10;
    color: white;
    top: 72px;
    right: 240px;
    cursor: pointer;
    opacity: .6;
    transition:all .2s;
    &:hover{
        opacity:1;
    }
}

.follow {
    position: absolute;
    left: 50px;
    bottom: 40px;
    z-index: 3;
    img {
        width: 300px;
    }
}

.loader{
    width:500px;
    height:2px;
    background:white;
    position:absolute;
    left:0;
    right:0;
    margin:auto;
    top:50%;
    transform:translateY(-50%);
    &_inner{
        background:#913b92;
        width:0%;
        position:absolute;
        left:0;
        top:0;
        height:100%;
        
    }
}
#canvas {
    display:none;
    width: 600px;
    height: 600px;
    float: left;
}

.ui{
    display:none;
}
.left.button,
.right.button {
    position: absolute;
    z-index: 20;
    font-size: 30px;
    top: 50%;
    color: white;
    transform: translateY(-50%);
    opacity: 0.7;
    transition: all .2s;
    &:hover {
        opacity: 1;
        cursor: pointer;
    }
    img {
        width: 30px;
    }
}

.right.button {
    right: 70px;
    transform: rotate(180deg);
    transform-origin: 15px 0px;
}

.left.button {
    left: 70px;
}

@keyframes spin {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(360deg)
    }
}

.box {
    position: absolute;
    z-index: 3;
    width: 400px;
    left: 350px;
    right: 0;
    margin: auto;
    top: 50%;
    transform: translateY(-50%);
       
    background:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/scifiBg.png');
     background-size: 100px;
    background-position:left;
    background-repeat:no-repeat;
    &_inner {
            padding: 50px 0px 50px 100px;
        &__title {
            color: white;
            text-transform: uppercase;
            margin-bottom: 50px;
            font-size: 26px;
        }
        &__decal {
            img {
                    position: absolute;
    left: 83px;
    width: 210px;
    top: 73px;
            }
        }
        &__text {
                color: white;
    opacity: 0.6;
    line-height: 23px;
    margin-top: -13px;
    font-size: 12px;
        }
        &__cost{
            overflow:hidden;
margin:20px 0;
            .left{
                    float: left;
    width: 20%;
    top: 9px;
    color: #31e2c8;
    position: relative;
    font-size: 24px;
            }
            .right{
                   font-size:36px;
                color:white;
                font-weight:400;
            }
        }
        &__cta{
                background: -webkit-linear-gradient(top, #ffa970 0%, #e8850a 40%, #ef750c 100%);
    text-align: center;
        padding: 26px 0px;
    cursor: pointer;
    text-shadow: 0px 2px #94632f;
    font-weight: 400;
    width: 230px;
    color: white;
    -webkit-transition: all .2s;
    transition: all .2s;
            font-size:13px;
    text-transform: uppercase;
                box-shadow: 0px 0px 20px rgba(255, 165, 0, 0.31);
    border-radius: 3px;
            &:hover{
                   box-shadow: 0px 0px 30px rgba(255, 165, 0, 0.61);

            }
            span{
                width: 100%;
    left: 0;
                top:10px;
    position: absolute;
            }
        }
    }
}
              
            
!

JS

              
                // ## Title: THREE JS game style immersive slider selection screen
// ## Author: Jamie Coulter
// ## Date: 10/03/2017

// ## Let"s get everything set up
var scene,
    camera,
    cameraControls,
    can_click = 1,
    position = 0,
    spotLight,
    particles = [],
    Lights = [],
    gems = [];

// ## Let"s load in our audio
crateSmash = new Audio("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/31622__srehpog__light-crate-smash1.wav"); // Crate bump
bg = new Audio("https://www.jamiecoulter.co.uk/bensound-betterdays.mp3"); // Background music
bgEffect = new Audio("https://www.jamiecoulter.co.uk/wooden.mp3"); // Background creaks
menuclick = new Audio("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/menuclick.wav"); // Arrow click sound effect
slide = new Audio("https://www.jamiecoulter.co.uk/slide.mp3"); // Transition sound

// ## Scene options
wireframe = false; // Set to true to see object wireframes
audio = true; // Set to false if audio doing head in

sceneLoadDelay = 500; // Delay from when fully loaded to fade in scene

cameraX = 11; // Camera x position
cameraY = 1; // Camera y position
cameraZ = 11; // Camera z position
cameraZoom = 2; // Camera zoom value
cameraMoveDelay = 0.5; // Delay after left/right clicked before the cam moves
cameraMoveSpeed = 1.2; // How fast cam moves to next crate

crateOffset = 20; // How far each crate is apart
sceneOffset = 1; // The scene offset

sceneBg = "black"; // The scene global color

globalAmbienceIntensity = 0.06; // Set general ambience
globalAmbienceColor = "#d39cf3"; // General ambience color

spotLightColor = "#ab4fcd";
spotLightIntensity = 10;

floorWidth = 200; // Width of the grass floor
floorHeight = 100; // Height of the grass floor

parallaxSeperation = 1; // Distance between back drop panels
parallaxMidModifier = 3; // Parallax sensitivity

rockAnimationDelay = 0.6; // Delay after click until crate rocks

rockAnimationDurationOne = 0.56; // Stage one rock duration
rockAnimationRotationOne = -0.93; // Stage one rock amount

rockAnimationDurationTwo = 0.2; // Stage two rock duration
rockAnimationRotationTwo = 0; // Stage two rock amount

rockAnimationDurationThree = 0.27; // Stage three rock duration
rockAnimationRotationThree = 0.25; // Stage three rock amount

rockAnimationDurationFour = 0.12; // Stage four rock duration
rockAnimationRotationFour = 0; // Stage four rock amount

rockAnimationDurationFive = 0.1; // Stage five rock duration
rockAnimationRotationFive = -0.1; // Stage five rock amount

rockAnimationDurationSix = 0.05; // Stage six rock duration
rockAnimationRotationSix = 0; // Stage one six amount

smokeAmount = 40; // How many smoke particles per crate
smokeDelay = 1000; // Delay after click until smoke burst

particleAmount = 1000; // Global particle count
particleMaxSize = 15 // Max particle size

gemAmount = 50; // Gems per crate
gemScale = 0.001; // Gem size
gemColor = "green";

menuclick.volume = 0.3; // Sample volume for arrow click
bgEffect.volume = 0.3; // Background effects volume
bgEffect.loop = true; // Loop background effect
bg.volume = 0.2; // Background music volume
crateSmash.volume = 0.4; // Crate bang volume
slide.volume = 0.2; // Slide transition sound volume
string = "3%ferf$£%UY5£$&&^&jtgjHYJg";
slidePlayDelay = 500; // Delay from click until slide is played

// ## Create a function to play our sounds
function playSound(sound) {
    if (audio) {
        sound.play(); // Play sound
    }
}

// ## Scene options
THREE.DefaultLoadingManager.onProgress = function(item, loaded, total) {
    var percent = (loaded / total) * 100; // Figure our percent loaded
    $(".loader_inner").css("width", percent + "%"); // Change width of loader
    if (loaded == total) {
        $(".loader").fadeOut(); // Fade loader out
        setTimeout(function() {
            $("#canvas,.ui").fadeIn(); // Fade in our scene
            playSound(bg); // Play background music
            playSound(bgEffect); // Play background effects
        }, sceneLoadDelay);
    }
};

function startScene() {

    // ## Set up the canvas
    var canvasWidth = window.innerWidth,
        canvasHeight = window.innerHeight,
        container = document.getElementById("canvas");

    // ## Create the scene
    scene = new THREE.Scene();
    scene.background = new THREE.Color(sceneBg); // Set the background color of our scene

    // ## Let"s get some light into the scene
    ambientLight = new THREE.AmbientLight(globalAmbienceColor, globalAmbienceIntensity); // Create an ambient light source
    scene.add(ambientLight); // Now add the light to our scene

    for (i = 0; i < 4; i++) {
        l = new THREE.PointLight(spotLightColor, 20, 10, 4, spotLightIntensity); // Create a PointLight
        l.position.set(5, 4, -i * crateOffset); // Position this light
        l.castShadow = true;
        scene.add(l); // Add all lights to the scene
    }

    // ## Set up the camera
    camera = new THREE.PerspectiveCamera(45, canvasWidth / canvasHeight, 1, 13000); // Create a new camera
    camera.lookAt(scene.position); // Point it at our scenes origin
    camera.position.set(cameraX, cameraY, cameraZ); // Position it to liking
    camera.zoom = cameraZoom; // Zoom in a bit
    camera.updateProjectionMatrix(); // Needs to be called as we have updated the camera position

    // ## Create a new WebGl Renderer
    renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(canvasWidth, canvasHeight);
    renderer.gammaInput = true;
    renderer.gammaOutput = true;
    renderer.shadowMapEnabled = true; // Enable shadow maps
    renderer.shadowMapType = THREE.PCFSoftShadowMap; // Soft shadows
    container.appendChild(renderer.domElement); // Append renderer

    // ## Window resize event
    window.addEventListener("resize", onWindowResize, false);

    // ## Orbital controls
    cameraControls = new THREE.OrbitControls(camera, renderer.domElement);

    // ## Let"s create a constructor for our meshes
    object = function() {
        THREE.Mesh.apply(this, arguments);
    };

    object.prototype = Object.create(THREE.Mesh.prototype);
    object.prototype.constructor = object;
    object.verticesNeedUpdate = true; // Needed to update anchor points

    // ## Load in our textures
    THREE.ImageUtils.crossOrigin = "";

    // Grass
    grassTexture = THREE.ImageUtils.loadTexture("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/cartoon_grass.jpg");
    grassTexture.wrapS = grassTexture.wrapT = THREE.RepeatWrapping; // Allow texture wrapping
    grassTexture.repeat.set(40, 100); // Repeat the grid texture

    // Forest
    forestFrontTexture = THREE.ImageUtils.loadTexture("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/forestPanelFront.png");
    forestFrontTexture.wrapS = forestFrontTexture.wrapT = THREE.RepeatWrapping; // Allow texture wrapping
    forestFrontTexture.repeat.set(10, 1); // Repeat the grid texture

    // Forest Mid
    forestMidTexture = THREE.ImageUtils.loadTexture("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/forestPanelMid.png");
    forestMidTexture.wrapS = forestMidTexture.wrapT = THREE.RepeatWrapping; // Allow texture wrapping
    forestMidTexture.repeat.set(10, 1); // Repeat the grid texture

    // Particles
    particleTexture = THREE.ImageUtils.loadTexture("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/particleTexture.png");

    // Crate textures
    crateTexture = THREE.ImageUtils.loadTexture("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/create4texture.png");
    crateTexture2 = THREE.ImageUtils.loadTexture("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/crate2.png");
    crateTexture3 = THREE.ImageUtils.loadTexture("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/crate5.jpg");
    crateTexture4 = THREE.ImageUtils.loadTexture("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/crate3.jpg");

    // ## Create our materials
    smokeMaterial = new THREE.MeshPhongMaterial({ // Smoke
        shading: THREE.SmoothShading,
        color: "white",
        transparent: true,
        opacity: 0
    });
    particleMaterial = new THREE.MeshPhongMaterial({ // Particles
        shading: THREE.SmoothShading,
        transparent: true,
        color: "white",
        map: particleTexture
    });
    forestMaterialFront = new THREE.MeshPhongMaterial({ // Forest front panel
        map: forestFrontTexture,
        transparent: true,
        shininess: 0
    });
    forestMaterialMid = new THREE.MeshPhongMaterial({ // Forest panel mid
        color: "#bd137b",
        map: forestMidTexture,
        transparent: false
    });
    grassMaterial = new THREE.MeshPhongMaterial({ // Grass
        color: "#730549",
        shading: THREE.SmoothShading,
        map: grassTexture,
        shininess: 0
    });
    crateMaterial = new THREE.MeshPhongMaterial({ // Crate
        shading: THREE.SmoothShading,
        map: crateTexture,
    });
    crateMaterial2 = new THREE.MeshPhongMaterial({ // Crate
        shading: THREE.SmoothShading,
        map: crateTexture2,
    });
    crateMaterial3 = new THREE.MeshPhongMaterial({ // Crate
        shading: THREE.SmoothShading,
        map: crateTexture3,
    });
    crateMaterial4 = new THREE.MeshPhongMaterial({ // Crate
        shading: THREE.SmoothShading,
        map: crateTexture4,
    });

    // ## Check if wireframe
    if (wireframe) {
        crateMaterial.wireframe = grassMaterial.wireframe = smokeMaterial.wireframe = forestMaterialMid = forestMaterialFront = true;
    }

    // ## Create our scene objects

    // Floor
    var floorGeometry = new THREE.PlaneGeometry(floorHeight, floorWidth, 20, 20);
    var floor = new object(floorGeometry, grassMaterial);

    floor.rotation.x = -Math.PI / 2; // Rotate floor
    floor.position.set(0, 0, -70); // Position floor
    floor.receiveShadow = true; // Let floor receive shadows

    scene.add(floor); // Add it to our scene

    // Forest background panels
    var forestPanelFrontGeometry = new THREE.PlaneGeometry(floorWidth + 30, 34, 120, 20);
    forestPanelFront = new object(forestPanelFrontGeometry, forestMaterialFront);
    forestPanelMid = new object(forestPanelFrontGeometry, forestMaterialMid);
    forestPanelMid.position.set(0, 0, -parallaxSeperation);

    var forest = new THREE.Object3D;
    forest.rotation.y = Math.PI / 2;
    forest.position.set(-floorHeight / 2, 7, -70)
    forest.add(forestPanelFront, forestPanelMid);

    scene.add(forest);

    // ## Create geometries for each crate
    var crateOneGeo = new THREE.CubeGeometry(2, 2, 2, 1, 1, 1);
    var crateTwoGeo = new THREE.CubeGeometry(2, 2, 2, 1, 1, 1);
    var crateThreeGeo = new THREE.CubeGeometry(2, 2, 2, 1, 1, 1);
    var crateFourGeo = new THREE.CubeGeometry(2, 2, 2, 1, 1, 1);

    // ## Create meshes using our constructor
    var crateOne = new object(crateOneGeo, crateMaterial);
    var crateTwo = new object(crateTwoGeo, crateMaterial2);
    var crateThree = new object(crateThreeGeo, crateMaterial3);
    var crateFour = new object(crateFourGeo, crateMaterial4);

    // ## Lets create an array store all our crates
    crates = [];
    crates.push(crateOne, crateTwo, crateThree, crateFour); // Push objects to array

    // ## Make smoke geometry
    var smokeGeo = new THREE.CubeGeometry(1, 1, 1, 1, 1, 1);
    
    // ## Loop over our crates and add them into the scene
    for (i = 0; i < crates.length; i++) {
        crates[i].geometry.translate(0, 1, 1); // 0, 1, 1
        crates[i].position.set(0, 0, (-i * crateOffset) + sceneOffset)
        crates[i].castShadow = true; // Make crate cast shadows
        for (a = 0; a < smokeAmount; a++) {
            s = new object(smokeGeo, smokeMaterial)
            num = (Math.random() * -2) + 1;
            s.position.set(num, -0.35, 0);
            s.scale.set(0.3, 0.3, 0.3);
            makeSmoke(s);
            crates[i].add(s);
        }
        scene.add(crates[i]); // Add them all to our scene
    }

    // ## Create atmosphere particles
    for (i = 0; i < particleAmount; i++) {
        var psize = (Math.random() * particleMaxSize) / 100; // Create a random particle size
        var p = new THREE.CircleGeometry(psize, psize, psize); // Create the particle geometry
        pm = new object(p, particleMaterial); // Creat the particle mesh
        pm.position.set(-Math.random() * 50 + 20, Math.random() * 7, -Math.random() * 100 + 10); // Position random
        particles.push(pm); // Push particles to an array
        scene.add(pm); // Add the particles to our scene
    }

    // ## Make Gems
    var loader = new THREE.ObjectLoader();

    loader.load("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/gems.json", function(obj) {
        var materialObj = new THREE.MeshBasicMaterial({ // Create gem mesh
            vertexColors: THREE.FaceColors,
            overdraw: 0.5
        });
        g = new THREE.MeshPhongMaterial({ // Creat gem material
            color: gemColor,
            side: THREE.DoubleSide
        });
        obj.traverse(function(child) { // Traverse child and change the materials to new onw
            if (child instanceof THREE.Mesh) {
                child.material = g;
            }
        });
        for (i = 0; i < crates.length; i++) { // Add our gems
            for (t = 0; t < gemAmount; t++) {
                var s = obj.clone(); // Clone master gem object
                s.rotation.x = 90 * (Math.PI / 180); // Rotate it
                s.rotation.z = (Math.random() * 200) * (Math.PI / 180); // Rotate randomly
                s.position.set((Math.random() * 4) - 2, 0, -((i * crateOffset)) - Math.random() * 2 + 5); // Position randomly
                s.scale.set(gemScale, gemScale, gemScale); // Set the gem scale
                scene.add(s); // Add gems to the scene
            }
        }
    });

    // ## Reposition scene
    scene.position.set(0, -1, 0);

}

// ## Now lets create a timeline for each crate then store it in an array
function timelines() {
    for (i = 0; i < crates.length; i++) {
        var obj = crates[i];
        var translate = obj.geometry.parameters.width;
        var position = ((translate / 2) - (i * crateOffset) + sceneOffset) + 1;
        var positionOpposite = -((translate / 2) + (i * crateOffset) - sceneOffset) + 1;
        var tl = new TimelineMax({
            delay: rockAnimationDelay
        });
        tl.add(TweenLite.to(crates[i].rotation, rockAnimationDurationOne, {
            x: rockAnimationRotationOne,
            ease: Circ.easeInOut
        }));
        tl.add(TweenLite.to(crates[i].rotation, rockAnimationDurationTwo, {
            x: rockAnimationRotationTwo,
            onComplete: switchAnchor,
            onCompleteParams: [obj, -translate, position, 0],
            ease: Expo.easeIn
        }));
        tl.add(TweenLite.to(crates[i].rotation, rockAnimationDurationThree, {
            x: rockAnimationRotationThree,
            ease: Expo.easeOut
        }));
        tl.add(TweenLite.to(crates[i].rotation, rockAnimationDurationFour, {
            x: rockAnimationRotationFour,
            onComplete: switchAnchor,
            onCompleteParams: [obj, translate, positionOpposite, 0],
            ease: Expo.easeIn
        }));
        tl.add(TweenLite.to(crates[i].rotation, rockAnimationDurationFive, {
            x: rockAnimationRotationFive,
            ease: Expo.easeOut
        }));
        tl.add(TweenLite.to(crates[i].rotation, rockAnimationDurationSix, {
            x: rockAnimationRotationSix,
            onComplete: switchAnchor,
            onCompleteParams: [obj, 0, positionOpposite, 1],
            ease: Expo.easeIn
        }));
    }
}

smokeAnims = []
// ## Create smoke
function makeSmoke(obj) {
    stl = new TimelineMax({})
    stl.add([
        TweenLite.to(obj.scale, .5, {
            x: 0.01,
            y: 0.01,
            z: 0.01,
            ease: Expo.easeOut
        }),
        TweenLite.fromTo(obj.material, .5, {
            opacity: 1
        }, {
            opacity: 0
        }),
        TweenLite.to(obj.position, .5, {
            x: obj.position.x,
            y: .02 + Math.random() * 1.3,
            z: obj.position.z + Math.random() * 1.3,
            ease: Expo.easeOut
        })
    ])
    smokeAnims.push(stl);
    stl.stop();
}
function playSmoke() {
    for (i = 0; i < smokeAnims.length; i++) {
        let s = smokeAnims[i]
        setTimeout(function() {
            s.restart()
        }, 1400)

    }
}

// ## Switch crate anchor
function switchAnchor(object, tZ, pZ, int) {
    playSound(crateSmash); // Play crate sound
    object.geometry.translate(0, 0, tZ); // Change crate translation
    object.position.set(0, 0, pZ); // Chage crate position
    can_click = int; // Allow user to click again
}

// ## Animate the scene
function animateScene() {
    requestAnimationFrame(animateScene);
    render();
}

// ## Start everything up!
startScene();
animateScene();

// ## Window resize
function onWindowResize() {
    var canvasWidth = window.innerWidth;
    var canvasHeight = window.innerHeight;
    renderer.setSize(canvasWidth, canvasHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    render();
}

// ## Crate information array
crateInfoArray = [{
    name: "Noob loot crate", // First crate
    text: "You probably wont get much in this loot crate to be honest, but what can you expect for such a low cost?",
    price: "20,000"
}, {
    name: "Novice loot crate", // Second crate
    text: "This loot crate will contain a few relatively decent items that you can show off to your friends",
    price: "49,999"
}, {
    name: "Pro loot crate", // Third crate
    text: "Now we are talking, this crate contains loot for the professional player, weapons and items galore",
    price: "119,999"
}, {
    name: "God loot crate", // Fourth crate
    text: "Takes pay to win to a new level. Destroy your oppenents with this ultimate loot crate. Instawin",
    price: "999,999"
}]

// ## Update info box content
function crateInfo(crate) {
    $(".box").fadeOut(function() { // fade box out then...
        $(".box_inner__title").text(crateInfoArray[crate].name); // Change crate name
        $(".box_inner__text").text(crateInfoArray[crate].text); // Change crate description
        $(".box_inner__cost .right").text(crateInfoArray[crate].price); // Change crate Cost
    });
    setTimeout(function() {
        $(".box").fadeIn(); // Fade box back in
    }, 2000);
}

// ## Create a function that will animate the camera along the z axis
function moveCamera(amount) {
    var z = camera.position.z; // Init z
    var move = z + amount; // What point to move to
    TweenMax.to(camera.position, cameraMoveSpeed, { // Animate camera to point
        z: move,
        ease: Expo.easeInOut,
        delay: cameraMoveDelay
    });
    TweenMax.to(forestPanelMid.position, cameraMoveSpeed, { // Animate camera to point
        x: forestPanelMid.position.x - (amount / parallaxMidModifier),
        ease: Expo.easeInOut,
        delay: cameraMoveDelay
    });
    setTimeout(function() {
        playSound(slide);
    }, slidePlayDelay);
}

// ## User interaction
$(".button").click(function() {
    playSound(menuclick); // Play menu click sound
    if (can_click == 1 && $(this).hasClass("left") && position > 0) {
        moveCamera(crateOffset); // Move the camera
        position--; // Decrease our position in the slider
        crateInfo(position); // Update crate info
    } else if (can_click == 1 && $(this).hasClass("right") && position < crates.length - 1) {
        can_click = 0; // First of all lets stop the user from clicking again and messing things up
        moveCamera(-crateOffset); // Move the camera
        position++; // Increase our position in the slider
        timelines(); // Play the animation of the crate rocking
        playSmoke(); // Play smoke
        crateInfo(position); // Update crate info
    }
});

// ## Go
function render() {
    p = 0;
    $.each(particles, function() { // Each particle in our array
        particles[p].position.y += Math.random() * 10 / 1000; // Update the y position
        if (particles[p].position.y > 7) { // If its out of view...
            particles[p].position.y = 0; // Reset particle position
        }
        p++;
    });
    renderer.render(scene, camera);// Render
}

$(document).on("mousemove", function(e) {
    var x = -(($(window).innerWidth() / 2 - e.pageX) / 6000) + cameraX; // Get current mouse x
    var y = -((($(window).innerWidth() / 2 - e.pageY) / 6000) - cameraY); // Get current mouse x
    camera.position.x = x; // Update cam x
    camera.position.y = y; // Update cam y
});

function deep_ui() {
    var global_perspective = 800; // Global perspective set to parent
    var pivot = 50 // The higher this number the more subtle the pivot effect
    var debug = false; // Shows various debug information
    var animation_delay = 100; // Delay before animation starts cannot be 0. In ms.
    var animation_easing = "ease"; // Animation easing
    var deep_parent = $("*[data-deep-ui='true']"); // Parent with deep active
    var deep_element = $("[data-depth]"); // Elements with depth
    deep_parent.each(function() {
        $(this).css({
            "perspective": global_perspective + "px",
            "transform-style": "preserve-3d"
        })
        set_depth();
    })
    function set_depth() {
        deep_element.each(function() {
            $(this).css({
                "transform": "translatez(" +
                    $(this).data("depth") +
                    "px)",
                "transform-style": "preserve-3d" // Set CSS to all elements
            });
        });
    }
    $(document).on("mousemove", function(e) {
        var x = -($(window).innerWidth() / 2 - e.pageX) / pivot; // Get current mouse x
        var y = ($(window).innerHeight() / 2 - e.pageY) / pivot; // Get current mouse y
        deep_parent.css("transform", "rotateY(" + x + "deg) rotateX(" + y + "deg)"); // Set parent element rotation
    });
}

// Init
deep_ui();

// Full screen mode
function fullscreen() {
    document.documentElement.webkitRequestFullscreen();
    document.documentElement.mozRequestFullScreen();
    document.documentElement.msRequestFullscreen();
    document.documentElement.requestFullscreen();
}

$(".fullscreen").click(function() {
    fullscreen();
});
              
            
!
999px

Console