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