Alien 404 - Animated 404 Page

Features

If you enjoy this item, Don't forget to rate

Features:

Graphic Elements

The graphic elemens implemented in 2 ways, some of them as images and some of them as CSS background images:

Below images are image tags, and animations implemented as css transitions, so if you need to change them need to do these steps:


 <div id="girl" >
                    <div id="eyes">
                        <img src="images/eyes.gif" alt="eyes" />
                    </div>
                </div>
                <div id="earth">
                    <img src="images/earth.png" alt="earth" />
                </div>
                <div id="ship">
                    <img src="images/ship.png" alt="ship" />
                </div>
                <div id="ufo">
                    <img src="images/ufo.png" alt="ufo" />
                </div>

1- Open stylesheet.less 2- Change duration and delay multiplier number, they are 1sec based;



#ship{
    bottom: 110px;
    right: 15%;
    opacity: 0;
    .absolute;
    animation:  fadeInTopAnimation @duration 4*@delay forwards,swingUpDown 8*@duration 3*@delay ease-in-out infinite;
}
#earth{
    bottom:100px;
    right:5%;
    opacity: 0;
    .absolute;
    animation:  fadeInTopAnimation @duration 2*@delay forwards,swingUpDown 10*@duration 4*@delay ease-in-out infinite;
}

#ufo{
    left:-600px;
    top:30%;  
    .rotate(-10deg);
    .animate;
    .absolute;

    z-index: 0;
    animation:  ufoFly 10*@duration 2*@delay ease-out infinite;


}

@keyframes ufoFly{
    100%{
        left:130%;
        top:15%;
    }
}

@keyframes fadeInTopAnimation{
    0%{
        bottom:-100%;
    }
    100%{
        opacity: 1;
    }
}

@keyframes  swingUpDown{

    50%{
        bottom: 10%;
    }

}

Below elements implemented without img tags:

#stars{
    .absolute;
    width:100%;
    height: 100%;
    background: url(../images/stars.png) no-repeat;
    background-size:cover;
}
#page{
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: url(../images/bg.jpg) no-repeat;
    background-size: 100% 100%;
}
#girl{
    z-index: 10;
    background: url(../images/girl.png) no-repeat;

Parallax Effect

Open script.js and find this line $('#stars').plaxify({"xRange": 10, "yRange": 10}); they are the ranges that stars move when mouse move!

Form

For is not working with PHP, you need to integrate it with your own CMS or PHP codes:

<div class="form-holder inline">
                        <form>
                            <div class="form-group">
                                <div class="input-group">

                                    <input class="le-input required " name="s" data-placeholder="Search for help..." type="text">
                                    <div class="input-group-addon"><button class="le-btn ">Help me!</button></div>
                                </div>
                            </div>
                        </form>
                    </div>

Credits