This commit is contained in:
appexplore
parent
27dae489b9
commit
87926bbc04
|
|
@ -1,420 +0,0 @@
|
||||||
/*********************************/
|
|
||||||
/* Author : Cavethemes
|
|
||||||
/* Contact : cavethemes@gmail.com
|
|
||||||
---------------------------------
|
|
||||||
----- CONTENTS
|
|
||||||
---------------------------------
|
|
||||||
| 1. CSS RESET
|
|
||||||
| 2. BASIC CSS
|
|
||||||
| 3. ANIMATED ELEMENTS
|
|
||||||
| a. WATER WAVES
|
|
||||||
| b. SUBMARINE
|
|
||||||
| c. SUBMARINE FAN
|
|
||||||
| d. SUBMARINE HEAD LIGHT
|
|
||||||
| e. BUBBLES
|
|
||||||
| 4. ANIMATION KEYFRAMES
|
|
||||||
| 5. MEDIA QUERIES
|
|
||||||
| 6. LOADING CSS
|
|
||||||
|
|
|
||||||
----------------------------------
|
|
||||||
/*********************************/
|
|
||||||
|
|
||||||
|
|
||||||
/***************************/
|
|
||||||
/****- 1. CSS RESET -******/
|
|
||||||
/*************************/
|
|
||||||
|
|
||||||
*{
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
border: 0;
|
|
||||||
box-sizing: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/***************************/
|
|
||||||
/****- 2. BASIC CSS -******/
|
|
||||||
/*************************/
|
|
||||||
|
|
||||||
body{
|
|
||||||
background: #617492;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.error{
|
|
||||||
padding: 0px;
|
|
||||||
margin-top: 60px;
|
|
||||||
z-index: 9999;
|
|
||||||
}
|
|
||||||
.error h1{
|
|
||||||
font-family: 'Open Sans', sans-serif;
|
|
||||||
color: #8699b7;
|
|
||||||
text-align: center;
|
|
||||||
font-weight: 900;
|
|
||||||
font-size: 3em;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
.error p{
|
|
||||||
text-align: center;
|
|
||||||
font-family: 'Open Sans', sans-serif;
|
|
||||||
color: #8699b7;
|
|
||||||
padding: 15px;
|
|
||||||
}
|
|
||||||
#submarine_container{
|
|
||||||
position: absolute;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
fill:red;
|
|
||||||
|
|
||||||
}
|
|
||||||
#waves{
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
bottom: 0;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#canvas{
|
|
||||||
-webkit-transform: translate(400px,260px);
|
|
||||||
-ms-transform: translate(400px,260px);
|
|
||||||
transform: translate(400px,260px);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#bubble_group{
|
|
||||||
-webkit-transform: translate(-450px,-150px);
|
|
||||||
-ms-transform: translate(-450px,-150px);
|
|
||||||
transform: translate(-450px,-150px);
|
|
||||||
}
|
|
||||||
|
|
||||||
#svg_container{
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Navigation */
|
|
||||||
|
|
||||||
.navigation{
|
|
||||||
width: 100%;
|
|
||||||
height: 60px;
|
|
||||||
z-index: 9999;
|
|
||||||
position: absolute;
|
|
||||||
top: 185px;
|
|
||||||
}
|
|
||||||
.navigation ul{
|
|
||||||
list-style: none;
|
|
||||||
width: 260px;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 0 0 5px 5px;
|
|
||||||
padding: 4px;
|
|
||||||
border-radius: 10px;
|
|
||||||
background: #5a6c89;
|
|
||||||
}
|
|
||||||
.navigation ul li{
|
|
||||||
display: inline;
|
|
||||||
|
|
||||||
}
|
|
||||||
.navigation ul li a{
|
|
||||||
display: inline-block;
|
|
||||||
text-decoration: none;
|
|
||||||
color: #8699b7;
|
|
||||||
font-family: 'Open Sans', sans-serif;
|
|
||||||
font-size: 1em;
|
|
||||||
padding: 5px 10px 5px 10px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.navigation ul li a:hover{
|
|
||||||
box-shadow: 0 0 1px rgba(0,0,0,0.1) inset;
|
|
||||||
transition: background linear .5s;
|
|
||||||
border-radius: 10px;
|
|
||||||
background: #526583;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*only for IE*/
|
|
||||||
.submarine_bg_ie{
|
|
||||||
width: 700px;
|
|
||||||
margin-left: 35%;
|
|
||||||
padding-top: 120px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submarine_waves_ie{
|
|
||||||
position: absolute;
|
|
||||||
bottom: -20px;
|
|
||||||
}
|
|
||||||
.submarine_bg_ie img{
|
|
||||||
-ms-interpolation-mode: bicubic;
|
|
||||||
interpolation-mode: bicubic;
|
|
||||||
}
|
|
||||||
|
|
||||||
/***********************************/
|
|
||||||
/****- 3. ANIMATED ELEMENTS -******/
|
|
||||||
/*********************************/
|
|
||||||
|
|
||||||
|
|
||||||
/*---- 3. a. WATER WAVES ----*/
|
|
||||||
|
|
||||||
#wave_top{
|
|
||||||
-webkit-animation: waves 3s linear infinite;
|
|
||||||
animation: waves 3s linear infinite;
|
|
||||||
}
|
|
||||||
#wave_bottom{
|
|
||||||
-webkit-animation: waves 6s linear infinite;
|
|
||||||
animation: waves 6s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*---- 3. b. SUBMARINE ----*/
|
|
||||||
|
|
||||||
#Submarine{
|
|
||||||
|
|
||||||
-webkit-animation: submarine 4000ms linear infinite;
|
|
||||||
|
|
||||||
animation: submarine 4000ms linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*---- 3. c. SUBMARINE FAN ----*/
|
|
||||||
|
|
||||||
#fan{
|
|
||||||
-webkit-animation: spin 900ms linear infinite;
|
|
||||||
animation: spin 900ms linear infinite;
|
|
||||||
-webkit-transform-origin: 34px 34px;
|
|
||||||
-ms-transform-origin: 34px 34px;
|
|
||||||
transform-origin: 34px 34px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*---- 3. d. SUBMARINE HEAD LIGHT ----*/
|
|
||||||
|
|
||||||
#head_light{
|
|
||||||
-webkit-transform-origin: 500px 200px;
|
|
||||||
-ms-transform-origin: 500px 200px;
|
|
||||||
transform-origin: 500px 200px;
|
|
||||||
-webkit-animation: headlight 4000ms linear infinite;
|
|
||||||
animation: headlight 4000ms linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lights{
|
|
||||||
-webkit-animation: lights 2s ease-in infinite;
|
|
||||||
animation: lights 2s ease-in infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*---- 3. e. BUBBLES ----*/
|
|
||||||
|
|
||||||
#bubble_small{
|
|
||||||
-webkit-animation: bubble_s 2s linear infinite;
|
|
||||||
animation: bubble_s 2s linear infinite;
|
|
||||||
}
|
|
||||||
#bubble_medium{
|
|
||||||
-webkit-animation: bubble_m 2s linear infinite;
|
|
||||||
animation: bubble_m 2s linear infinite;
|
|
||||||
}
|
|
||||||
#bubble_large{
|
|
||||||
-webkit-animation: bubble_l 2s linear infinite;
|
|
||||||
animation: bubble_l 2s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*don't worry its for IE*/
|
|
||||||
.submarine_bg_ie img{
|
|
||||||
|
|
||||||
-webkit-animation: submarine 4000ms linear infinite;
|
|
||||||
|
|
||||||
animation: submarine 4000ms linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*************************************/
|
|
||||||
/****- 4. ANIMATION KEYFRAMES -******/
|
|
||||||
/***********************************/
|
|
||||||
|
|
||||||
@-webkit-keyframes spin{
|
|
||||||
100%{
|
|
||||||
-webkit-transform: rotate(360deg);
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes spin{
|
|
||||||
100%{
|
|
||||||
-webkit-transform: rotate(360deg);
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes headlight{
|
|
||||||
50%{
|
|
||||||
-webkit-transform: rotate(15deg);
|
|
||||||
transform: rotate(15deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes headlight{
|
|
||||||
50%{
|
|
||||||
-webkit-transform: rotate(15deg);
|
|
||||||
transform: rotate(15deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes submarine{
|
|
||||||
50%{
|
|
||||||
-webkit-transform: rotate(5deg);
|
|
||||||
transform: rotate(5deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes submarine{
|
|
||||||
50%{
|
|
||||||
-webkit-transform: rotate(5deg);
|
|
||||||
transform: rotate(5deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes waves{
|
|
||||||
50%{
|
|
||||||
-webkit-transform: translateY(18px);
|
|
||||||
transform: translateY(18px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes waves{
|
|
||||||
50%{
|
|
||||||
-webkit-transform: translateY(18px);
|
|
||||||
transform: translateY(18px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes bubble_s{
|
|
||||||
40%{
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes bubble_s{
|
|
||||||
40%{
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@-webkit-keyframes bubble_m{
|
|
||||||
60%{
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes bubble_m{
|
|
||||||
60%{
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@-webkit-keyframes bubble_l{
|
|
||||||
100%{
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes bubble_l{
|
|
||||||
100%{
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes lights{
|
|
||||||
50%{
|
|
||||||
fill: white;
|
|
||||||
-webkit-transition: fill ease-in-out .5s;
|
|
||||||
transition: fill ease-in-out .5s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes lights{
|
|
||||||
50%{
|
|
||||||
fill: white;
|
|
||||||
-webkit-transition: fill ease-in-out .5s;
|
|
||||||
transition: fill ease-in-out .5s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*************************************/
|
|
||||||
/****- 5. MEDIA QUERIES -******/
|
|
||||||
/***********************************/
|
|
||||||
|
|
||||||
@media (max-width: 1200px){
|
|
||||||
.submarine_bg_ie{
|
|
||||||
width: 500px;
|
|
||||||
margin-right: 33%;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 800px){
|
|
||||||
.submarine_bg_ie{
|
|
||||||
width: 260px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
.error h1{
|
|
||||||
font-size: 2em;
|
|
||||||
}
|
|
||||||
.navigation{
|
|
||||||
top: 160px;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 480px){
|
|
||||||
.error h1{
|
|
||||||
font-size: 1.8em;
|
|
||||||
}
|
|
||||||
.error p{
|
|
||||||
font-size: 0.8em;
|
|
||||||
}
|
|
||||||
.navigation{
|
|
||||||
top: 150px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*************************************/
|
|
||||||
/****- 6. LOADING CSS ---******/
|
|
||||||
/***********************************/
|
|
||||||
|
|
||||||
.spinner {
|
|
||||||
margin: 300px auto 0;
|
|
||||||
width: 70px;
|
|
||||||
text-align: center;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinner > div {
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
background-color: #f0f0f0;
|
|
||||||
border-radius: 100%;
|
|
||||||
display: inline-block;
|
|
||||||
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
|
|
||||||
animation: bouncedelay 1.4s infinite ease-in-out;
|
|
||||||
/* Prevent first frame from flickering when animation starts */
|
|
||||||
-webkit-animation-fill-mode: both;
|
|
||||||
animation-fill-mode: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinner .bounce1 {
|
|
||||||
-webkit-animation-delay: -0.32s;
|
|
||||||
animation-delay: -0.32s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinner .bounce2 {
|
|
||||||
-webkit-animation-delay: -0.16s;
|
|
||||||
animation-delay: -0.16s;
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes bouncedelay {
|
|
||||||
0%, 80%, 100% { -webkit-transform: scale(0.0) }
|
|
||||||
40% { -webkit-transform: scale(1.0) }
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes bouncedelay {
|
|
||||||
0%, 80%, 100% {
|
|
||||||
transform: scale(0.0);
|
|
||||||
-webkit-transform: scale(0.0);
|
|
||||||
} 40% {
|
|
||||||
transform: scale(1.0);
|
|
||||||
-webkit-transform: scale(1.0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,49 +0,0 @@
|
||||||
//##################################//
|
|
||||||
// Author : Cavethemes //
|
|
||||||
// Contact : cavethemes@gmail.com //
|
|
||||||
//##################################//
|
|
||||||
|
|
||||||
//---------------------------//
|
|
||||||
// INTERNET EXPLORER CODE //
|
|
||||||
//---------------------------//
|
|
||||||
// It replaces svg with a png image for IE browsers.
|
|
||||||
|
|
||||||
function IE() {
|
|
||||||
"use strict";
|
|
||||||
var ms_ie = false;
|
|
||||||
var ua = window.navigator.userAgent;
|
|
||||||
var old_ie = ua.indexOf('MSIE ');
|
|
||||||
var new_ie = ua.indexOf('Trident/');
|
|
||||||
|
|
||||||
if ((old_ie > -1) || (new_ie > -1)) {
|
|
||||||
ms_ie = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (ms_ie) {
|
|
||||||
$('svg').css('display','none');
|
|
||||||
$('body').append("<div class='submarine_bg_ie' ><img src='img/png/submarine.png' width='100%' /></div> <div class='submarine_waves_ie' ><img src='img/png/waves.png' width='100%' /></div>");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//---------------------------//
|
|
||||||
// LOADING PAGE CODE //
|
|
||||||
//---------------------------//
|
|
||||||
// It shows the loading animation for 3 seconds, before starting of the page/
|
|
||||||
|
|
||||||
$('.spinner').css('display','block');
|
|
||||||
$(function(){
|
|
||||||
$('svg').css('opacity','0');
|
|
||||||
$('nav').css('opacity','0');
|
|
||||||
$('.error').css('opacity','0');
|
|
||||||
|
|
||||||
setTimeout(function(){
|
|
||||||
$('nav').css('opacity','1');
|
|
||||||
$('svg').css('opacity','1');
|
|
||||||
$('.error').css('opacity','1');
|
|
||||||
$('.spinner').css('display','none');
|
|
||||||
IE();
|
|
||||||
}, 3000);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue