Related
I am trying to refresh a certain div to refresh every 30 seconds. There are others div's on my HTML page, but they do not need to refresh.
The idea is to reload/refresh the div itself.
I have tried this script, but can not get it to work.
Here is my HTML and Javascript code
The path in my html file is
<link rel="stylesheet" href="./difcol.css" type="text/css" media="screen">
Here are my css file for refresh.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
setInterval(function() {
$("refresh").load(window.location.href + " refresh");
}, 30000);
});
</script>
<div id="refresh" class="sp-container">
<div class="sp-content">
<div class="sp-globe"></div>
<h2 class="frame-1">1</h2>
<h2 class="frame-2">2</h2>
<h2 class="frame-3">3</h2>
<h2 class="frame-4">4</h2>
<h2 class="frame-5">5</h2>
<h2 class="frame-6">6</h2>
<h2 class="frame-7">
<span>a,</span>
<span>b,</span>
<span>c</span>
</h2>
</div>
</div>
#import url('https://fonts.googleapis.com/css?family=Barlow');
body {
background: #310404 url(https://i.ytimg.com/vi/wOvQAhzWCrM/maxresdefault.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: 'Barlow', sans-serif;
}
.container {
width: 100%;
position: relative;
overflow: hidden;
}
a {
text-decoration: none;
}
h1.main, p.demos {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.sp-container {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 0;
background: -webkit-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
background: -moz-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
background: -ms-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
background: radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
}
.sp-content {
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
z-index: 1000;
}
.sp-container h2 {
position: absolute;
top: 50%;
line-height: 100px;
height: 90px;
margin-top: -50px;
font-size: 90px;
width: 100%;
text-align: center;
color: transparent;
-webkit-animation: blurFadeInOut 3s ease-in backwards;
-moz-animation: blurFadeInOut 3s ease-in backwards;
-ms-animation: blurFadeInOut 3s ease-in backwards;
animation: blurFadeInOut 3s ease-in backwards;
}
.sp-container h2.frame-1 {
font-size: 200px;
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
}
.sp-container h2.frame-2 {
font-size: 200px;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
.sp-container h2.frame-3 {
font-size: 200px;
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.sp-container h2.frame-4 {
font-size: 200px;
-webkit-animation-delay: 9s;
-moz-animation-delay: 9s;
-ms-animation-delay: 9s;
animation-delay: 9s;
}
.sp-container h2.frame-5 {
font-size: 200px;
-webkit-animation-delay: 12s;
-moz-animation-delay:12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.sp-container h2.frame-6 {
font-size: 200px;
-webkit-animation-delay: 15s;
-moz-animation-delay: 15s;
-ms-animation-delay: 15s;
animation-delay: 15s;
}
.sp-container h2.frame-7 {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none;
color: transparent;
text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-7 span {
-webkit-animation: blurFadeIn 3s ease-in 18s backwards;
-moz-animation: blurFadeIn 1s ease-in 18s backwards;
-ms-animation: blurFadeIn 3s ease-in 18s backwards;
animation: blurFadeIn 3s ease-in 18s backwards;
color: transparent;
text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-7 span:nth-child(2) {
-webkit-animation-delay: 21s;
-moz-animation-delay: 21s;
-ms-animation-delay: 21s;
animation-delay: 21s;
}
.sp-container h2.frame-7 span:nth-child(3) {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.sp-globe {
position: absolute;
width: 282px;
height: 273px;
left: 50%;
top: 50%;
margin: -137px 0 0 -141px;
/* background: transparent url(http://web-sonick.zz.mu/images/sl/globe.png) no-repeat top left;*/
-webkit-animation: fadeInBack 3.6s linear 14s backwards;
-moz-animation: fadeInBack 3.6s linear 14s backwards;
-ms-animation: fadeInBack 3.6s linear 14s backwards;
animation: fadeInBack 3.6s linear 14s backwards;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
-webkit-transform: scale(5);
-moz-transform: scale(5);
-o-transform: scale(5);
-ms-transform: scale(5);
transform: scale(5);
}
.sp-circle-link {
position: absolute;
left: 50%;
bottom: 100px;
margin-left: -50px;
text-align: center;
line-height: 100px;
width: 100px;
height: 100px;
background: #fff;
color: #3f1616;
font-size: 25px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-animation: fadeInRotate 1s linear 16s backwards;
-moz-animation: fadeInRotate 1s linear 16s backwards;
-ms-animation: fadeInRotate 1s linear 16s backwards;
animation: fadeInRotate 1s linear 16s backwards;
-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
}
.sp-circle-link:hover {
background: #85373b;
color: #fff;
}
/**/
#-webkit-keyframes blurFadeInOut {
0% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-webkit-transform: scale(1.3);
}
20%, 75% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-webkit-transform: scale(1);
}
100% {
opacity: 0;
text-shadow: 0px 0px 50px #fff;
-webkit-transform: scale(0);
}
}
#-webkit-keyframes blurFadeIn {
0% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-webkit-transform: scale(1.3);
}
50% {
opacity: 0.5;
text-shadow: 0px 0px 10px #fff;
-webkit-transform: scale(1.1);
}
100% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-webkit-transform: scale(1);
}
}
#-webkit-keyframes fadeInBack {
0% {
opacity: 0;
-webkit-transform: scale(0);
}
50% {
opacity: 0.4;
-webkit-transform: scale(2);
}
100% {
opacity: 0.2;
-webkit-transform: scale(5);
}
}
#-webkit-keyframes fadeInRotate {
0% {
opacity: 0;
-webkit-transform: scale(0) rotate(360deg);
}
100% {
opacity: 1;
-webkit-transform: scale(1) rotate(0deg);
}
}
/**/
#-moz-keyframes blurFadeInOut {
0% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-moz-transform: scale(1.3);
}
20%, 75% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-moz-transform: scale(1);
}
100% {
opacity: 0;
text-shadow: 0px 0px 50px #fff;
-moz-transform: scale(0);
}
}
#-moz-keyframes blurFadeIn {
0% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-moz-transform: scale(1.3);
}
100% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-moz-transform: scale(1);
}
}
#-moz-keyframes fadeInBack {
0% {
opacity: 0;
-moz-transform: scale(0);
}
50% {
opacity: 0.4;
-moz-transform: scale(2);
}
100% {
opacity: 0.2;
-moz-transform: scale(5);
}
}
#-moz-keyframes fadeInRotate {
0% {
opacity: 0;
-moz-transform: scale(0) rotate(360deg);
}
100% {
opacity: 1;
-moz-transform: scale(1) rotate(0deg);
}
}
/**/
#keyframes blurFadeInOut {
0% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
transform: scale(1.3);
}
20%, 75% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
transform: scale(1);
}
100% {
opacity: 0;
text-shadow: 0px 0px 50px #fff;
transform: scale(0);
}
}
#keyframes blurFadeIn {
0% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
transform: scale(1.3);
}
50% {
opacity: 0.5;
text-shadow: 0px 0px 10px #fff;
transform: scale(1.1);
}
100% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
transform: scale(1);
}
}
#keyframes fadeInBack {
0% {
opacity: 0;
transform: scale(0);
}
50% {
opacity: 0.4;
transform: scale(2);
}
100% {
opacity: 0.2;
transform: scale(5);
}
}
#keyframes fadeInRotate {
0% {
opacity: 0;
transform: scale(0) rotate(360deg);
}
100% {
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
You're lacking # in $("refresh") for referring to refresh id. The change should be
$("#refresh").load(window.location.href + " refresh");
Note that I reduced the interval time to 1 second and put a log to show differences
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
setInterval(function() {
$("#refresh").load(window.location.href + " refresh", function() { console.log("loaded") });
}, 1000);
});
</script>
<div id="refresh" class="sp-container">
<div class="sp-content">
<div class="sp-globe"></div>
<h2 class="frame-1">1</h2>
<h2 class="frame-2">2</h2>
<h2 class="frame-3">3</h2>
<h2 class="frame-4">4</h2>
<h2 class="frame-5">5</h2>
<h2 class="frame-6">6</h2>
<h2 class="frame-7">
<span>a,</span>
<span>b,</span>
<span>c</span>
</h2>
</div>
</div>
You can put the contents of the div in a javascript variable once the page loads
then in your set interval function:
document.getElementById('refresh').innerHTML = x; :
<head>
<script>
var x = document.getElementById('refresh').innerHTML;
setInterval(function() {
document.getElementById('refresh').innerHTML = x;
}, 30000);
</script>
</head>
I'm trying to use this FlipClock plugin.
var clock = $(".clock").FlipClock({
clockFace: 'TwentyFourHourClock',
callbacks:{
}
});
/* Get the bourbon mixin from http://bourbon.io */
/* Reset */
.flip-clock-wrapper * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-clock-wrapper a {
cursor: pointer;
text-decoration: none;
color: #ccc; }
.flip-clock-wrapper a:hover {
color: #fff; }
.flip-clock-wrapper ul {
list-style: none; }
.flip-clock-wrapper.clearfix:before,
.flip-clock-wrapper.clearfix:after {
content: " ";
display: table; }
.flip-clock-wrapper.clearfix:after {
clear: both; }
.flip-clock-wrapper.clearfix {
*zoom: 1; }
/* Main */
.flip-clock-wrapper {
font: normal 11px "Helvetica Neue", Helvetica, sans-serif;
-webkit-user-select: none; }
.flip-clock-meridium {
background: none !important;
box-shadow: 0 0 0 !important;
font-size: 36px !important; }
.flip-clock-meridium a { color: #313333; }
.flip-clock-wrapper {
text-align: center;
position: relative;
width: 100%;
margin: 1em;
}
.flip-clock-wrapper:before,
.flip-clock-wrapper:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.flip-clock-wrapper:after {
clear: both;
}
/* Skeleton */
.flip-clock-wrapper ul {
position: relative;
float: left;
margin: 5px;
width: 60px;
height: 90px;
font-size: 80px;
font-weight: bold;
line-height: 87px;
border-radius: 6px;
background: #000;
}
.flip-clock-wrapper ul li {
z-index: 1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
line-height: 87px;
text-decoration: none !important;
}
.flip-clock-wrapper ul li:first-child {
z-index: 2; }
.flip-clock-wrapper ul li a {
display: block;
height: 100%;
-webkit-perspective: 200px;
-moz-perspective: 200px;
perspective: 200px;
margin: 0 !important;
overflow: visible !important;
cursor: default !important; }
.flip-clock-wrapper ul li a div {
z-index: 1;
position: absolute;
left: 0;
width: 100%;
height: 50%;
font-size: 80px;
overflow: hidden;
outline: 1px solid transparent; }
.flip-clock-wrapper ul li a div .shadow {
position: absolute;
width: 100%;
height: 100%;
z-index: 2; }
.flip-clock-wrapper ul li a div.up {
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
top: 0; }
.flip-clock-wrapper ul li a div.up:after {
content: "";
position: absolute;
top: 44px;
left: 0;
z-index: 5;
width: 100%;
height: 3px;
background-color: #000;
background-color: rgba(0, 0, 0, 0.4); }
.flip-clock-wrapper ul li a div.down {
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
bottom: 0;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.flip-clock-wrapper ul li a div div.inn {
position: absolute;
left: 0;
z-index: 1;
width: 100%;
height: 200%;
color: #ccc;
text-shadow: 0 1px 2px #000;
text-align: center;
background-color: #333;
border-radius: 6px;
font-size: 70px; }
.flip-clock-wrapper ul li a div.up div.inn {
top: 0; }
.flip-clock-wrapper ul li a div.down div.inn {
bottom: 0; }
/* PLAY */
.flip-clock-wrapper ul.play li.flip-clock-before {
z-index: 3; }
.flip-clock-wrapper .flip { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7); }
.flip-clock-wrapper ul.play li.flip-clock-active {
-webkit-animation: asd 0.01s 0.49s linear both;
-moz-animation: asd 0.01s 0.49s linear both;
animation: asd 0.01s 0.49s linear both;
z-index: 5; }
.flip-clock-divider {
float: left;
display: inline-block;
position: relative;
width: 20px;
height: 100px; }
.flip-clock-divider:first-child {
width: 0; }
.flip-clock-dot {
display: block;
background: #323434;
width: 10px;
height: 10px;
position: absolute;
border-radius: 50%;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
left: 5px; }
.flip-clock-divider .flip-clock-label {
position: absolute;
top: -1.5em;
right: -86px;
color: black;
text-shadow: none; }
.flip-clock-divider.minutes .flip-clock-label {
right: -88px; }
.flip-clock-divider.seconds .flip-clock-label {
right: -91px; }
.flip-clock-dot.top {
top: 30px; }
.flip-clock-dot.bottom {
bottom: 30px; }
#-webkit-keyframes asd {
0% {
z-index: 2; }
100% {
z-index: 4; } }
#-moz-keyframes asd {
0% {
z-index: 2; }
100% {
z-index: 4; } }
#-o-keyframes asd {
0% {
z-index: 2; }
100% {
z-index: 4; } }
#keyframes asd {
0% {
z-index: 2; }
100% {
z-index: 4; } }
.flip-clock-wrapper ul.play li.flip-clock-active .down {
z-index: 2;
-webkit-animation: turn 0.5s 0.5s linear both;
-moz-animation: turn 0.5s 0.5s linear both;
animation: turn 0.5s 0.5s linear both; }
#-webkit-keyframes turn {
0% {
-webkit-transform: rotateX(90deg); }
100% {
-webkit-transform: rotateX(0deg); } }
#-moz-keyframes turn {
0% {
-moz-transform: rotateX(90deg); }
100% {
-moz-transform: rotateX(0deg); } }
#-o-keyframes turn {
0% {
-o-transform: rotateX(90deg); }
100% {
-o-transform: rotateX(0deg); } }
#keyframes turn {
0% {
transform: rotateX(90deg); }
100% {
transform: rotateX(0deg); } }
.flip-clock-wrapper ul.play li.flip-clock-before .up {
z-index: 2;
-webkit-animation: turn2 0.5s linear both;
-moz-animation: turn2 0.5s linear both;
animation: turn2 0.5s linear both; }
#-webkit-keyframes turn2 {
0% {
-webkit-transform: rotateX(0deg); }
100% {
-webkit-transform: rotateX(-90deg); } }
#-moz-keyframes turn2 {
0% {
-moz-transform: rotateX(0deg); }
100% {
-moz-transform: rotateX(-90deg); } }
#-o-keyframes turn2 {
0% {
-o-transform: rotateX(0deg); }
100% {
-o-transform: rotateX(-90deg); } }
#keyframes turn2 {
0% {
transform: rotateX(0deg); }
100% {
transform: rotateX(-90deg); } }
.flip-clock-wrapper ul li.flip-clock-active {
z-index: 3; }
/* SHADOW */
.flip-clock-wrapper ul.play li.flip-clock-before .up .shadow {
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));
background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;
background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;
-webkit-animation: show 0.5s linear both;
-moz-animation: show 0.5s linear both;
animation: show 0.5s linear both; }
.flip-clock-wrapper ul.play li.flip-clock-active .up .shadow {
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));
background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;
background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;
-webkit-animation: hide 0.5s 0.3s linear both;
-moz-animation: hide 0.5s 0.3s linear both;
animation: hide 0.5s 0.3s linear both; }
/*DOWN*/
.flip-clock-wrapper ul.play li.flip-clock-before .down .shadow {
background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));
background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;
background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;
-webkit-animation: show 0.5s linear both;
-moz-animation: show 0.5s linear both;
animation: show 0.5s linear both; }
.flip-clock-wrapper ul.play li.flip-clock-active .down .shadow {
background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));
background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;
background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;
-webkit-animation: hide 0.5s 0.3s linear both;
-moz-animation: hide 0.5s 0.3s linear both;
animation: hide 0.5s 0.2s linear both; }
#-webkit-keyframes show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#-moz-keyframes show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#-o-keyframes show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#keyframes show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#-webkit-keyframes hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
#-moz-keyframes hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
#-o-keyframes hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
#keyframes hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
<div class="clock"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.7/flipclock.min.js" integrity="sha512-Vy4ftjkcjamOFPNSK7Osn8kYhF7XDcLWPiRvSmdimNscisyC8MkhDlAHSt+psegxRzd/q6wUC/VFhQZ6P2hBOw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
I wonder if do We have possible to destroy/clearInterval var clock; just using clearInterval(clock) ? Tried and no luck.
I already open the manual documentation, but seems I'm not so understand how to destroy that.
Per the documentation you linked, the [clock instance has .stop() and reset() methods...
var clock = $(".clock").FlipClock({
clockFace: 'TwentyFourHourClock',
callbacks:{
}
});
function stopClock() {
clock.stop();
}
/* Get the bourbon mixin from http://bourbon.io */
/* Reset */
.flip-clock-wrapper * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-clock-wrapper a {
cursor: pointer;
text-decoration: none;
color: #ccc; }
.flip-clock-wrapper a:hover {
color: #fff; }
.flip-clock-wrapper ul {
list-style: none; }
.flip-clock-wrapper.clearfix:before,
.flip-clock-wrapper.clearfix:after {
content: " ";
display: table; }
.flip-clock-wrapper.clearfix:after {
clear: both; }
.flip-clock-wrapper.clearfix {
*zoom: 1; }
/* Main */
.flip-clock-wrapper {
font: normal 11px "Helvetica Neue", Helvetica, sans-serif;
-webkit-user-select: none; }
.flip-clock-meridium {
background: none !important;
box-shadow: 0 0 0 !important;
font-size: 36px !important; }
.flip-clock-meridium a { color: #313333; }
.flip-clock-wrapper {
text-align: center;
position: relative;
width: 100%;
margin: 1em;
}
.flip-clock-wrapper:before,
.flip-clock-wrapper:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.flip-clock-wrapper:after {
clear: both;
}
/* Skeleton */
.flip-clock-wrapper ul {
position: relative;
float: left;
margin: 5px;
width: 60px;
height: 90px;
font-size: 80px;
font-weight: bold;
line-height: 87px;
border-radius: 6px;
background: #000;
}
.flip-clock-wrapper ul li {
z-index: 1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
line-height: 87px;
text-decoration: none !important;
}
.flip-clock-wrapper ul li:first-child {
z-index: 2; }
.flip-clock-wrapper ul li a {
display: block;
height: 100%;
-webkit-perspective: 200px;
-moz-perspective: 200px;
perspective: 200px;
margin: 0 !important;
overflow: visible !important;
cursor: default !important; }
.flip-clock-wrapper ul li a div {
z-index: 1;
position: absolute;
left: 0;
width: 100%;
height: 50%;
font-size: 80px;
overflow: hidden;
outline: 1px solid transparent; }
.flip-clock-wrapper ul li a div .shadow {
position: absolute;
width: 100%;
height: 100%;
z-index: 2; }
.flip-clock-wrapper ul li a div.up {
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
top: 0; }
.flip-clock-wrapper ul li a div.up:after {
content: "";
position: absolute;
top: 44px;
left: 0;
z-index: 5;
width: 100%;
height: 3px;
background-color: #000;
background-color: rgba(0, 0, 0, 0.4); }
.flip-clock-wrapper ul li a div.down {
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
bottom: 0;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.flip-clock-wrapper ul li a div div.inn {
position: absolute;
left: 0;
z-index: 1;
width: 100%;
height: 200%;
color: #ccc;
text-shadow: 0 1px 2px #000;
text-align: center;
background-color: #333;
border-radius: 6px;
font-size: 70px; }
.flip-clock-wrapper ul li a div.up div.inn {
top: 0; }
.flip-clock-wrapper ul li a div.down div.inn {
bottom: 0; }
/* PLAY */
.flip-clock-wrapper ul.play li.flip-clock-before {
z-index: 3; }
.flip-clock-wrapper .flip { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7); }
.flip-clock-wrapper ul.play li.flip-clock-active {
-webkit-animation: asd 0.01s 0.49s linear both;
-moz-animation: asd 0.01s 0.49s linear both;
animation: asd 0.01s 0.49s linear both;
z-index: 5; }
.flip-clock-divider {
float: left;
display: inline-block;
position: relative;
width: 20px;
height: 100px; }
.flip-clock-divider:first-child {
width: 0; }
.flip-clock-dot {
display: block;
background: #323434;
width: 10px;
height: 10px;
position: absolute;
border-radius: 50%;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
left: 5px; }
.flip-clock-divider .flip-clock-label {
position: absolute;
top: -1.5em;
right: -86px;
color: black;
text-shadow: none; }
.flip-clock-divider.minutes .flip-clock-label {
right: -88px; }
.flip-clock-divider.seconds .flip-clock-label {
right: -91px; }
.flip-clock-dot.top {
top: 30px; }
.flip-clock-dot.bottom {
bottom: 30px; }
#-webkit-keyframes asd {
0% {
z-index: 2; }
100% {
z-index: 4; } }
#-moz-keyframes asd {
0% {
z-index: 2; }
100% {
z-index: 4; } }
#-o-keyframes asd {
0% {
z-index: 2; }
100% {
z-index: 4; } }
#keyframes asd {
0% {
z-index: 2; }
100% {
z-index: 4; } }
.flip-clock-wrapper ul.play li.flip-clock-active .down {
z-index: 2;
-webkit-animation: turn 0.5s 0.5s linear both;
-moz-animation: turn 0.5s 0.5s linear both;
animation: turn 0.5s 0.5s linear both; }
#-webkit-keyframes turn {
0% {
-webkit-transform: rotateX(90deg); }
100% {
-webkit-transform: rotateX(0deg); } }
#-moz-keyframes turn {
0% {
-moz-transform: rotateX(90deg); }
100% {
-moz-transform: rotateX(0deg); } }
#-o-keyframes turn {
0% {
-o-transform: rotateX(90deg); }
100% {
-o-transform: rotateX(0deg); } }
#keyframes turn {
0% {
transform: rotateX(90deg); }
100% {
transform: rotateX(0deg); } }
.flip-clock-wrapper ul.play li.flip-clock-before .up {
z-index: 2;
-webkit-animation: turn2 0.5s linear both;
-moz-animation: turn2 0.5s linear both;
animation: turn2 0.5s linear both; }
#-webkit-keyframes turn2 {
0% {
-webkit-transform: rotateX(0deg); }
100% {
-webkit-transform: rotateX(-90deg); } }
#-moz-keyframes turn2 {
0% {
-moz-transform: rotateX(0deg); }
100% {
-moz-transform: rotateX(-90deg); } }
#-o-keyframes turn2 {
0% {
-o-transform: rotateX(0deg); }
100% {
-o-transform: rotateX(-90deg); } }
#keyframes turn2 {
0% {
transform: rotateX(0deg); }
100% {
transform: rotateX(-90deg); } }
.flip-clock-wrapper ul li.flip-clock-active {
z-index: 3; }
/* SHADOW */
.flip-clock-wrapper ul.play li.flip-clock-before .up .shadow {
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));
background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;
background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;
-webkit-animation: show 0.5s linear both;
-moz-animation: show 0.5s linear both;
animation: show 0.5s linear both; }
.flip-clock-wrapper ul.play li.flip-clock-active .up .shadow {
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));
background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;
background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;
-webkit-animation: hide 0.5s 0.3s linear both;
-moz-animation: hide 0.5s 0.3s linear both;
animation: hide 0.5s 0.3s linear both; }
/*DOWN*/
.flip-clock-wrapper ul.play li.flip-clock-before .down .shadow {
background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));
background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;
background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;
-webkit-animation: show 0.5s linear both;
-moz-animation: show 0.5s linear both;
animation: show 0.5s linear both; }
.flip-clock-wrapper ul.play li.flip-clock-active .down .shadow {
background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));
background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;
background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;
-webkit-animation: hide 0.5s 0.3s linear both;
-moz-animation: hide 0.5s 0.3s linear both;
animation: hide 0.5s 0.2s linear both; }
#-webkit-keyframes show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#-moz-keyframes show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#-o-keyframes show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#keyframes show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#-webkit-keyframes hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
#-moz-keyframes hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
#-o-keyframes hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
#keyframes hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
<div class="clock"></div>
<button onclick="stopClock()">stop</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.7/flipclock.min.js" integrity="sha512-Vy4ftjkcjamOFPNSK7Osn8kYhF7XDcLWPiRvSmdimNscisyC8MkhDlAHSt+psegxRzd/q6wUC/VFhQZ6P2hBOw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
The clearInterval() method clears a timer set with the setInterval() method.
The ID value returned by setInterval() is used as the parameter for the clearInterval() method.
Note: To be able to use the clearInterval() method, you must use a variable when creating the interval method:
Here clock variable is not a timer set with setInterval so you can't use clearInterval.
Events callback should help you to do your thing .
I'm trying to make a submarine (SVG) seem as if it's floating on top of a
wave (also SVG).
Since the wave is constantly going up and down, I want the submarine to be centered vertically (x), but be moving horizontally on top of the wave.
This is the code for the wave
// best seen at 1500px or less
html, body { height: 100%; }
body {
background:radial-gradient(ellipse at center, rgba(255,254,234,1) 0%, rgba(255,254,234,1) 35%, #B7E8EB 100%);
overflow: hidden;
}
.ocean {
height: 5%;
width:100%;
position:absolute;
bottom:0;
left:0;
background: #015871;
}
.wave {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg) repeat-x;
position: absolute;
top: -198px;
width: 6400px;
height: 198px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
transform: translate3d(0, 0, 0);
}
.wave:nth-of-type(2) {
top: -175px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;
opacity: 1;
}
#keyframes wave {
0% {
margin-left: 0;
}
100% {
margin-left: -1600px;
}
}
#keyframes swell {
0%, 100% {
transform: translate3d(0,-25px,0);
}
50% {
transform: translate3d(0,5px,0);
}
}
<div class="ocean">
<div class="wave"></div>
<div class="wave"></div>
</div>
I added a class called 'sub' to get your picture formatted and also to add the animation. Notice I added the 'ease-out' as the animation timing function so that it goes down fast but up slower to keep up with the wave timing. But this is also just a result of tweaking the parameters and the animation 'updown' just right so that its working in the opposite direction to the wave based on how it starts. This is one way to do it, if you want to tweak the height or the ease out just change the seconds on ease-out in the 'sub' class or tweak the pixel count in the updown function. Hope this helps!
// best seen at 1500px or less
html, body { height: 100%; }
body {
background:radial-gradient(ellipse at center, rgba(255,254,234,1) 0%, rgba(255,254,234,1) 35%, #B7E8EB 100%);
overflow: hidden;
}
.sub{
position: absolute;
top: 85%;
left: 50%;
width: 100px;
height: 100px;
margin-top: -100px; /* Start height margin */
margin-left: -50px; /* Half the width */
animation: updown 7s cubic-bezier(0.42, 0, 0.58, 1) infinite;
animation-timing-function:ease-in-out;
transform: translate3d(0, 0, 0);
}
.ocean {
height: 5%;
width:100%;
position:absolute;
bottom:0;
left:0;
background: #015871;
}
.wave {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg) repeat-x;
position: absolute;
top: -198px;
width: 6400px;
height: 198px;
animation: wave 7s cubic-bezier(0.36, 0.48, 0.63, 0.53) infinite;
transform: translate3d(0, 0, 0);
}
.wave:nth-of-type(2) {
top: -175px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite,
swell 7s ease -1.25s infinite;
opacity: 1;
}
#keyframes wave {
0% {
margin-left: 0;
}
100% {
margin-left: -1600px;
}
}
#keyframes swell {
0%, 100% {
transform: translate3d(0,-25px,0);
}
50% {
transform: translate3d(0,5px,0);
}
}
#keyframes updown {
0%, 100% {
transform: translate3d(0,-40px,0);
}
70% {
transform: translate3d(0,45px,0);
}
}
<img class = "sub" src = "https://image.flaticon.com/icons/svg/447/447773.svg">
<div class="ocean">
<div class="wave"></div>
<div class="wave"></div>
</div>
Guys i have a sliding menu bar which is getting hide below the main menu bar
I have tried with all the property but unable to do so. The sliding menu bar should be top of the main menu bar so that the scrolling of sub-menu could take place.
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
document.body.style.backgroundColor = "white";
}
body {
font-family: "Lato", sans-serif;
transition: background-color .5s;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
position: absolute;
top: 40px;
transition: margin-left .5s;
padding: 40px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
*{ margin: 0; padding: 0;}
body {
/*To hide the horizontal scroller appearing during the animation*/
overflow: hidden;
}
#clouds{
padding: 100px 0;
background: #c9dbe9;
background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
}
/*Time to finalise the cloud shape*/
.cloud {
width: 200px; height: 60px;
background: #fff;
border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
position: relative;
}
.cloud:before, .cloud:after {
content: '';
position: absolute;
background: #fff;
width: 100px; height: 80px;
position: absolute; top: -15px; left: 10px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
.cloud:after {
width: 120px; height: 120px;
top: -55px; left: auto; right: 15px;
}
/*Time to animate*/
.x1 {
-webkit-animation: moveclouds 15s linear infinite;
-moz-animation: moveclouds 15s linear infinite;
-o-animation: moveclouds 15s linear infinite;
}
/*variable speed, opacity, and position of clouds for realistic effect*/
.x2 {
left: 200px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.6; /*opacity proportional to the size*/
/*Speed will also be proportional to the size and opacity*/
/*More the speed. Less the time in 's' = seconds*/
-webkit-animation: moveclouds 25s linear infinite;
-moz-animation: moveclouds 25s linear infinite;
-o-animation: moveclouds 25s linear infinite;
}
.x3 {
left: -250px; top: -200px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8; /*opacity proportional to the size*/
-webkit-animation: moveclouds 20s linear infinite;
-moz-animation: moveclouds 20s linear infinite;
-o-animation: moveclouds 20s linear infinite;
}
.x4 {
left: 470px; top: -250px;
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
transform: scale(0.75);
opacity: 0.75; /*opacity proportional to the size*/
-webkit-animation: moveclouds 18s linear infinite;
-moz-animation: moveclouds 18s linear infinite;
-o-animation: moveclouds 18s linear infinite;
}
.x5 {
left: -150px; top: -150px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8; /*opacity proportional to the size*/
-webkit-animation: moveclouds 20s linear infinite;
-moz-animation: moveclouds 20s linear infinite;
-o-animation: moveclouds 20s linear infinite;
}
#-webkit-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
#-moz-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
#-o-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
nav {
max-width: 1500px;
mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);
margin: -500px auto;
padding: 60px 0;
}
nav ul {
text-align: center;
background: linear-gradient(90deg, #7FFFD4 0%, #7FFFD4 25%, #7FFFD4 75%, #7FFFD4 100%);
box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
}
nav ul li {
display: inline-block;
padding-left:80px;
}
nav ul li a {
padding: 18px;
font-family: "Open Sans";
text-transform:uppercase;
color: #000000;
font-size: 18px;
text-decoration: none;
display: block;
}
nav ul li a:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.6);
color: rgba(0, 35, 122, 0.7);
}
.menubar{
position: relative;
bottom: -100;
}
<body>
<div id="clouds">
<div class="cloud x1"></div>
<!-- Time for multiple clouds to dance around -->
<div class="cloud x2"></div>
<div class="cloud x3"></div>
<div class="cloud x4"></div>
<div class="cloud x5"></div>
</div>
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<div id="main">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ </span>
</div>
<div class="menubar">
<nav>
<ul>
<li>
Home
</li>
<li>
Java
</li>
<li>
JavaScript
</li>
<li>
HTML
</li>
<li>
CSS
</li>
<li>
About
</li>
</ul>
</nav>
Here you can see the output bu running it. You can see how it's getting hide?
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
document.body.style.backgroundColor = "white";
}
body {
font-family: "Lato", sans-serif;
transition: background-color .5s;
}
.open-btn{ font-size:30px;cursor:pointe; position: relative;
z-index: 1111;}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
position: absolute;
top: 40px;
transition: margin-left .5s;
padding: 40px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
*{ margin: 0; padding: 0;}
body {
/*To hide the horizontal scroller appearing during the animation*/
overflow: hidden;
}
#clouds{
padding: 100px 0;
background: #c9dbe9;
background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
}
/*Time to finalise the cloud shape*/
.cloud {
width: 200px; height: 60px;
background: #fff;
border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
position: relative;
}
.cloud:before, .cloud:after {
content: '';
position: absolute;
background: #fff;
width: 100px; height: 80px;
position: absolute; top: -15px; left: 10px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
.cloud:after {
width: 120px; height: 120px;
top: -55px; left: auto; right: 15px;
}
/*Time to animate*/
.x1 {
-webkit-animation: moveclouds 15s linear infinite;
-moz-animation: moveclouds 15s linear infinite;
-o-animation: moveclouds 15s linear infinite;
}
/*variable speed, opacity, and position of clouds for realistic effect*/
.x2 {
left: 200px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.6; /*opacity proportional to the size*/
/*Speed will also be proportional to the size and opacity*/
/*More the speed. Less the time in 's' = seconds*/
-webkit-animation: moveclouds 25s linear infinite;
-moz-animation: moveclouds 25s linear infinite;
-o-animation: moveclouds 25s linear infinite;
}
.x3 {
left: -250px; top: -200px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8; /*opacity proportional to the size*/
-webkit-animation: moveclouds 20s linear infinite;
-moz-animation: moveclouds 20s linear infinite;
-o-animation: moveclouds 20s linear infinite;
}
.x4 {
left: 470px; top: -250px;
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
transform: scale(0.75);
opacity: 0.75; /*opacity proportional to the size*/
-webkit-animation: moveclouds 18s linear infinite;
-moz-animation: moveclouds 18s linear infinite;
-o-animation: moveclouds 18s linear infinite;
}
.x5 {
left: -150px; top: -150px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8; /*opacity proportional to the size*/
-webkit-animation: moveclouds 20s linear infinite;
-moz-animation: moveclouds 20s linear infinite;
-o-animation: moveclouds 20s linear infinite;
}
#-webkit-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
#-moz-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
#-o-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
nav {
max-width: 1500px;
mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);
margin: -500px auto;
padding: 60px 0;
}
nav ul {
text-align: center;
background: linear-gradient(90deg, #7FFFD4 0%, #7FFFD4 25%, #7FFFD4 75%, #7FFFD4 100%);
box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
}
nav ul li {
display: inline-block;
padding-left:80px;
}
nav ul li a {
padding: 18px;
font-family: "Open Sans";
text-transform:uppercase;
color: #000000;
font-size: 18px;
text-decoration: none;
display: block;
}
nav ul li a:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.6);
color: rgba(0, 35, 122, 0.7);
}
.menubar{
position: relative;
bottom: -100;
}
<body>
<div id="clouds">
<div class="cloud x1"></div>
<!-- Time for multiple clouds to dance around -->
<div class="cloud x2"></div>
<div class="cloud x3"></div>
<div class="cloud x4"></div>
<div class="cloud x5"></div>
</div>
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<div id="main">
<span class="open-btn" onclick="openNav()"> ☰ </span>
</div>
<div class="menubar">
<nav>
<ul>
<li>
Home
</li>
<li>
Java
</li>
<li>
JavaScript
</li>
<li>
HTML
</li>
<li>
CSS
</li>
<li>
About
</li>
</ul>
</nav>
The button should not be inside the toggling navbar itself so I moved it out, also I created a single function (toggleNav()) instead of two separate function. Here I check if the width is set, if so set it to zero, else vice versa will happen. Please use this as a template and style your code to meet your requirements, hope this solves your issue!
function toggleNav() {
if( document.getElementById("mySidenav").style.width === "250px"){
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
document.body.style.backgroundColor = "white";
document.getElementById("closebtn").innerHTML = "☰";
}else{
document.getElementById("mySidenav").style.width = "250px"
document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
document.getElementById("closebtn").innerHTML = "X";
}
}
body {
font-family: "Lato", sans-serif;
transition: background-color .5s;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
z-index: 10;
}
#closebtn{
text-decoration: none;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.menubar{
z-index:9;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
position: absolute;
top: 40px;
transition: margin-left .5s;
padding: 40px;
z-index:10;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
*{ margin: 0; padding: 0;}
body {
/*To hide the horizontal scroller appearing during the animation*/
overflow: hidden;
}
#clouds{
padding: 100px 0;
background: #c9dbe9;
background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
}
/*Time to finalise the cloud shape*/
.cloud {
width: 200px; height: 60px;
background: #fff;
border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
position: relative;
}
.cloud:before, .cloud:after {
content: '';
position: absolute;
background: #fff;
width: 100px; height: 80px;
position: absolute; top: -15px; left: 10px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
.cloud:after {
width: 120px; height: 120px;
top: -55px; left: auto; right: 15px;
}
/*Time to animate*/
.x1 {
-webkit-animation: moveclouds 15s linear infinite;
-moz-animation: moveclouds 15s linear infinite;
-o-animation: moveclouds 15s linear infinite;
}
/*variable speed, opacity, and position of clouds for realistic effect*/
.x2 {
left: 200px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.6; /*opacity proportional to the size*/
/*Speed will also be proportional to the size and opacity*/
/*More the speed. Less the time in 's' = seconds*/
-webkit-animation: moveclouds 25s linear infinite;
-moz-animation: moveclouds 25s linear infinite;
-o-animation: moveclouds 25s linear infinite;
}
.x3 {
left: -250px; top: -200px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8; /*opacity proportional to the size*/
-webkit-animation: moveclouds 20s linear infinite;
-moz-animation: moveclouds 20s linear infinite;
-o-animation: moveclouds 20s linear infinite;
}
.x4 {
left: 470px; top: -250px;
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
transform: scale(0.75);
opacity: 0.75; /*opacity proportional to the size*/
-webkit-animation: moveclouds 18s linear infinite;
-moz-animation: moveclouds 18s linear infinite;
-o-animation: moveclouds 18s linear infinite;
}
.x5 {
left: -150px; top: -150px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8; /*opacity proportional to the size*/
-webkit-animation: moveclouds 20s linear infinite;
-moz-animation: moveclouds 20s linear infinite;
-o-animation: moveclouds 20s linear infinite;
}
#-webkit-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
#-moz-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
#-o-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
nav {
max-width: 1500px;
mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);
margin: -500px auto;
padding: 60px 0;
}
nav ul {
text-align: center;
background: linear-gradient(90deg, #7FFFD4 0%, #7FFFD4 25%, #7FFFD4 75%, #7FFFD4 100%);
box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
}
nav ul li {
display: inline-block;
padding-left:80px;
}
nav ul li a {
padding: 18px;
font-family: "Open Sans";
text-transform:uppercase;
color: #000000;
font-size: 18px;
text-decoration: none;
display: block;
}
nav ul li a:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.6);
color: rgba(0, 35, 122, 0.7);
}
.menubar{
position: relative;
bottom: -100;
}
<body>
<div id="clouds">
<div class="cloud x1"></div>
<!-- Time for multiple clouds to dance around -->
<div class="cloud x2"></div>
<div class="cloud x3"></div>
<div class="cloud x4"></div>
<div class="cloud x5"></div>
</div>
<div id="mySidenav" class="sidenav">
About
Services
Clients
Contact
</div>
<div id="main">
☰
</div>
<div class="menubar">
<nav>
<ul>
<li>
Home
</li>
<li>
Java
</li>
<li>
JavaScript
</li>
<li>
HTML
</li>
<li>
CSS
</li>
<li>
About
</li>
</ul>
</nav>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
document.body.style.backgroundColor = "white";
}
body {
font-family: "Lato", sans-serif;
transition: background-color .5s;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
position: absolute;
top: 40px;
transition: margin-left .5s;
padding: 40px;
}
#main {
position: absolute;
z-index: 80;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
*{ margin: 0; padding: 0;}
body {
/*To hide the horizontal scroller appearing during the animation*/
overflow: hidden;
}
#clouds{
padding: 100px 0;
background: #c9dbe9;
background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
}
/*Time to finalise the cloud shape*/
.cloud {
width: 200px; height: 60px;
background: #fff;
border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
position: relative;
}
.cloud:before, .cloud:after {
content: '';
position: absolute;
background: #fff;
width: 100px; height: 80px;
position: absolute; top: -15px; left: 10px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
.cloud:after {
width: 120px; height: 120px;
top: -55px; left: auto; right: 15px;
}
/*Time to animate*/
.x1 {
-webkit-animation: moveclouds 15s linear infinite;
-moz-animation: moveclouds 15s linear infinite;
-o-animation: moveclouds 15s linear infinite;
}
/*variable speed, opacity, and position of clouds for realistic effect*/
.x2 {
left: 200px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.6; /*opacity proportional to the size*/
/*Speed will also be proportional to the size and opacity*/
/*More the speed. Less the time in 's' = seconds*/
-webkit-animation: moveclouds 25s linear infinite;
-moz-animation: moveclouds 25s linear infinite;
-o-animation: moveclouds 25s linear infinite;
}
.x3 {
left: -250px; top: -200px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8; /*opacity proportional to the size*/
-webkit-animation: moveclouds 20s linear infinite;
-moz-animation: moveclouds 20s linear infinite;
-o-animation: moveclouds 20s linear infinite;
}
.x4 {
left: 470px; top: -250px;
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
transform: scale(0.75);
opacity: 0.75; /*opacity proportional to the size*/
-webkit-animation: moveclouds 18s linear infinite;
-moz-animation: moveclouds 18s linear infinite;
-o-animation: moveclouds 18s linear infinite;
}
.x5 {
left: -150px; top: -150px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8; /*opacity proportional to the size*/
-webkit-animation: moveclouds 20s linear infinite;
-moz-animation: moveclouds 20s linear infinite;
-o-animation: moveclouds 20s linear infinite;
}
#-webkit-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
#-moz-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
#-o-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
nav {
max-width: 1500px;
mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);
margin: -500px auto;
padding: 60px 0;
}
nav ul {
text-align: center;
background: linear-gradient(90deg, #7FFFD4 0%, #7FFFD4 25%, #7FFFD4 75%, #7FFFD4 100%);
box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
}
nav ul li {
display: inline-block;
padding-left:80px;
}
nav ul li a {
padding: 18px;
font-family: "Open Sans";
text-transform:uppercase;
color: #000000;
font-size: 18px;
text-decoration: none;
display: block;
}
nav ul li a:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.6);
color: rgba(0, 35, 122, 0.7);
}
.menubar{
position: relative;
bottom: -16px;
}
<body>
<div id="clouds">
<div class="cloud x1"></div>
<!-- Time for multiple clouds to dance around -->
<div class="cloud x2"></div>
<div class="cloud x3"></div>
<div class="cloud x4"></div>
<div class="cloud x5"></div>
</div>
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<div id="main">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ </span>
</div>
<div class="menubar">
<nav>
<ul>
<li>
Home
</li>
<li>
Java
</li>
<li>
JavaScript
</li>
<li>
HTML
</li>
<li>
CSS
</li>
<li>
About
</li>
</ul>
</nav>
</div>
</body>
I am aware that this is possible with three.js but it seems that three.js maxes a mesh sphere and the image gets a bit distorted. I'd also rather just use CSS if possible.
Is this something that can be done with CSS transforms? Ideally I'd like to animate it going from a flat image to a sphere so something that can easily be animated with CSS transitions would be great.
I found a nice example of how to do this with CSS on codepen: http://codepen.io/donovanh/pen/GBIiv. It doesn't actually wrap the image in 3d but it looks nice enough for my purposes.
Here is the relevant html/css:
<section class="stage">
<figure class="ball"><span class="shadow"></span></figure>
</section>
.ball {
display: inline-block;
width: 100%;
height: 100%;
margin: 0;
border-radius: 50%;
position: relative;
-webkit-transform-style: preserve-3d;
background: url('https://alxgroup.net/gto-range-builder/images/treeSS.png') repeat-x;
background-size: auto 100%;
-webkit-animation: move-map 30s infinite linear;
-moz-animation: move-map 30s infinite linear;
-o-animation: move-map 30s infinite linear;
-ms-animation: move-map 30s infinite linear;
animation: move-map 30s infinite linear;
}
.ball:before {
content: "";
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: -40px 10px 70px 10px rgba(0,0,0,0.5) inset;
z-index: 2;
}
.ball:after {
content: "";
position: absolute;
border-radius: 50%;
width: 100%;
height: 100%;
top: 0;
left: 0;
-webkit-filter: blur(0);
opacity: 0.3;
background: radial-gradient(circle at 50% 80%, #81e8f6, #76deef 10%, #055194 66%, #062745 100%);
}
.ball .shadow {
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
-webkit-transform: rotateX(90deg) translateZ(-150px);
-moz-transform: rotateX(90deg) translateZ(-150px);
-ms-transform: rotateX(90deg) translateZ(-150px);
-o-transform: rotateX(90deg) translateZ(-150px);
transform: rotateX(90deg) translateZ(-150px);
z-index: -1;
}
body {
width: 300px;
margin: 20px auto;
background: linear-gradient(to bottom, rgba(100, 100, 100, 0.2) 0%, rgba(255, 255, 255, 0.5) 40%, #ffffff 100%);
background-repeat: no-repeat;
}
.stage {
width: 300px;
height: 300px;
display: inline-block;
margin: 20px;
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
-ms-perspective: 1200px;
-o-perspective: 1200px;
perspective: 1200px;
-webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
-o-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
}
#-moz-keyframes move-map {
0% {
background-position: -849px 0; }
100% {
background-position: 0 0; } }
#-webkit-keyframes move-map {
0% {
background-position: 0 0; }
100% {
background-position: -849px 0; }
}
#-o-keyframes move-map {
0% {
background-position: -849px 0; }
100% {
background-position: 0 0; } }
#-ms-keyframes move-map {
0% {
background-position: -849px 0; }
100% {
background-position: 0 0; } }
#keyframes move-map {
0% {
background-position: -849px 0; }
100% {
background-position: 0 0; } }