The Sky

Created in HTML, CSS, and JavaScript.

by William Green

HTML

<div id="projectBackground">
    <div id="sunshine">
        <div data-rotation="-45" class="ray" style="bottom:4px;"></div>
        <div class="ray" data-rotation="-90" style="right:10px;"></div>
        <div class="ray" data-rotation="45" style="top:8px;"></div>
        <div class="ray" style="left:23px; top:4px;"></div>
        <div class="ray" data-rotation="-45" style="left:45px; bottom:20px;"></div>
        <div class="ray" data-rotation="90" style="left:54px; bottom:59px;"></div>
        <div class="ray" data-rotation="45" style="bottom:95px; left:45px;"></div>
        <div class="ray" style="bottom:119px; left:22px;"></div>
    </div>
    <div id="cloudContainer"></div>
</div>

CSS

/*Created by William Green (15) in California
Email [email protected] with questions or comments.*/
 #projectBackground {
    background-color:#0097FF;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
}
html, body {
    margin:0;
    padding:0;
}
@-o-keyframes sunshine {
    0% {
        -o-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    100% {
        -o-transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        -webkit-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
        transform:rotate(360deg);
    }
}
@-webkit-keyframes sunshine {
    0% {
        -o-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    100% {
        -o-transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        -webkit-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
        transform:rotate(360deg);
    }
}
@-moz-keyframes sunshine {
    0% {
        -o-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    100% {
        -o-transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        -webkit-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
        transform:rotate(360deg);
    }
}
@-ms-keyframes sunshine {
    0% {
        -o-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    100% {
        -o-transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        -webkit-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
        transform:rotate(360deg);
  ...

JavaScript

window.onload = function () {
    reset();
    initialize();
    var interval = false;
    var cloudInterval = false;
    window.setTimeout(function () {
        if (navigator.userAgent.search("Safari") >= 0 & navigator.userAgent.search("Chrome") < 0) {
            alert("There is a bug with this animation is Safari (mobile and desktop) which makes the sun flicker when it rotates. If you know how to fix this bug, please email me at [email protected] or [email protected]");
        }
    }, 5000);

    function initialize() {
        //add inline rotation for more neatly written code...
        var rays = document.getElementsByClassName('ray');
        for (var i = 0; i != rays.length; i++) {
            var rotation = rays[i].getAttribute('data-rotation');
            //add native transform support
            rays[i].style.oTransform = 'rotate(' + rotation + 'deg)';
            rays[i].style.msTransform = 'rotate(' + rotation + 'deg)';
            rays[i].style.webkitTransform = 'rotate(' + rotation + 'deg)';
            rays[i].style.mozTransform = 'rotate(' + rotation + 'deg)';
            rays[i].style.transform = 'rotate(' + rotation + 'deg)';
            rays[i].style.width = '6px';
        }
        //add control for the interval
        interval = window.setInterval(function () {
            var randomRay = rays[Math.floor(Math.random() * rays.length)];
            if (parseInt(randomRay.style.width) === 6) {
                randomRay.style.width = '3px';
            } else {
                randomRay.style.width = '6px';
            }
        }, 100);
    }

    function reset() {
        document.getElementById('cloudContainer').innerHTML = '';
        var numberOfClouds = Math.floor(window.innerWidth / 200);
        var positions = [40, 55, 70, 85, 100];
        for (var i = 0; i != numberOfClouds; i++) {
            var cloud = document.createElement('div');
            cloud.className = 'cloud';
           ...