My site uses an anti-adblock that prevents people from entering it, but no one likes to see advertisements, so I've decided to look for a way to let new visitors use the site a few times before the message to disable adblock appears.
I tried to use cookies to record a number, and every time the person visits subtract the number, delete the old cookie, create a new one with the number subtracted, so when the number is equal to 0 the anti-adblock appears, but it is confusing for me I barely started learning javascript.
Is there any easier way to do this or cookie is the best option? How do I do this?
Sample page of my anti-Adblock: https://www.stackexample.ml/adblock
My anti-adblock code:
NOTE: My website is static.
window.onload = function a() {
var div1 = document.getElementById("off");
var div2 = document.getElementById("on");
var div3 = document.getElementById("carregando");
var span = document.getElementById("v");
var b = document.getElementById("b");
var url = new URL(window.location);
var r = url.searchParams.get("r");
var enc1 = window.atob(r);
if( window.canRunAds === undefined ){
div2.style.display="block"
div3.style.display="none"
b.style.display="block"
span.style.color="#d06079"
span.innerHTML="Desative o Adblock"
}else{
div1.style.display="block"
div3.style.display="none"
span.innerHTML="Adblock desativado"
//código para liberar a pagina aqui
}
};
.cont {
width:320px;
margin:18% auto;
}
#b {
border:1px solid #ba5269;
background-color:#d06079;
color:white;
border-radius:6px;
padding:15px;
font-size:18px;
display:none;
margin:25px auto;
}
#on{
display:none;
margin:22px auto;
}
.check_mark {
width: 80px;
height: 130px;
margin: 0 auto;
display:none;
}
#v {
font-family:arial;
font-size:35px;
color:green;
display:block;
text-align:center;
}
button {
cursor: pointer;
margin-left: 15px;
}
.hide{
display:none;
}
.sa-icon {
width: 80px;
height: 80px;
border: 4px solid gray;
-webkit-border-radius: 40px;
border-radius: 40px;
border-radius: 50%;
margin: 20px auto;
padding: 0;
position: relative;
box-sizing: content-box;
}
.sa-icon.sa-success {
border-color: #4CAF50;
}
.sa-icon.sa-success::before, .sa-icon.sa-success::after {
content: '';
-webkit-border-radius: 40px;
border-radius: 40px;
border-radius: 50%;
position: absolute;
width: 60px;
height: 120px;
background: white;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.sa-icon.sa-success::before {
-webkit-border-radius: 120px 0 0 120px;
border-radius: 120px 0 0 120px;
top: -7px;
left: -33px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 60px 60px;
transform-origin: 60px 60px;
}
.sa-icon.sa-success::after {
-webkit-border-radius: 0 120px 120px 0;
border-radius: 0 120px 120px 0;
top: -11px;
left: 30px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0px 60px;
transform-origin: 0px 60px;
}
.sa-icon.sa-success .sa-placeholder {
width: 80px;
height: 80px;
border: 4px solid rgba(76, 175, 80, .5);
-webkit-border-radius: 40px;
border-radius: 40px;
border-radius: 50%;
box-sizing: content-box;
position: absolute;
left: -4px;
top: -4px;
z-index: 2;
}
.sa-icon.sa-success .sa-fix {
width: 5px;
height: 90px;
background-color: white;
position: absolute;
left: 28px;
top: 8px;
z-index: 1;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.sa-icon.sa-success.animate::after {
-webkit-animation: rotatePlaceholder 4.25s ease-in;
animation: rotatePlaceholder 4.25s ease-in;
}
.sa-icon.sa-success {
border-color: transparent\9;
}
.sa-icon.sa-success .sa-line.sa-tip {
-ms-transform: rotate(45deg) \9;
}
.sa-icon.sa-success .sa-line.sa-long {
-ms-transform: rotate(-45deg) \9;
}
.animateSuccessTip {
-webkit-animation: animateSuccessTip 0.75s;
animation: animateSuccessTip 0.75s;
}
.animateSuccessLong {
-webkit-animation: animateSuccessLong 0.75s;
animation: animateSuccessLong 0.75s;
}
#-webkit-keyframes animateSuccessLong {
0% {
width: 0;
right: 46px;
top: 54px;
}
65% {
width: 0;
right: 46px;
top: 54px;
}
84% {
width: 55px;
right: 0px;
top: 35px;
}
100% {
width: 47px;
right: 8px;
top: 38px;
}
}
#-webkit-keyframes animateSuccessTip {
0% {
width: 0;
left: 1px;
top: 19px;
}
54% {
width: 0;
left: 1px;
top: 19px;
}
70% {
width: 50px;
left: -8px;
top: 37px;
}
84% {
width: 17px;
left: 21px;
top: 48px;
}
100% {
width: 25px;
left: 14px;
top: 45px;
}
}
#keyframes animateSuccessTip {
0% {
width: 0;
left: 1px;
top: 19px;
}
54% {
width: 0;
left: 1px;
top: 19px;
}
70% {
width: 50px;
left: -8px;
top: 37px;
}
84% {
width: 17px;
left: 21px;
top: 48px;
}
100% {
width: 25px;
left: 14px;
top: 45px;
}
}
#keyframes animateSuccessLong {
0% {
width: 0;
right: 46px;
top: 54px;
}
65% {
width: 0;
right: 46px;
top: 54px;
}
84% {
width: 55px;
right: 0px;
top: 35px;
}
100% {
width: 47px;
right: 8px;
top: 38px;
}
}
.sa-icon.sa-success .sa-line {
height: 5px;
background-color: #4CAF50;
display: block;
border-radius: 2px;
position: absolute;
z-index: 2;
}
.sa-icon.sa-success .sa-line.sa-tip {
width: 25px;
left: 14px;
top: 46px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.sa-icon.sa-success .sa-line.sa-long {
width: 47px;
right: 8px;
top: 38px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#-webkit-keyframes rotatePlaceholder {
0% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
5% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
12% {
transform: rotate(-405deg);
-webkit-transform: rotate(-405deg);
}
100% {
transform: rotate(-405deg);
-webkit-transform: rotate(-405deg);
}
}
#keyframes rotatePlaceholder {
0% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
5% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
12% {
transform: rotate(-405deg);
-webkit-transform: rotate(-405deg);
}
100% {
transform: rotate(-405deg);
-webkit-transform: rotate(-405deg);
}
}
.loading {
border: 4px solid #3a3;
border-right: 4px solid #a5d7a7;
border-bottom: 4px solid #a5d7a7;
height: 80px;
width: 80px;
border-radius: 50%;
-webkit-animation: loading 1s infinite linear;
-moz-animation: loading 1s infinite linear;
-o-animation: loading 1s infinite linear;
animation: loading 1s infinite linear;
margin:22px auto;
}
#-webkit-keyframes loading {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes loading {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-o-keyframes loading {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
}
}
#keyframes loading {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.abgne-loading-20140104-2 {
position: relative;
height: 100px;
width: 100px;
}
.abgne-loading-20140104-2 .loading {
border: 6px solid #168;
border-right: 6px solid #fff;
border-bottom: 6px solid #fff;
height: 100%;
width: 100%;
border-radius: 50%;
-webkit-animation: loading 1s infinite linear;
-moz-animation: loading 1s infinite linear;
-ms-animation: loading 1s infinite linear;
-o-animation: loading 1s infinite linear;
animation: loading 1s infinite linear;
}
.abgne-loading-20140104-2 .word {
color: #168;
position: absolute;
top: 0;
left: 0;
display: inline-block;
text-align: center;
font-size: 72px;
line-height: 72px;
font-family: arial;
margin: 18px 0 0 20px;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Verificando Adblock</title>
<script src="https://www.stackexample.ml/js/ads.js"></script>
</head>
<body>
<div class="cont">
<span id="v">Verificando adblock</span>
<div id="carregando" class="loading"></div>
<img src="https://www.stackexample.ml/falhou.png" alt="Smiley face" height="90" width="90" id="on">
<div id="off" class="check_mark">
<div class="sa-icon sa-success animate">
<span class="sa-line sa-tip animateSuccessTip"></span>
<span class="sa-line sa-long animateSuccessLong"></span>
<div class="sa-placeholder"></div>
<div class="sa-fix"></div>
</div>
</div>
<button id="b" onclick="window.location.reload()">Já desativei, Continuar...</button>
</div>
</body>
</html>
If you are looking to maintain a counter, you can use Local Storage for the same.. for example,
Note: You won't be able to run this code here due to the restrictions by StackOverflow, as am using localStorage
You can see it in action here instead (keep refreshing the page for 3 times and you'll see) - https://codepen.io/anon/pen/qvaYQK
Here, am initializing the counter of adcounter with 1 if not found, if found, I just increment it if the ads are blocked, if it crosses 3, I just show the modal to the user. If user disables the adblock, I reset the counter back to 0.
I've also refactored your code a bit, there is a massive chunk of code which can still be refactored.
window.onload = function a() {
var div1 = document.getElementById("off");
var div2 = document.getElementById("on");
var div3 = document.getElementById("carregando");
var span = document.getElementById("v");
var b = document.getElementById("b");
var url = new URL(window.location);
var r = url.searchParams.get("r");
var enc1 = window.atob(r);
var getWrapper = document.getElementById('ad-blocker-modal');
var showModalAfterVisits = 3; //show modal after 3 visits
var getCounter = localStorage.getItem('adcounter');
if(!getCounter) {
localStorage.setItem('adcounter', 0); // initialize Local Storage
}
function checkForAdBlocker() {
if (!window.canRunAds) {
if(getCounter < 3) {
//keep incrementing the counter unless the counter reaches 3 and return
localStorage.setItem('adcounter', ++getCounter);
return;
}
getWrapper.classList.remove('hide');
div2.style.display = "block"
div3.style.display = "none"
b.style.display = "block"
span.style.color = "#d06079"
span.innerHTML = "Desative o Adblock"
} else {
localStorage.setItem('adcounter', 0); //reset if adblock is disabled
div1.style.display = "block"
div3.style.display = "none"
span.innerHTML = "Adblock desativado"
}
}
checkForAdBlocker();
};
.cont {
width: 320px;
margin: 18% auto;
}
.hide {
display: none;
}
#ad-blocker-modal {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
}
#b {
border: 1px solid #ba5269;
background-color: #d06079;
color: white;
border-radius: 6px;
padding: 15px;
font-size: 18px;
display: none;
margin: 25px auto;
}
#on {
display: none;
margin: 22px auto;
}
.check_mark {
width: 80px;
height: 130px;
margin: 0 auto;
display: none;
}
#v {
font-family: arial;
font-size: 35px;
color: green;
display: block;
text-align: center;
}
button {
cursor: pointer;
margin-left: 15px;
}
.hide {
display: none;
}
.sa-icon {
width: 80px;
height: 80px;
border: 4px solid gray;
border-radius: 40px;
border-radius: 50%;
margin: 20px auto;
padding: 0;
position: relative;
box-sizing: content-box;
}
.sa-icon.sa-success {
border-color: #4CAF50;
}
.sa-icon.sa-success::before,
.sa-icon.sa-success::after {
content: '';
border-radius: 40px;
border-radius: 50%;
position: absolute;
width: 60px;
height: 120px;
background: white;
transform: rotate(45deg);
}
.sa-icon.sa-success::before {
border-radius: 120px 0 0 120px;
top: -7px;
left: -33px;
transform: rotate(-45deg);
transform-origin: 60px 60px;
}
.sa-icon.sa-success::after {
border-radius: 0 120px 120px 0;
top: -11px;
left: 30px;
transform: rotate(-45deg);
transform-origin: 0px 60px;
}
.sa-icon.sa-success .sa-placeholder {
width: 80px;
height: 80px;
border: 4px solid rgba(76, 175, 80, .5);
border-radius: 40px;
border-radius: 50%;
box-sizing: content-box;
position: absolute;
left: -4px;
top: -4px;
z-index: 2;
}
.sa-icon.sa-success .sa-fix {
width: 5px;
height: 90px;
background-color: white;
position: absolute;
left: 28px;
top: 8px;
z-index: 1;
transform: rotate(-45deg);
}
.sa-icon.sa-success.animate::after {
animation: rotatePlaceholder 4.25s ease-in;
}
.animateSuccessTip {
animation: animateSuccessTip 0.75s;
}
.animateSuccessLong {
animation: animateSuccessLong 0.75s;
}
#keyframes animateSuccessTip {
0% {
width: 0;
left: 1px;
top: 19px;
}
54% {
width: 0;
left: 1px;
top: 19px;
}
70% {
width: 50px;
left: -8px;
top: 37px;
}
84% {
width: 17px;
left: 21px;
top: 48px;
}
100% {
width: 25px;
left: 14px;
top: 45px;
}
}
#keyframes animateSuccessLong {
0% {
width: 0;
right: 46px;
top: 54px;
}
65% {
width: 0;
right: 46px;
top: 54px;
}
84% {
width: 55px;
right: 0px;
top: 35px;
}
100% {
width: 47px;
right: 8px;
top: 38px;
}
}
.sa-icon.sa-success .sa-line {
height: 5px;
background-color: #4CAF50;
display: block;
border-radius: 2px;
position: absolute;
z-index: 2;
}
.sa-icon.sa-success .sa-line.sa-tip {
width: 25px;
left: 14px;
top: 46px;
transform: rotate(45deg);
}
.sa-icon.sa-success .sa-line.sa-long {
width: 47px;
right: 8px;
top: 38px;
transform: rotate(-45deg);
}
#keyframes rotatePlaceholder {
0% {
transform: rotate(-45deg);
}
5% {
transform: rotate(-45deg);
}
12% {
transform: rotate(-405deg);
}
100% {
transform: rotate(-405deg);
}
}
.loading {
border: 4px solid #3a3;
border-right-color: a5d7a7;
border-bottom-color: #a5d7a7;
height: 80px;
width: 80px;
border-radius: 50%;
animation: loading 1s infinite linear;
margin: 22px auto;
}
#keyframes loading {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.abgne-loading-20140104-2 {
position: relative;
height: 100px;
width: 100px;
}
.abgne-loading-20140104-2 .loading {
border: 6px solid #168;
border-right-color: #fff;
border-bottom: #fff;
height: 100%;
width: 100%;
border-radius: 50%;
animation: loading 1s infinite linear;
}
.abgne-loading-20140104-2 .word {
color: #168;
position: absolute;
top: 0;
left: 0;
display: inline-block;
text-align: center;
font-size: 72px;
line-height: 72px;
font-family: arial;
margin: 18px 0 0 20px;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Verificando Adblock</title>
<script src="https://www.stackexample.ml/js/ads.js"></script>
</head>
<body>
Some content on my Website
<div id="ad-blocker-modal" class="hide">
<div class="cont">
<span id="v">Verificando adblock</span>
<div id="carregando" class="loading"></div>
<img src="https://www.stackexample.ml/falhou.png" alt="Smiley face" height="90" width="90" id="on">
<div id="off" class="check_mark">
<div class="sa-icon sa-success animate">
<span class="sa-line sa-tip animateSuccessTip"></span>
<span class="sa-line sa-long animateSuccessLong"></span>
<div class="sa-placeholder"></div>
<div class="sa-fix"></div>
</div>
</div>
<button id="b" onclick="window.location.reload()">Já desativei, Continuar...</button>
</div>
</div>
</body>
</html>
Related
I'm using a code snippet from a website for a circular progress bar, but now I am stuck. I can't solve how to stop progress bar at particular point (let's say 73% or 90%). How can I achieve that?
const numb = document.querySelector(".numb");
let counter = 0;
setInterval(() => {
if (counter == 100) {
clearInterval();
} else {
counter += 1;
numb.textContent = counter + "%";
}
}, 80);
.circular {
height: 150px;
width: 150px;
position: relative;
}
.circular .inner,
.circular .outer,
.circular .circle {
position: absolute;
z-index: 6;
height: 100%;
width: 100%;
border-radius: 100%;
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2);
}
.circular .inner {
top: 36%;
left: 37%;
height: 117px;
width: 117px;
margin: -40px 0 0 -40px;
background-color: #ffffff;
border-radius: 100%;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
.circular .circle {
z-index: 1;
box-shadow: none;
}
.circular .numb {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
font-size: 18px;
font-weight: 500;
color: #4158d0;
}
.circular .bar {
position: absolute;
height: 100%;
width: 100%;
background: #F2F5F5;
-webkit-border-radius: 100%;
clip: rect(0px, 150px, 150px, 75px);
}
.circle .bar .progress {
position: absolute;
height: 100%;
width: 100%;
-webkit-border-radius: 100%;
clip: rect(0px, 75px, 150px, 0px);
}
.circle .bar .progress,
.dot span {
background: #4158d0;
}
.circle .left .progress {
z-index: 1;
animation: left 4s linear both;
}
#keyframes left {
100% {
transform: rotate(180deg);
}
}
.circle .right {
z-index: 3;
transform: rotate(180deg);
}
.circle .right .progress {
animation: right 4s linear both;
animation-delay: 4s;
}
#keyframes right {
100% {
transform: rotate(180deg);
}
}
.circle .dot {
z-index: 2;
position: absolute;
left: 50%;
top: 50%;
width: 50%;
height: 10px;
margin-top: -5px;
animation: dot 8s linear both;
transform-origin: 0% 50%;
}
.circle .dot span {
position: absolute;
right: 0;
width: 16px;
height: 16px;
border-radius: 100%;
}
#keyframes dot {
0% {
transform: rotate(-90deg);
}
50% {
transform: rotate(90deg);
z-index: 4;
}
100% {
transform: rotate(270deg);
z-index: 4;
}
}
<div class="circular">
<div class="inner"></div>
<div class="outer"></div>
<div class="numb">
0%
</div>
<div class="circle">
<div class="dot">
<span></span>
</div>
<div class="bar left">
<div class="progress"></div>
</div>
<div class="bar right">
<div class="progress"></div>
</div>
</div>
</div>
Maybe you could say if(counter == 73) { animation.pause() }
const numb = document.querySelector(".numb");
let counter = 0;
setInterval(()=>{
if(counter == 73){
clearInterval();
}else{
counter+=1;
numb.textContent = counter + "%";
}
}, 80);
.circular{
height: 150px;
width: 150px;
position: relative;
}
.circular .inner, .circular .outer, .circular .circle{
position: absolute;
z-index: 6;
height: 100%;
width: 100%;
border-radius: 100%;
box-shadow: inset 0 1px 0 rgba(0,0,0,0.2);
}
.circular .inner{
top: 36%;
left: 37%;
height: 117px;
width: 117px;
margin: -40px 0 0 -40px;
background-color: #ffffff;
border-radius: 100%;
box-shadow: 0 1px 0 rgba(0,0,0,0.2);
}
.circular .circle{
z-index: 1;
box-shadow: none;
}
.circular .numb{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
font-size: 18px;
font-weight: 500;
color: #4158d0;
}
.circular .bar{
position: absolute;
height: 100%;
width: 100%;
background: #F2F5F5;
-webkit-border-radius: 100%;
clip: rect(0px, 150px, 150px, 75px);
}
.circle .bar .progress{
position: absolute;
height: 100%;
width: 100%;
-webkit-border-radius: 100%;
clip: rect(0px, 75px, 150px, 0px);
}
.circle .bar .progress, .dot span{
background: #4158d0;
}
.circle .left .progress{
z-index: 1;
animation: left 4s linear both;
}
#keyframes left {
100%{
transform: rotate(180deg);
}
}
.circle .right{
z-index: 3;
transform: rotate(180deg);
}
.circle .right .progress{
animation: right 4s linear both;
animation-delay: 4s;
}
#keyframes right {
100%{
transform: rotate(80deg);
}
}
.circle .dot{
position: absolute;
left: 50%;
top: 50%;
width: 50%;
height: 10px;
margin-top: -5px;
animation: dot 8s linear both;
transform-origin: 0% 50%;
}
.circle .dot span {
position: absolute;
right: 0;
width: 16px;
height: 16px;
border-radius: 100%;
}
#keyframes dot{
0% {
transform: rotate(-90deg);
}
50% {
transform: rotate(90deg);
z-index: 4;
}
100% {
transform: rotate(270deg);
z-index: 4;
}
}
<div class="circular">
<div class="inner"></div>
<div class="outer"></div>
<div class="numb">
0%
</div>
<div class="circle">
<div class="bar left">
<div class="progress"></div>
</div>
<div class="bar right">
<div class="progress"></div>
</div>
</div>
</div>
Goal: finished product as picture attached with only the bubbles rising inside the glass.
Hey, I am working on this CSS /JS code and I need the final version of filled glass only with bubbles and foam on top (ignoring all the delays and fillings in animations). I tried but somehow unsuccessful, any suggestions where to edit the code? thanks
$(document).ready(function() {
$('.pour')
.delay(2000)
.animate({
height: '360px'
}, 1500)
.delay(1600)
.slideUp(500);
$('#liquid')
.delay(3400)
.animate({
height: '170px'
}, 2500);
$('.beer-foam')
.delay(3400)
.animate({
bottom: '200px'
}, 2500);
});
body { background-color: #0065bd }
h2 {
margin: 0 auto;
width: 400px;
font-size: 36px;
text-align: center;
font-family: 'Lato', Arial, sans-serif;
color: whiteSmoke;
}
#container {
height: 370px;
margin: 0 auto;
overflow: hidden;
position: relative;
top: -20px;
width: 248px;
}
#container div { position: absolute; }
.pour {
position: absolute;
left: 45%;
width: 20px;
height: 0px;
background-color: #0065bd;
border-radius: 10px
}
#beaker {
border: 10px solid #FFF;
border-top: 0;
border-radius: 0 0 30px 30px;
height: 200px;
left: 14px;
bottom: 0;
width: 200px;
}
#beaker:before,
#beaker:after {
border: 00px solid #FFF;
border-bottom: 0;
border-radius: 30px 30px 0 0;
content: '';
height: 30px;
position: absolute;
top: -40px;
width: 30px;
}
#beaker:before { left: -50px; }
#beaker:after { right: -50px; }
#liquid {
background-color: #0065bd;
border: 10px solid #0065bd;
border-radius: 0 0 20px 20px;
bottom: 0;
height: 0px;
overflow: hidden;
width: 180px;
}
#liquid:after {
background-color: rgba(255, 255, 255, 0.25);
bottom: -10px;
content: '';
height: 200px;
left: -40px;
position: absolute;
transform: rotate(30deg);
-webkit-transform: rotate(15deg);
width: 110px;
}
#liquid .bubble {
-webkit-animation-name: bubble;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
background-color: rgba(255, 255, 255, 0.2);
bottom: 0;
border-radius: 10px;
height: 20px;
width: 20px;
}
#-webkit-keyframes bubble {
0% { bottom: 0; }
50% {
background-color: rgba(255, 255, 255, 0.2);
bottom: 80px;
}
100% {
background-color: rgba(255, 255, 255, 0);
bottom: 160px;
}
}
.bubble1 {
left: 10px;
-webkit-animation-delay: 1000ms;
-webkit-animation-duration: 1000ms;
}
.bubble2 {
left: 50px;
-webkit-animation-delay: 700ms;
-webkit-animation-duration: 1100ms;
}
.bubble3 {
left: 100px;
-webkit-animation-delay: 1200ms;
-webkit-animation-duration: 1300ms;
}
.bubble4 {
left: 130px;
-webkit-animation-delay: 1100ms;
-webkit-animation-duration: 700ms;
}
.bubble5 {
left: 170px;
-webkit-animation-delay: 1300ms;
-webkit-animation-duration: 800ms;
}
/* Foam */
.beer-foam {
position: absolute;
bottom: 10px;
}
.foam-1, .foam-2, .foam-3, .foam-4,
.foam-5, .foam-6, .foam-7 {
float: left;
position: absolute;
z-index: 999;
width: 50px;
height: 50px;
border-radius: 30px;
background-color: #fefefe;
}
.foam-1 {
top: -30px;
left: -10px;
}
.foam-2 {
top: -35px;
left: 20px;
}
.foam-3 {
top: -25px;
left: 50px;
}
.foam-4 {
top: -35px;
left: 80px;
}
.foam-5 {
top: -30px;
left: 110px;
}
.foam-6 {
top: -20px;
left: 140px;
}
.foam-7 {
top: -30px;
left: 160px;
}
/* Drunk Text */
#-moz-keyframes drunk {
0% {
-moz-transform: rotate(0);
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out;
}
20%, 60% {
-moz-transform: rotate(80deg);
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out;
}
40% {
-moz-transform: rotate(60deg);
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out;
}
80% {
-moz-transform: rotate(60deg) translateY(0); opacity: 1;
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out;
}
100% {
-moz-transform: translateY(700px);
opacity: 0;
}
}
#keyframes drunk {
0% {
transform: rotate(0);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
20%, 60% {
transform: rotate(80deg);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
40% {
transform: rotate(60deg);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
80% {
transform: rotate(60deg) translateY(0);
opacity: 1; transform-origin: top left;
animation-timing-function: ease-in-out;
}
100% {
transform: translateY(700px);
opacity: 0;
}
}
.drunk {
-webkit-animation-name: drunk;
-moz-animation-name: drunk;
animation-name: drunk;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="pour"></div>
<div id="beaker">
<div class="beer-foam">
<div class="foam-1"></div>
<div class="foam-2"></div>
<div class="foam-3"></div>
<div class="foam-4"></div>
<div class="foam-5"></div>
<div class="foam-6"></div>
<div class="foam-7"></div>
</div>
<div id="liquid">
<div class="bubble bubble1"></div>
<div class="bubble bubble2"></div>
<div class="bubble bubble3"></div>
<div class="bubble bubble4"></div>
<div class="bubble bubble5"></div>
</div>
</div>
</div>
<h2 class="animated drunk">Please Wait! While you are entered in Game</h2>
Filling the glass instantly, but bubbles moving
To instantly fill the glass, you can remove the delay:
$(document).ready(function() {
/*Look here*/
$('.pour')
.css({
height: '360px'
})
.delay(0)
.slideUp(500);
$('#liquid')
.css({
height: '170px'
});
$('.beer-foam')
.css({
bottom: '200px'
});
});
body { background-color: #0065bd }
h2 {
margin: 0 auto;
width: 400px;
font-size: 36px;
text-align: center;
font-family: 'Lato', Arial, sans-serif;
color: whiteSmoke;
}
#container {
height: 370px;
margin: 0 auto;
overflow: hidden;
position: relative;
top: -20px;
width: 248px;
}
#container div { position: absolute; }
.pour {
position: absolute;
left: 45%;
width: 20px;
height: 0px;
background-color: #0065bd;
border-radius: 10px
}
#beaker {
border: 10px solid #FFF;
border-top: 0;
border-radius: 0 0 30px 30px;
height: 200px;
left: 14px;
bottom: 0;
width: 200px;
}
#beaker:before,
#beaker:after {
border: 00px solid #FFF;
border-bottom: 0;
border-radius: 30px 30px 0 0;
content: '';
height: 30px;
position: absolute;
top: -40px;
width: 30px;
}
#beaker:before { left: -50px; }
#beaker:after { right: -50px; }
#liquid {
background-color: #0065bd;
border: 10px solid #0065bd;
border-radius: 0 0 20px 20px;
bottom: 0;
height: 0px;
overflow: hidden;
width: 180px;
}
#liquid:after {
background-color: rgba(255, 255, 255, 0.25);
bottom: -10px;
content: '';
height: 200px;
left: -40px;
position: absolute;
transform: rotate(30deg);
-webkit-transform: rotate(15deg);
width: 110px;
}
#liquid .bubble {
-webkit-animation-name: bubble;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
background-color: rgba(255, 255, 255, 0.2);
bottom: 0;
border-radius: 10px;
height: 20px;
width: 20px;
}
#-webkit-keyframes bubble {
0% { bottom: 0; }
50% {
background-color: rgba(255, 255, 255, 0.2);
bottom: 80px;
}
100% {
background-color: rgba(255, 255, 255, 0);
bottom: 160px;
}
}
.bubble1 {
left: 10px;
-webkit-animation-delay: 1000ms;
-webkit-animation-duration: 1000ms;
}
.bubble2 {
left: 50px;
-webkit-animation-delay: 700ms;
-webkit-animation-duration: 1100ms;
}
.bubble3 {
left: 100px;
-webkit-animation-delay: 1200ms;
-webkit-animation-duration: 1300ms;
}
.bubble4 {
left: 130px;
-webkit-animation-delay: 1100ms;
-webkit-animation-duration: 700ms;
}
.bubble5 {
left: 170px;
-webkit-animation-delay: 1300ms;
-webkit-animation-duration: 800ms;
}
/* Foam */
.beer-foam {
position: absolute;
bottom: 10px;
}
.foam-1, .foam-2, .foam-3, .foam-4,
.foam-5, .foam-6, .foam-7 {
float: left;
position: absolute;
z-index: 999;
width: 50px;
height: 50px;
border-radius: 30px;
background-color: #fefefe;
}
.foam-1 {
top: -30px;
left: -10px;
}
.foam-2 {
top: -35px;
left: 20px;
}
.foam-3 {
top: -25px;
left: 50px;
}
.foam-4 {
top: -35px;
left: 80px;
}
.foam-5 {
top: -30px;
left: 110px;
}
.foam-6 {
top: -20px;
left: 140px;
}
.foam-7 {
top: -30px;
left: 160px;
}
/* Drunk Text */
#-moz-keyframes drunk {
0% {
-moz-transform: rotate(0);
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out;
}
20%, 60% {
-moz-transform: rotate(80deg);
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out;
}
40% {
-moz-transform: rotate(60deg);
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out;
}
80% {
-moz-transform: rotate(60deg) translateY(0); opacity: 1;
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out;
}
100% {
-moz-transform: translateY(700px);
opacity: 0;
}
}
#keyframes drunk {
0% {
transform: rotate(0);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
20%, 60% {
transform: rotate(80deg);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
40% {
transform: rotate(60deg);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
80% {
transform: rotate(60deg) translateY(0);
opacity: 1; transform-origin: top left;
animation-timing-function: ease-in-out;
}
100% {
tran
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="pour"></div>
<div id="beaker">
<div class="beer-foam">
<div class="foam-1"></div>
<div class="foam-2"></div>
<div class="foam-3"></div>
<div class="foam-4"></div>
<div class="foam-5"></div>
<div class="foam-6"></div>
<div class="foam-7"></div>
</div>
<div id="liquid">
<div class="bubble bubble1"></div>
<div class="bubble bubble2"></div>
<div class="bubble bubble3"></div>
<div class="bubble bubble4"></div>
<div class="bubble bubble5"></div>
</div>
</div>
</div>
<h2 class="animated drunk">Please Wait! While you are entered in Game</h2>
Pausing the bubbles
To pause the bubbles, you can use the animation-play-state: paused; property. This particular way would pause your bubbles after 5.7 seconds:
$(document).ready(function() {
/*Look here*/
setTimeout( () => {
$('.bubble').css("animation-play-state", "paused");
}, 5700)
$('.pour')
.delay(2000)
.animate({
height: '360px'
}, 1500)
.delay(1600)
.slideUp(500);
$('#liquid')
.delay(3400)
.animate({
height: '170px'
}, 2500);
$('.beer-foam')
.delay(3400)
.animate({
bottom: '200px'
}, 2500);
});
body { background-color: #0065bd }
h2 {
margin: 0 auto;
width: 400px;
font-size: 36px;
text-align: center;
font-family: 'Lato', Arial, sans-serif;
color: whiteSmoke;
}
#container {
height: 370px;
margin: 0 auto;
overflow: hidden;
position: relative;
top: -20px;
width: 248px;
}
#container div { position: absolute; }
.pour {
position: absolute;
left: 45%;
width: 20px;
height: 0px;
background-color: #0065bd;
border-radius: 10px
}
#beaker {
border: 10px solid #FFF;
border-top: 0;
border-radius: 0 0 30px 30px;
height: 200px;
left: 14px;
bottom: 0;
width: 200px;
}
#beaker:before,
#beaker:after {
border: 00px solid #FFF;
border-bottom: 0;
border-radius: 30px 30px 0 0;
content: '';
height: 30px;
position: absolute;
top: -40px;
width: 30px;
}
#beaker:before { left: -50px; }
#beaker:after { right: -50px; }
#liquid {
background-color: #0065bd;
border: 10px solid #0065bd;
border-radius: 0 0 20px 20px;
bottom: 0;
height: 0px;
overflow: hidden;
width: 180px;
}
#liquid:after {
background-color: rgba(255, 255, 255, 0.25);
bottom: -10px;
content: '';
height: 200px;
left: -40px;
position: absolute;
transform: rotate(30deg);
-webkit-transform: rotate(15deg);
width: 110px;
}
#liquid .bubble {
-webkit-animation-name: bubble;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
background-color: rgba(255, 255, 255, 0.2);
bottom: 0;
border-radius: 10px;
height: 20px;
width: 20px;
}
#-webkit-keyframes bubble {
0% { bottom: 0; }
50% {
background-color: rgba(255, 255, 255, 0.2);
bottom: 80px;
}
100% {
background-color: rgba(255, 255, 255, 0);
bottom: 160px;
}
}
.bubble1 {
left: 10px;
-webkit-animation-delay: 1000ms;
-webkit-animation-duration: 1000ms;
}
.bubble2 {
left: 50px;
-webkit-animation-delay: 700ms;
-webkit-animation-duration: 1100ms;
}
.bubble3 {
left: 100px;
-webkit-animation-delay: 1200ms;
-webkit-animation-duration: 1300ms;
}
.bubble4 {
left: 130px;
-webkit-animation-delay: 1100ms;
-webkit-animation-duration: 700ms;
}
.bubble5 {
left: 170px;
-webkit-animation-delay: 1300ms;
-webkit-animation-duration: 800ms;
}
/* Foam */
.beer-foam {
position: absolute;
bottom: 10px;
}
.foam-1, .foam-2, .foam-3, .foam-4,
.foam-5, .foam-6, .foam-7 {
float: left;
position: absolute;
z-index: 999;
width: 50px;
height: 50px;
border-radius: 30px;
background-color: #fefefe;
}
.foam-1 {
top: -30px;
left: -10px;
}
.foam-2 {
top: -35px;
left: 20px;
}
.foam-3 {
top: -25px;
left: 50px;
}
.foam-4 {
top: -35px;
left: 80px;
}
.foam-5 {
top: -30px;
left: 110px;
}
.foam-6 {
top: -20px;
left: 140px;
}
.foam-7 {
top: -30px;
left: 160px;
}
/* Drunk Text */
#-moz-keyframes drunk {
0% {
-moz-transform: rotate(0);
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out;
}
20%, 60% {
-moz-transform: rotate(80deg);
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out;
}
40% {
-moz-transform: rotate(60deg);
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out;
}
80% {
-moz-transform: rotate(60deg) translateY(0); opacity: 1;
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out;
}
100% {
-moz-transform: translateY(700px);
opacity: 0;
}
}
#keyframes drunk {
0% {
transform: rotate(0);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
20%, 60% {
transform: rotate(80deg);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
40% {
transform: rotate(60deg);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
80% {
transform: rotate(60deg) translateY(0);
opacity: 1; transform-origin: top left;
animation-timing-function: ease-in-out;
}
100% {
tran
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="pour"></div>
<div id="beaker">
<div class="beer-foam">
<div class="foam-1"></div>
<div class="foam-2"></div>
<div class="foam-3"></div>
<div class="foam-4"></div>
<div class="foam-5"></div>
<div class="foam-6"></div>
<div class="foam-7"></div>
</div>
<div id="liquid">
<div class="bubble bubble1"></div>
<div class="bubble bubble2"></div>
<div class="bubble bubble3"></div>
<div class="bubble bubble4"></div>
<div class="bubble bubble5"></div>
</div>
</div>
</div>
<h2 class="animated drunk">Please Wait! While you are entered in Game</h2>
If you setthe timeout to 5700, you'll end up with something like this, which is pretty close to your image.
Stopping the bubbles (previous solution)
You could also fiddle with the iteration count and visibility of your bubbles, to kill them after some time, maybe like so:
#liquid .bubble {
visibility: hidden; /*Look here*/
-webkit-animation-name: bubble;
-webkit-animation-iteration-count: 3; /*Look here*/
-webkit-animation-timing-function: linear;
background-color: rgba(255, 255, 255, 0.2);
bottom: 0;
border-radius: 10px;
height: 20px;
width: 20px;
}
#-webkit-keyframes bubble {
0% { visibility: visible; /*Look here*/
bottom: 0; }
50% {
background-color: rgba(255, 255, 255, 0.2);
bottom: 80px;
}
100% {
background-color: rgba(255, 255, 255, 0);
bottom: 160px;
}
}
The numbers depend on the exact effect you'll want, but this would be the way I'd do it. This particular set would send some bubbles and then end the bubbling.
I have a small circle on top of which is a "+" button. When clicked, a circle shows up (a dotted one) and the data from my database is shown along its circumference.
Now I want another concentric circle outside of this, and it should also show on the button click, along with the first circle.
function toggleDiv(divId){
$("#"+divId).toggle();
}
.post-share{
display: block;
width: 74px;
height: 34px;
margin: 40px 0px 0px 0px;
background: #3e599a;
text-decoration: none;
width: 110px;
font: 12px;
color: #FFFFFF;
position: relative;
position:fixed;
top: 40%;
left: 50%;
z-index:99;
text-align: center;
vertical-align: middle;
}
.post-share span{
width: 15px;
height: 18px;
padding: 3px;
display: block;
position: absolute;
top: -24px;
right: 0;
background-color: #080563;
color: #FFFFFF;
font-weight: bold;
vertical-align: middle;
font: 10px"Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
text-align: center;
text-indent: 0;
}
.social-buttons-text {
font-size: 4px;
color: #FFFFFF;
float: left;
margin: 0px;
padding: 0px;
text-align: left;
}
.sphere{
height: 80px;
width:80px;
border-radius: 50%;
}
/* for circle */
* {
padding: 0px;
margin: 0px;
transition: 1s;
}
html {
background-color: hsla(190, 60%, 50%,1);
overflow: hidden;
}
#wrapper {
margin: 200px auto;
height: 200px;
width: 600px;
}
.bubble {
border-radius: 100%;
height: 40px;
width: 40px;
display: inline-block;
margin: 0px 15px 0px 15px;
}
.animate {
animation: scaleWobble 2s infinite alternate ease;
}
#red {
background-color: hsla(350, 50%, 50%, 1);
}
#yellow {
background-color: hsla(70, 50%, 50%, 1);
}
#green {
background-color: hsla(120, 70%, 40%, 1);
}
#keyframes scaleWobble {
from {
height: 100px;
width: 100px;
}
to {
height: 125px;
width: 125px;
}
}
/**
* Position icons into circle (SO)
* http://stackoverflow.com/q/12813573/1397351
*/
.circle-container {
position: relative;
width: 24em;
height: 24em;
padding: 2.8em; /*= 2em * 1.4 (2em = half the width of an img, 1.4 = sqrt(2))*/
border-radius: 50%;
margin: 1.75em auto 0;
}
.circle-container a {
position: absolute;
top: 50%;
left: 50%;
width: 4em;
height: 4em;
margin: -2em;
}
.circle-container img { display: block; width: 100%; }
.deg0 { transform: translate(12em); } /* 12em = half the width of the wrapper */
.deg15 { transform: rotate(15deg) translate(12em) rotate(-15deg); }
.deg30 { transform: rotate(30deg) translate(12em) rotate(-30deg); }
.deg45 { transform: rotate(45deg) translate(12em) rotate(-45deg); }
.deg60 { transform: rotate(60deg) translate(12em) rotate(-60deg); }
.deg75 { transform: rotate(75deg) translate(12em) rotate(-75deg); }
.deg90 { transform: rotate(90deg) translate(12em) rotate(-90deg); }
.deg105 { transform: rotate(105deg) translate(12em) rotate(-105deg); }
.deg120 { transform: rotate(120deg) translate(12em) rotate(-120deg); }
.deg135 { transform: rotate(135deg) translate(12em) rotate(-135deg); }
.deg150 { transform: rotate(150deg) translate(12em) rotate(-150deg); }
.deg165 { transform: rotate(165deg) translate(12em) rotate(-165deg); }
.deg180 { transform: translate(-12em); }
.deg195 { transform: rotate(195deg) translate(12em) rotate(-195deg); }
.deg210 { transform: rotate(210deg) translate(12em) rotate(-210deg); }
.deg225 { transform: rotate(225deg) translate(12em) rotate(-225deg); }
.deg240 { transform: rotate(240deg) translate(12em) rotate(-240deg); }
.deg255 { transform: rotate(255deg) translate(12em) rotate(-255deg); }
.deg270 { transform: rotate(270deg) translate(12em) rotate(-270deg); }
.deg285 { transform: rotate(285deg) translate(12em) rotate(-285deg); }
.deg300{ transform: rotate(300deg) translate(12em) rotate(-300deg); }
/* this is just for showing the angle on hover */
.circle-container a:not(.center)::before {
position: absolute;
width: 7em;
color: white;
opacity: 0;
}
.circle-container a:hover:before { opacity: 1; }
/* this is for showing the circle on which the images are placed */
.circle-container:after {
position: absolute;
top: 2.8em; left: 2.8em;
width: 24em; height: 24em;
border: dashed 1px deeppink;
border-radius: 50%;
opacity: .3;
pointer-events: none;
content: '';
}
.circle-container:hover:after{
opacity: 1;
}
.circle-container a:not(.center)::after {
position: absolute;
left: 50%;
box-shadow: 0 0 .5em .5em white;
margin: -2px;
background: #fffea1;
content: attr(myattri);
}
.circle-container:hover a:after { opacity: 1; }
.circle-container a:hover:after { opacity: .3; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="post-share sphere yellow" id="name">erwerew
<span>+</span>
</span>
<div id="myContent" class='circle-container' style="display:none">
</div>
This may not be 100% the answer you are looking for, but it seems whatever you are doing, you may be making it more complicated then it needs to be.
You can create these circles by using a div with a border-radius:50%;
See this example which i think is acheving what you want with a lot less code.
JsFiddle Demo: https://jsfiddle.net/yfpnbf4z/3/
$("#circleToggle").click(function() {
$("#circle1").fadeToggle("slow");
$("#circle2").fadeToggle("slow");
if ($("#circle1").is(":hidden")) {
$("#circleToggle").html("+");
} else {
$("#circleToggle").html("-");
}
});
.container {
background: #333;
position: relative;
height: 500px;
width: 500px;
}
.button {
position: absolute;
left: 230px;
top: 5px;
width: 40px;
height: 40px;
line-height: 40px;
font-size: 20px;
background: #fff;
display: inline-block;
border-radius: 50%;
text-align: center;
}
.circle {
border-radius: 50%;
border: 1px dashed red;
display: none;
}
#circle1 {
position: absolute;
top: 150px;
left: 150px;
height: 200px;
width: 200px;
line-height: 200px;
text-align: center;
color: #fff;
}
#circle2 {
position: absolute;
top: 50px;
left: 50px;
height: 400px;
width: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">
<div class="button" id="circleToggle">+</div>
<div class="circle" id="circle1">Some data</div>
<div class="circle" id="circle2"></div>
</div>
I hope this is useful to you mate.
I created a CSS hexagon using 3 divs and border colors and sizes. I would like to animate that hexagon by flipping it on it's x-axis and getting a new css hexagon like my code, below.
That all works in CSS. But then I want the new div to scale to 2x after the flip.
The CSS transform property does everything at once so I'm trying to scale after that using jQuery animate. If possible I would be open to doing everything in jQuery.
* {
box-sizing: border-box;
}
.hexagons {
width: 1100px;
letter-spacing: 0;
font-size: 0;
margin: 0 auto;
}
.hexagon-holder {
position: relative;
margin: 0 21.5px;
width: 226px;
height: 130.48px;
display: inline-block;
letter-spacing: 0;
font-size: 0;
}
.hexagon {
position: relative;
width: 226px;
height: 130.48px;
background-image: url(http://csshexagon.com/img/meow.jpg);
background-size: auto 258.6529px;
background-position: center;
border-left: solid 1px #333333;
border-right: solid 1px #333333;
display: inline-block;
z-index: 1;
}
.hexagon .hexTop,
.hexagon .hexBottom {
position: absolute;
z-index: 1;
width: 159.81px;
height: 159.81px;
overflow: hidden;
-webkit-transform: scaleY(0.5774) rotate(-45deg);
-ms-transform: scaleY(0.5774) rotate(-45deg);
transform: scaleY(0.5774) rotate(-45deg);
background: inherit;
left: 32.10px;
-webkit-backface-visibility: hidden
}
/*counter transform the bg image on the caps*/
.hexagon .hexTop:after,
.hexagon .hexBottom:after {
content: "";
position: absolute;
width: 224.0000px;
height: 129.32646029847618px;
-webkit-transform: rotate(45deg) scaleY(1.7321) translateY(-64.6632px);
-ms-transform: rotate(45deg) scaleY(1.7321) translateY(-64.6632px);
transform: rotate(45deg) scaleY(1.7321) translateY(-64.6632px);
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
background: inherit;
}
.hexagon .hexTop {
top: -79.9031px;
border-top: solid 1.4142px #333333;
border-right: solid 1.4142px #333333;
}
.hexagon .hexTop:after {
background-position: center top;
}
.hexagon .hexBottom {
bottom: -79.9031px;
border-bottom: solid 1.4142px #333333;
border-left: solid 1.4142px #333333;
}
.hexagon .hexBottom:after {
background-position: center bottom;
}
.hexagon:after {
content: "";
position: absolute;
top: 0.5774px;
left: 0;
width: 224.0000px;
height: 129.3265px;
z-index: 2;
background: inherit;
}
.hexagon:nth-child(7n-2) {
margin-left: 156px;
}
.hexagon:nth-child(n+5) {
margin-top: 29px;
}
.hexText {
position: absolute;
left: 0;
top: 0;
z-index: 3;
color: #000;
opacity: 1;
font-size: 20px;
text-align: center;
width: 100%;
color: #fff;
}
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
transform-style: preserve-3d;
width: 226px;
height: 280.48px !important;
background: transparent;
}
/* UPDATED! flip the pane when hovered */
.flip-container:hover .back {
transform: rotateY(0deg);
}
.flip-container:hover .front {
transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
width: 226px;
height: auto;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
top: 75px;
}
/* hide back of pane during swap */
.front,
.back {
backface-visibility: hidden;
transition: 0.6s;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
}
/* UPDATED! front pane, placed above back */
.front {
z-index: 2;
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(-180deg);
}
/*
Some vertical flip updates
*/
.vertical.flip-container {
position: relative;
}
.vertical .back {
transform: rotateX(180deg);
}
.vertical.flip-container:hover .back {
transform: rotateX(0deg);
}
.vertical.flip-container:hover .front {
transform: rotateX(180deg);
}
.hexagon-overlay {
position: absolute;
width: 226px;
height: 130.48px;
margin: 0;
background-color: teal;
background-size: auto 247.1059px;
background-position: center;
border-left: solid 6px #333333;
border-right: solid 6px #333333;
opacity: .7;
z-index: 3;
top: 0;
left: 0;
}
.hexagon-overlay .hexTop,
.hexagon-overlay .hexBottom {
position: absolute;
z-index: 1;
width: 159.81px;
height: 159.81px;
overflow: hidden;
-webkit-transform: scaleY(0.5774) rotate(-45deg);
-ms-transform: scaleY(0.5774) rotate(-45deg);
transform: scaleY(0.5774) rotate(-45deg);
background: inherit;
left: 27.10px;
}
/*counter transform the bg image on the caps*/
.hexagon-overlay .hexTop:after,
.hexagon-overlay .hexBottom:after {
content: "";
position: absolute;
width: 214.0000px;
height: 123.55295760657991px;
-webkit-transform: rotate(45deg) scaleY(1.7321) translateY(-61.7765px);
-ms-transform: rotate(45deg) scaleY(1.7321) translateY(-61.7765px);
transform: rotate(45deg) scaleY(1.7321) translateY(-61.7765px);
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
background: inherit;
}
.hexagon-overlay .hexTop {
top: -79.9031px;
border-top: solid 8.4853px #333333;
border-right: solid 8.4853px #333333;
}
.hexagon-overlay .hexTop:after {
background-position: center top;
}
.hexagon-overlay .hexBottom {
bottom: -79.9031px;
border-bottom: solid 8.4853px #333333;
border-left: solid 8.4853px #333333;
}
.hexagon-overlay .hexBottom:after {
background-position: center bottom;
}
.hexagon-overlay .hexagon:after {
content: "";
position: absolute;
top: 3.4641px;
left: 0;
width: 214.0000px;
height: 123.5530px;
z-index: 2;
background: inherit;
}
<div class="hexagons">
<div class="hexagon-holder flip-container" ontouchstart="this.classList.toggle('hover');">>
<div class="flipper">
<div class="front">
<div class="hexagon">
<div class="hexTop"></div>
<div class="hexBottom"></div>
</div>
</div>
<div class="back">
<div class="hexagon-overlay">
<div class="hexTop"></div>
<div class="hexBottom"></div>
</div>
<div class="hexText">LifePoint Dental
<br />+</div>
<div class="hexagon" style="transform:scaleX(-1);">
<div class="hexTop"></div>
<div class="hexBottom"></div>
</div>
</div>
</div>
</div>
</div>
View on Codepen
I'm using Navigation using a plugin called Hamburgler and it works fantastic on desktop. However, on mobile, the navigation appears, but it can't be clicked.
The coding for the site I'm trying to edit is a bit janky, my apologies.
Navigation coding:
JS
<script type="text/javascript">
// HAMBURGLERv2
function togglescroll() {
$('body').on('touchstart', function(e) {
if ($('body').hasClass('noscroll')) {
e.preventDefault();
}
});
}
$(document).ready(function() {
togglescroll()
$(".icon").click(function() {
$(".mobilenav").fadeToggle(500);
$(".top-menu").toggleClass("top-animate");
$("body").toggleClass("noscroll");
$(".mid-menu").toggleClass("mid-animate");
$(".bottom-menu").toggleClass("bottom-animate");
});
});
// PUSH ESC KEY TO EXIT
$(document).keydown(function(e) {
if (e.keyCode == 27) {
$(".mobilenav").fadeOut(500);
$(".top-menu").removeClass("top-animate");
$("body").removeClass("noscroll");
$(".mid-menu").removeClass("mid-animate");
$(".bottom-menu").removeClass("bottom-animate");
}
});
</script>
HTML
<a href="javascript:void(0)" class="icon">
<div class="menui top-menu"></div>
<div class="menui mid-menu"></div>
<div class="menui bottom-menu"></div>
</a>
<div class="mobilenav">
<div class="insidenav">
2016 Salary Guide
2015 Salary Guide
2014 Salary Guide
</div>
</div>
CSS
#navigation {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 80px;
background-color: #fff;
z-index: 994;
}
.top-animate {
background: #e71630 !important;
top: 13px !important;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 999 !important;
}
.mid-animate {
opacity: 0;
z-index: 999 !important;
}
.bottom-animate {
background: #e71630 !important;
top: 13px !important;
-webkit-transform: rotate(-225deg);
transform: rotate(-225deg);
z-index: 999 !important;
}
.top-menu {
top: 5px;
width: 25px;
height: 2px;
border-radius: 10px;
background-color: #000;
z-index: 999 !important;
}
.mid-menu {
top: 13px;
width: 25px;
height: 2px;
border-radius: 10px;
background-color: #000;
z-index: 999 !important;
}
.bottom-menu {
top: 21px;
width: 25px;
height: 2px;
border-radius: 10px;
background-color: #000;
z-index: 999 !important;
}
.menui {
background: #000;
transition: 0.6s ease;
transition-timing-function: cubic-bezier(.75, 0, .29, 1.01);
margin-top: 10px;
position: absolute;
z-index: 999 !important;
}
.icon {
z-index: 999 !important;
display: block;
padding: 9px;
height: 32px;
width: 32px;
position: fixed;
right: 30px;
top: 15px;
}
.mobilenav {
font-family: inherit;
top: 0;
left: 0;
z-index: 995 !important;
display: none;
position: fixed;
width: 100%;
height: 100%;
background: #FFF;
opacity: 0.98;
}
.insidenav {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
width: 100%;
max-width: 300px;
}
a.inside {
z-index: 2147483647;
display: block;
width: 300px;
height: 70px;
background-color: #dd152e;
color: #FFF;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
text-align: center;
line-height: 70px;
text-transform: uppercase;
-webkit-transition: background .5s ease-in-out;
-moz-transition: background .5s ease-in-out;
-ms-transition: background .5s ease-in-out;
-o-transition: background .5s ease-in-out;
transition: background .5s ease-in-out;
margin-bottom: 50px;
text-decoration: none;
}
a.inside:hover {
background-color: #c21228;
}
Here's the site itself:
http://salaryguide.diamondbacklab.com
Sorry, I know it's a lot of code to look at. Any help would be super appreciated!
You need to remove these lines from JavaScript:
if ($('body').hasClass('noscroll')) {
e.preventDefault();
}
to make it work. Because preventDefault() also prevents standard browser behaviour.