Traffic light using css change by adding javascript to control the timer - javascript

**i found this code online which timer is controled in css.how do i control it with javascript.i have tried new ways but failed.anyone able to help me out.What im actually trying is to control the javascript function with button click,once the button is clicked then it should call the function to run the lights based on timer which i tried early using settimeout and by setinterval but i could make it.for example red 5 seconds,orange 3 seconds and green 10 seconds,onlick this function should run.
html {
background: linear-gradient(#08f, #fff);
padding: 40px;
width: 170px;
height: 100%;
margin: 0 auto;
}
.protector {
background: transparent;
width: 180px;
height: 0;
position: absolute;
top: 20px;
left: -35px;
border-right: solid 30px transparent;
border-left: solid 30px transparent;
border-top: solid 90px #111;
border-radius: 10px;
z-index: -1;
}
.protector:nth-child(2) {
top: 140px;
}
.protector:nth-child(3) {
top: 260px;
}
.trafficlight {
background: #222;
background-image: linear-gradient(transparent 2%, #111 2%, transparent 3%, #111 30%);
width: 170px;
height: 400px;
border-radius: 10px;
position: relative;
border: solid 5px #333;
}
.trafficlight:before {
background: #222;
background-image: radial-gradient(#444, #000);
content: "";
width: 170px;
height: 150px;
margin: 0 auto;
position: absolute;
top: -30px;
margin-left: 0px;
border-radius: 50%;
z-index: -1;
}
.trafficlight:after {
background: #222;
background-image: linear-gradient(-0deg, #444, #ccc 30%, #000);
content: "";
width: 75px;
height: 800px;
margin-left: 50px;
position: absolute;
top: 150px;
z-index: -1;
}
.red {
background: red;
background-image: radial-gradient(brown, transparent);
background-size: 5px 5px;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: 20px;
left: 35px;
animation: 15s red infinite;
box-shadow: 0 0 20px #111 inset, 0 0 10px red;
}
.yellow {
background: yellow;
background-image: radial-gradient(orange, transparent);
background-size: 5px 5px;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: 145px;
left: 35px;
animation: 13s yellow infinite;
box-shadow: 0 0 20px #111 inset, 0 0 10px yellow;
}
.green {
background: green;
background-image: radial-gradient(lime, transparent);
background-size: 5px 5px;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: 270px;
left: 35px;
box-shadow: 0 0 20px #111 inset, 0 0 10px lime;
animation: 13s green infinite;
}
#keyframes red {
0% {
opacity: 1;
}
20% {
opacity: 1;
}
40% {
opacity: 1;
}
60% {
opacity: .1;
}
80% {
opacity: .1;
}
100% {
opacity: .1;
}
}
#keyframes yellow {
0% {
opacity: .1;
}
20% {
opacity: .1;
}
40% {
opacity: 1;
}
50% {
opacity: .1;
}
60% {
opacity: .1;
}
80% {
opacity: .1;
}
100% {
opacity: .1;
}
}
#keyframes green {
0% {
opacity: .1;
}
20% {
opacity: .1;
}
40% {
opacity: .1;
}
60% {
opacity: 1;
}
80% {
opacity: 1;
}
85% {
opacity: .1;
}
90% {
opacity: 1;
}
95% {
opacity: .1;
}
100% {
opacity: 1;
}
}
<div class="trafficlight">
<div class="protector"></div>
<div class="protector"></div>
<div class="protector"></div>
<div class="red"></div>
<div class="yellow"></div>
<div class="green"></div>
</div>
**

$(".trafficlight").click(function(){
$(this).toggleClass("start")
})
html {
background: linear-gradient(#08f, #fff);
padding: 40px;
width: 170px;
height: 100%;
margin: 0 auto;
}
.protector {
background: transparent;
width: 180px;
height: 0;
position: absolute;
top: 20px;
left: -35px;
border-right: solid 30px transparent;
border-left: solid 30px transparent;
border-top: solid 90px #111;
border-radius: 10px;
z-index: -1;
}
.protector:nth-child(2) {
top: 140px;
}
.protector:nth-child(3) {
top: 260px;
}
.trafficlight {
background: #222;
background-image: linear-gradient(transparent 2%, #111 2%, transparent 3%, #111 30%);
width: 170px;
height: 400px;
border-radius: 10px;
position: relative;
border: solid 5px #333;
}
.trafficlight:before {
background: #222;
background-image: radial-gradient(#444, #000);
content: "";
width: 170px;
height: 150px;
margin: 0 auto;
position: absolute;
top: -30px;
margin-left: 0px;
border-radius: 50%;
z-index: -1;
}
.trafficlight:after {
background: #222;
background-image: linear-gradient(-0deg, #444, #ccc 30%, #000);
content: "";
width: 75px;
height: 800px;
margin-left: 50px;
position: absolute;
top: 150px;
z-index: -1;
}
.red {
background: red;
background-image: radial-gradient(brown, transparent);
background-size: 5px 5px;
width: 100px;
height: 100px;
border-radius: 50%;
opacity:0;
position: absolute;
top: 20px;
left: 35px;
box-shadow: 0 0 20px #111 inset, 0 0 10px red;
}
.start .red{
animation: 15s red infinite;
}
.start .yellow {
animation: 13s yellow infinite;
}
.start .green{
animation: 13s green infinite;
}
.yellow {
background: yellow;
background-image: radial-gradient(orange, transparent);
background-size: 5px 5px;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
opacity:0;
top: 145px;
left: 35px;
box-shadow: 0 0 20px #111 inset, 0 0 10px yellow;
}
.green {
background: green;
background-image: radial-gradient(lime, transparent);
background-size: 5px 5px;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: 270px;
opacity:0;
left: 35px;
box-shadow: 0 0 20px #111 inset, 0 0 10px lime;
}
#keyframes red {
0% {
opacity: 1;
}
20% {
opacity: 1;
}
40% {
opacity: 1;
}
60% {
opacity: .1;
}
80% {
opacity: .1;
}
100% {
opacity: .1;
}
}
#keyframes yellow {
0% {
opacity: .1;
}
20% {
opacity: .1;
}
40% {
opacity: 1;
}
50% {
opacity: .1;
}
60% {
opacity: .1;
}
80% {
opacity: .1;
}
100% {
opacity: .1;
}
}
#keyframes green {
0% {
opacity: .1;
}
20% {
opacity: .1;
}
40% {
opacity: .1;
}
60% {
opacity: 1;
}
80% {
opacity: 1;
}
85% {
opacity: .1;
}
90% {
opacity: 1;
}
95% {
opacity: .1;
}
100% {
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="trafficlight">
<div class="protector"></div>
<div class="protector"></div>
<div class="protector"></div>
<div class="red"></div>
<div class="yellow"></div>
<div class="green"></div>
</div>
i managed to make it work on click with jquery!

Related

How to display spin result after each spinning

I have this spinning code:
var spinCount = 0;
function myfunction() {
if (spinCount > 3) {
alert("No more Spins");
return false;
}
var x = 1024; //min value
var y = 9999; // max value
var deg = Math.floor(Math.random() * (x - y)) + y;
document.getElementById('box').style.transform = "rotate(" + deg + "deg)";
var element = document.getElementById('mainbox');
element.classList.remove('animate');
setTimeout(function() {
element.classList.add('animate');
}, 5000); //5000 = 5 second
spinCount++;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
outline: none;
}
body {
font-family: Open Sans;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
background: rgb(60, 60, 242);
background: linear-gradient(90deg, rgba(60, 60, 242, 1) 0%, rgba(98, 245, 230, 1) 52%, rgba(60, 60, 242, 1) 100%);
background-size: cover;
}
.mainbox {
position: relative;
width: 500px;
height: 500px;
}
.mainbox:after {
position: absolute;
content: '';
width: 32px;
height: 32px;
background: url('../img/arrow-wheel.png') no-repeat;
background-size: 32px;
right: -30px;
top: 50%;
transform: translateY(-50%);
}
.box {
width: 100%;
height: 100%;
position: relative;
border-radius: 50%;
border: 10px solid #fff;
overflow: hidden;
transition: all ease 5s;
}
span {
width: 50%;
height: 50%;
display: inline-block;
position: absolute;
}
.span1 {
clip-path: polygon(0 92%, 100% 50%, 0 8%);
background-color: #fffb00;
top: 120px;
left: 0;
}
.span2 {
clip-path: polygon(100% 92%, 0 50%, 100% 8%);
background-color: #ff4fa1;
top: 120px;
right: 0;
}
.span3 {
clip-path: polygon(50% 0%, 8% 100%, 92% 100%);
background-color: #ffaa00;
bottom: 0;
left: 120px;
}
.span4 {
clip-path: polygon(50% 100%, 92% 0, 8% 0);
background-color: #22ff00;
top: 0;
left: 120px;
}
.box1 .span3 b {
transform: translate(-50%, -50%) rotate(-270deg);
}
.box1 .span1 b,
.box2 .span1 b {
transform: translate(-50%, -50%) rotate(185deg);
}
.box2 .span3 b {
transform: translate(-50%, -50%) rotate(90deg);
}
.box1 .span4 b,
.box2 .span4 b {
transform: translate(-50%, -50%) rotate(-85deg);
}
.box2 {
width: 100%;
height: 100%;
transform: rotate(-135deg);
}
span b {
font-size: 24px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.spin {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 75px;
height: 75px;
border-radius: 50%;
border: 4px solid #fff;
background-color: #001aff;
color: #fff;
box-shadow: 0 5px 20px #000;
font-weight: bold;
font-size: 22px;
cursor: pointer;
}
.spin:active {
width: 70px;
height: 70px;
font-size: 20px;
}
.mainbox.animate:after {
animation: animateArrow 0.7s ease infinite;
}
#keyframes animateArrow {
50% {
right: -40px;
}
}
<div id="mainbox" class="mainbox">
<div id="box" class="box">
<div class="box1">
<span class="span1"><b>$10</b></span>
<span class="span2"><b>$20</b></span>
<span class="span3"><b>$30</b></span>
<span class="span4"><b>$40</b></span>
</div>
<div class="box2">
<span class="span1"><b>$50</b></span>
<span class="span2"><b>$60</b></span>
<span class="span3"><b>$70</b></span>
<span class="span4"><b>$80</b></span>
</div>
</div>
<button class="spin" onclick="myfunction()">SPIN</button>
</div>
Now I want to put something like an indicator and show user the result at the end of each spinning.
Like, the user might spin and get $10, I want to show the user that he has gotten $10 from the spin maybe below the wheel.
This image below best explain what I am trying to explain.
Here you go :).
What I did was added a while loop that subtracted 360 from deg until i got a number between 0 and 360. I then did some simple math knowing that your spinner has 8 different spinner positions, thats 45 degrees per section and seeing that it always started in the middle of $40, I was able to work out a series of if statements in js to figure out where the spinner landed on.
I also added div <div id="line"></div> to make like a little arrow thingy to show where the spinner landed on. Take a look here:
var spinCount = 0;
function myfunction() {
if (spinCount > 3) {
alert("No more Spins");
return false;
}
var x = 1024; //min value
var y = 9999; // max value
document.getElementById("output").innerHTML = "";
var deg = Math.floor(Math.random() * (x - y)) + y;
document.getElementById('box').style.transform = "rotate(" + deg + "deg)";
var element = document.getElementById('mainbox');
element.classList.remove('animate');
setTimeout(function() {
element.classList.add('animate');
while (deg >= 360) {
deg = deg - 360;
}
if (deg >= 337 || deg < 22)
{
document.getElementById("output").innerHTML = "Congratulations you have won $40";
}
if (deg >= 22 && deg < 67)
{
document.getElementById("output").innerHTML = "Congratulations you have won $60";
}
if (deg >= 67 && deg < 112)
{
document.getElementById("output").innerHTML = "Congratulations you have won $10";
}
if (deg >= 112 && deg < 157)
{
document.getElementById("output").innerHTML = "Congratulations you have won $80";
}
if (deg >= 157 && deg < 202)
{
document.getElementById("output").innerHTML = "Congratulations you have won $30";
}
if (deg >= 202 && deg < 247)
{
document.getElementById("output").innerHTML = "Congratulations you have won $50";
}
if (deg >= 247 && deg < 292)
{
document.getElementById("output").innerHTML = "Congratulations you have won $20";
}
if (deg >= 292 && deg < 337)
{
document.getElementById("output").innerHTML = "Congratulations you have won $70";
}
}, 5000); //5000 = 5 second
spinCount++;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
outline: none;
}
body {
font-family: Open Sans;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: rgb(60, 60, 242);
background: linear-gradient(90deg, rgba(60, 60, 242, 1) 0%, rgba(98, 245, 230, 1) 52%, rgba(60, 60, 242, 1) 100%);
background-size: cover;
}
.mainbox {
position: relative;
width: 500px;
height: 500px;
}
.mainbox:after {
position: absolute;
content: '';
width: 32px;
height: 32px;
background: url('../img/arrow-wheel.png') no-repeat;
background-size: 32px;
right: -30px;
top: 50%;
transform: translateY(-50%);
}
.box {
width: 100%;
height: 100%;
position: relative;
border-radius: 50%;
border: 10px solid #fff;
overflow: hidden;
transition: all ease 5s;
}
span {
width: 50%;
height: 50%;
display: inline-block;
position: absolute;
}
.span1 {
clip-path: polygon(0 92%, 100% 50%, 0 8%);
background-color: #fffb00;
top: 120px;
left: 0;
}
.span2 {
clip-path: polygon(100% 92%, 0 50%, 100% 8%);
background-color: #ff4fa1;
top: 120px;
right: 0;
}
.span3 {
clip-path: polygon(50% 0%, 8% 100%, 92% 100%);
background-color: #ffaa00;
bottom: 0;
left: 120px;
}
.span4 {
clip-path: polygon(50% 100%, 92% 0, 8% 0);
background-color: #22ff00;
top: 0;
left: 120px;
}
.box1 .span3 b {
transform: translate(-50%, -50%) rotate(-270deg);
}
.box1 .span1 b,
.box2 .span1 b {
transform: translate(-50%, -50%) rotate(185deg);
}
.box2 .span3 b {
transform: translate(-50%, -50%) rotate(90deg);
}
.box1 .span4 b,
.box2 .span4 b {
transform: translate(-50%, -50%) rotate(-85deg);
}
.box2 {
width: 100%;
height: 100%;
transform: rotate(-135deg);
}
span b {
font-size: 24px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.spin {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 75px;
height: 75px;
border-radius: 50%;
border: 4px solid #fff;
background-color: #001aff;
color: #fff;
box-shadow: 0 5px 20px #000;
font-weight: bold;
font-size: 22px;
cursor: pointer;
}
.spin:active {
width: 70px;
height: 70px;
font-size: 20px;
}
.mainbox.animate:after {
animation: animateArrow 0.7s ease infinite;
}
#keyframes animateArrow {
50% {
right: -40px;
}
}
#line {
position: absolute;
top 0;
right: 50%;
height: 50px;
width: 3px;
background: red;
z-index: 2;
}
#output {
text-align:center;
}
<div id="mainbox" class="mainbox">
<div id="line"></div>
<div id="box" class="box">
<div class="box1">
<span class="span1"><b>$10</b></span>
<span class="span2"><b>$20</b></span>
<span class="span3"><b>$30</b></span>
<span class="span4"><b>$40</b></span>
</div>
<div class="box2">
<span class="span1"><b>$50</b></span>
<span class="span2"><b>$60</b></span>
<span class="span3"><b>$70</b></span>
<span class="span4"><b>$80</b></span>
</div>
</div>
<button class="spin" onclick="myfunction()">SPIN</button>
<div id="output"></div>
</div>
Using getBoundingClientRect() to determine the top paddle position. Half the paddles have the smaller width value. This group contains the top paddle. Among that group the paddle having the smallest y coordinate is the topmost paddle in the group.
All paddle elements are collected using querySelectorAll which is converted to an array Array.from() and looped using forEach().
A multidimensional array is is populated with the paddle textContent, width, and y coordinate. The array is sorted, first by the width, then the y coordinate. This puts the topmost paddle at the top of the array. The paddle dollar amount can be accessed at paddles[0][0].
function getSpin() {
let paddles = [];
Array.from(document.querySelectorAll('span[class^="span"]')).forEach(function(paddle) {
let gbcr = paddle.getBoundingClientRect();
paddles.push([paddle.textContent, Math.round(gbcr.width), Math.round(gbcr.y)]);
});
return paddles.sort(function(a, b) {
if (a[1] > b[1]) {
return 1;
} else if (a[1] < b[1]) {
return -1;
}
if (a[2] < b[2]) {
return -1;
} else if (a[2] > b[2]) {
return 1;
}
})[0][0];
}
A message div is added below the button:
<button class="spin" onclick="myfunction()">SPIN</button>
<div id="spinresult">Click "SPIN" to play.</div>
...and the winning message is determined then written to it within the setTimeout function, which is in the myFunction function.
setTimeout(function() {
element.classList.add('animate');
document.querySelector('#spinresult').textContent = `Congratulations, you've won ${getSpin()}!`;
}, 5000); //5000 = 5 second
The arrow down pointer is displayed using a div placed before the spin box and styled using CSS.
<div class="arrow-down"></div>
<div id="box" class="box">
var spinCount = 0;
function myfunction() {
if (spinCount > 3) {
alert("No more Spins");
return false;
}
var x = 1024; //min value
var y = 9999; // max value
var deg = Math.floor(Math.random() * (x - y)) + y;
document.getElementById('box').style.transform = "rotate(" + deg + "deg)";
var element = document.getElementById('mainbox');
element.classList.remove('animate');
setTimeout(function() {
element.classList.add('animate');
document.querySelector('#spinresult').textContent = `Congratulations, you've won ${getSpin()}!`;
}, 5000); //5000 = 5 second
spinCount++;
function getSpin() {
let paddles = [];
Array.from(document.querySelectorAll('span[class^="span"]')).forEach(function(paddle) {
let gbcr = paddle.getBoundingClientRect();
paddles.push([paddle.textContent, Math.round(gbcr.width), Math.round(gbcr.y)]);
});
return paddles.sort(function(a, b) {
if (a[1] > b[1]) {
return 1;
} else if (a[1] < b[1]) {
return -1;
}
if (a[2] < b[2]) {
return -1;
} else if (a[2] > b[2]) {
return 1;
}
})[0][0];
}
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
outline: none;
}
body {
font-family: Open Sans;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
background: rgb(60, 60, 242);
background: linear-gradient(90deg, rgba(60, 60, 242, 1) 0%, rgba(98, 245, 230, 1) 52%, rgba(60, 60, 242, 1) 100%);
background-size: cover;
}
.mainbox {
position: relative;
width: 500px;
height: 500px;
text-align: center;
}
.mainbox:after {
position: absolute;
content: '';
width: 32px;
height: 32px;
background: url('../img/arrow-wheel.png') no-repeat;
background-size: 32px;
right: -30px;
top: 50%;
transform: translateY(-50%);
}
.box {
width: 100%;
height: 100%;
position: relative;
border-radius: 50%;
border: 10px solid #fff;
overflow: hidden;
transition: all ease 5s;
}
span {
width: 50%;
height: 50%;
display: inline-block;
position: absolute;
}
.span1 {
clip-path: polygon(0 92%, 100% 50%, 0 8%);
background-color: #fffb00;
top: 120px;
left: 0;
}
.span2 {
clip-path: polygon(100% 92%, 0 50%, 100% 8%);
background-color: #ff4fa1;
top: 120px;
right: 0;
}
.span3 {
clip-path: polygon(50% 0%, 8% 100%, 92% 100%);
background-color: #ffaa00;
bottom: 0;
left: 120px;
}
.span4 {
clip-path: polygon(50% 100%, 92% 0, 8% 0);
background-color: #22ff00;
top: 0;
left: 120px;
}
.box1 .span3 b {
transform: translate(-50%, -50%) rotate(-270deg);
}
.box1 .span1 b,
.box2 .span1 b {
transform: translate(-50%, -50%) rotate(185deg);
}
.box2 .span3 b {
transform: translate(-50%, -50%) rotate(90deg);
}
.box1 .span4 b,
.box2 .span4 b {
transform: translate(-50%, -50%) rotate(-85deg);
}
.box2 {
width: 100%;
height: 100%;
transform: rotate(-135deg);
}
span b {
font-size: 24px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.spin {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 75px;
height: 75px;
border-radius: 50%;
border: 4px solid #fff;
background-color: #001aff;
color: #fff;
box-shadow: 0 5px 20px #000;
font-weight: bold;
font-size: 22px;
cursor: pointer;
}
.spin:active {
width: 70px;
height: 70px;
font-size: 20px;
}
.mainbox.animate:after {
animation: animateArrow 0.7s ease infinite;
}
#keyframes animateArrow {
50% {
right: -40px;
}
}
#spinresult {
padding: 1em;
font-family: sans-serif;
color: white;
}
.arrow-down {
position: absolute;
right: 50%;
z-index: 9;
}
.arrow-down::before {
position: absolute;
left: -1em;
content: "";
border-top: 1em solid red;
border-left: 1em solid transparent;
border-right: 1em solid transparent;
}
<div id="mainbox" class="mainbox">
<div class="arrow-down"></div>
<div id="box" class="box">
<div class="box1">
<span class="span1"><b>$10</b></span>
<span class="span2"><b>$20</b></span>
<span class="span3"><b>$30</b></span>
<span class="span4"><b>$40</b></span>
</div>
<div class="box2">
<span class="span1"><b>$50</b></span>
<span class="span2"><b>$60</b></span>
<span class="span3"><b>$70</b></span>
<span class="span4"><b>$80</b></span>
</div>
</div>
<button class="spin" onclick="myfunction()">SPIN</button>
<div id="spinresult">Click "SPIN" to play.</div>
</div>
Inspired by #john 's answer...
Using the random degree value and the Javascript remain operator % to get the spin wheel range the degree value falls in: 1-45, 46-90, 91-135, 136-180, 181-225, 226-270, 271-315, 316-360.
Since the wheel starts at a 22 degree offset, i.e., the top paddle is centered, the degree range value must be adjusted by subtracting 21 degrees after it is calculated.
With the adjusted range value, the portion of the wheel—which paddle—can be determined by dividing it by 45 degrees and rounding down. This (usually) provides 0 - 7 which corresponds to the array of win array values. However, in the case of degree range below 22, -1 is returned and that is adjusted to index 7.
let spinCount = 0;
let [xx, yy] = [1024, 9999]; // [min, max]
let win = ["$60", "$10", "$80", "$30", "$50", "$20", "$70", "$40"];
document.querySelector('.spin').addEventListener('click', spin);
function spin() {
if (spinCount > 3) {
alert("No more spins.");
return false;
}
let deg = Math.floor(Math.random() * (xx - yy)) + yy;
let deg_off = (deg % 360) - 21;
let widx = Math.floor((deg_off / 45));
widx = (0 <= widx) ? widx : 7;
document.getElementById('box').style.transform = `rotate(${deg}deg)`;
let mainbox = document.getElementById('mainbox');
mainbox.classList.remove('animate');
setTimeout(function() {
mainbox.classList.add('animate');
document.getElementById("winnings").textContent
= `Congratulations, you've won ${win[widx]}`;
}, 5000); //5000 = 5 second
spinCount++;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
outline: none;
}
body {
font-family: Open Sans;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
background: rgb(60, 60, 242);
background: linear-gradient(90deg, rgba(60, 60, 242, 1) 0%, rgba(98, 245, 230, 1) 52%, rgba(60, 60, 242, 1) 100%);
background-size: cover;
}
.mainbox {
position: relative;
width: 500px;
height: 500px;
text-align: center;
}
.mainbox:after {
position: absolute;
content: '';
width: 32px;
height: 32px;
background: url('../img/arrow-wheel.png') no-repeat;
background-size: 32px;
right: -30px;
top: 50%;
transform: translateY(-50%);
}
.box {
width: 100%;
height: 100%;
position: relative;
border-radius: 50%;
border: 10px solid #fff;
overflow: hidden;
transition: all ease 5s;
}
span {
width: 50%;
height: 50%;
display: inline-block;
position: absolute;
}
.span1 {
clip-path: polygon(0 92%, 100% 50%, 0 8%);
background-color: #fffb00;
top: 120px;
left: 0;
}
.span2 {
clip-path: polygon(100% 92%, 0 50%, 100% 8%);
background-color: #ff4fa1;
top: 120px;
right: 0;
}
.span3 {
clip-path: polygon(50% 0%, 8% 100%, 92% 100%);
background-color: #ffaa00;
bottom: 0;
left: 120px;
}
.span4 {
clip-path: polygon(50% 100%, 92% 0, 8% 0);
background-color: #22ff00;
top: 0;
left: 120px;
}
.box1 .span3 b {
transform: translate(-50%, -50%) rotate(-270deg);
}
.box1 .span1 b,
.box2 .span1 b {
transform: translate(-50%, -50%) rotate(185deg);
}
.box2 .span3 b {
transform: translate(-50%, -50%) rotate(90deg);
}
.box1 .span4 b,
.box2 .span4 b {
transform: translate(-50%, -50%) rotate(-85deg);
}
.box2 {
width: 100%;
height: 100%;
transform: rotate(-135deg);
}
span b {
font-size: 24px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.spin {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 75px;
height: 75px;
border-radius: 50%;
border: 4px solid #fff;
background-color: #001aff;
color: #fff;
box-shadow: 0 5px 20px #000;
font-weight: bold;
font-size: 22px;
cursor: pointer;
}
.spin:active {
width: 70px;
height: 70px;
font-size: 20px;
}
.mainbox.animate:after {
animation: animateArrow 0.7s ease infinite;
}
#keyframes animateArrow {
50% {
right: -40px;
}
}
#winnings {
padding: 1em;
font-family: sans-serif;
color: white;
}
.arrow-down {
position: absolute;
right: 50%;
z-index: 9;
}
.arrow-down::before {
position: absolute;
left: -1.35em;
content: "";
border-top: 1em solid red;
border-left: 1em solid transparent;
border-right: 1em solid transparent;
}
<div id="mainbox" class="mainbox">
<div class="arrow-down"></div>
<div id="box" class="box">
<div class="box1">
<span class="span1"><b>$10</b></span>
<span class="span2"><b>$20</b></span>
<span class="span3"><b>$30</b></span>
<span class="span4"><b>$40</b></span>
</div>
<div class="box2">
<span class="span1"><b>$50</b></span>
<span class="span2"><b>$60</b></span>
<span class="span3"><b>$70</b></span>
<span class="span4"><b>$80</b></span>
</div>
</div>
<button class="spin">SPIN</button>
<div id="winnings">Click "SPIN" to play.</div>
</div>

Keyframes animation in styled-components

I am trying to write keyframe, animation in my code but I can't figure it out even after reading the documentation. Please help
```const ButtonStyle = styled.div`
.btn_rainbow {
text-decoration: none;
background-color: #c53ab4;
border-radius: 5px;
color: #fff;
cursor: pointer;
padding: 8px 16px;
&:hover {
background-image: linear-gradient(90deg,
#00C0FF 0%, #FFCF00 49%, #FC4F4F 80%, #00C0FF 100%);
}
}
`;
export default function Button() {
return (
<ButtonStyle>
<a class="btn_rainbow" href="#">Click Me!</a>
</ButtonStyle>
);
}```
The CSS Keyframe I wanted to add:
```#keyframes slidebg {
to {
background-position:20vw;
}
}
.btn_rainbow:hover{
background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 80%, #00C0FF
100%);
animation:slidebg 5s linear infinite;
}```
.glow-on-hover {
width: 220px;
height: 50px;
border: none;
outline: none;
color: #fff;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: '';
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
position: absolute;
top: -2px;
left:-2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity .3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #111;
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% { background-position: 0 0; }
50% { background-position: 400% 0; }
100% { background-position: 0 0; }
}
<ButtonStyle>
<button class="glow-on-hover" href="#">Click Me!</button>
</ButtonStyle>

How do start CSS animation on click?

I'm fairly new to front-end dev so please spare me...Anyway, for this codepen project I'm trying to get the animation where a stack of pancakes falls to the plate to activate when you click the button. It should be just an empty plate until the button is clicked.
Not sure why my JS code isn't working but if I target the pancake or stack class, the visuals still remain static.
HTML:
<div class="container">
<div class="plate">
<div class="inner-plate">
</div>
</div>
<button onclick="onclick()">Good Morning!</button>
<div class="stack">
<div class="pancake">
<div class="top-p"></div>
</div>
<div class="pancake p2">
<div class="top-p"></div>
</div>
<div class="pancake p3">
<div class="top-p"></div>
</div>
<div class="pancake p4">
<div class="top-p"></div>
</div>
<div class="pancake p5">
<div class="top-p"></div>
</div>
<div class="pancake p6">
<div class="top-p"></div>
<div class="butter">
<div class = "shadow"></div>
<div class = "top-b"></div>
<div class = "shine"></div>
</div>
</div>
</div>
CSS (snippet):
/*------BUTTON------*/
button {
display: inline-block;
border: none;
margin-top: 25%;
padding: 1em 2em;
/*CSS center element trick*/
position: absolute;
/* Gradient */
background: linear-gradient(90deg, #FF5F6D 0%, rgba(255, 195, 113, 0.88) 100%);
box-shadow: 0px 4px 10px rgba(255, 95, 109, 0.25);
border-radius: 40px;
/*text*/
position: relative;
text-transform: uppercase;
font-family: Montserrat, system-ui;
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 15px;
letter-spacing: 0.14px;
color: #fff;
cursor: pointer;
transition: all 0.1s linear;
}
button:hover {
transform: translateY(-6px);
background: linear-gradient(90deg, #FF777C 0%, #FFC487 100%);
box-shadow: 0px 6px 5px rgba(255, 95, 109, 0.25);
}
.plate {
position: relative;
width: 100%;
height: 100%;
background: #FFFFFF;
/* Stroke */
border: 1.25px solid #F9EADC;
border-radius: 50%;
box-shadow: 0px 4px 4px rgba(165, 75, 75, 0.15);
}
.inner-plate {
position: relative;
width: 75%;
height: 30px;
background: #FFFFFF;
/* Stroke */
border: 1.25px solid #F9EADC;
border-radius: 50%;
margin: 5px auto; /*stacked "plates" without flexboxes*/
}
/*------ELEMENTS TO ANIMATE------*/
.pancake {
display: inline-block;
position: absolute;
width: 65%;
height: 25%;
left: 18%;
top: 0;
background: #FFE68E;
border-radius: 50%;
z-index: 1;
}
.top-p {
position: absolute;
width: 95%;
height: 80%;
left: 2.25%;
background: linear-gradient(180deg, rgba(222, 159, 101, 0.75) 0%, #E09148 100%);
border-radius: 50%;
}
.slideIn {
-webkit-animation: slideIn 1s linear both;
animation: slideIn 1s linear both;
}
/*------ KEYFRAMES -----*/
#-webkit-keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#-webkit-keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
JS:
$(function() {
$('button').onclick(function() {
$('.pancake').addClass('slideIn');
});
})
There are a bunch of things are not right, I've fixed them and marked them with FIX
$(function() {
$('button').click(function() {
// FIX: you forgot the dot
$('.pancake').addClass('slideIn');
});
});
#import url('https://fonts.googleapis.com/css?family=Montserrat:600&display=swap');
* {
outline: none;
/*NOTE: removing the blue outline for links and buttons is a terrible UI/UX decision for accessibility! Some folks do not have the motor skills to use a mouse and use the alternative Tab button instead. This is purely just for show and practice :-) */
}
body {
position: relative;
height: 100vh;
padding: 0;
margin: 0;
background: #FDF6D0;
display: flex;
align-items: center;
text-align: center;
}
.container{
position: absolute;
margin-top: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
align-items: center;
}
/*------BUTTON------*/
button {
display: inline-block;
border: none;
margin-top: 25%;
padding: 1em 2em;
/*CSS center element trick*/
position: absolute;
/* Gradient */
background: linear-gradient(90deg, #FF5F6D 0%, rgba(255, 195, 113, 0.88) 100%);
box-shadow: 0px 4px 10px rgba(255, 95, 109, 0.25);
border-radius: 40px;
/*text*/
position: relative;
text-transform: uppercase;
font-family: Montserrat, system-ui;
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 15px;
letter-spacing: 0.14px;
color: #fff;
cursor: pointer;
transition: all 0.1s linear;
}
button:hover {
transform: translateY(-6px);
background: linear-gradient(90deg, #FF777C 0%, #FFC487 100%);
box-shadow: 0px 6px 5px rgba(255, 95, 109, 0.25);
}
.plate {
position: relative;
width: 100%;
height: 100%;
background: #FFFFFF;
/* Stroke */
border: 1.25px solid #F9EADC;
border-radius: 50%;
box-shadow: 0px 4px 4px rgba(165, 75, 75, 0.15);
}
.inner-plate {
position: relative;
width: 75%;
height: 30px;
background: #FFFFFF;
/* Stroke */
border: 1.25px solid #F9EADC;
border-radius: 50%;
margin: 5px auto; /*stacked "plates" without flexboxes*/
}
/*------ELEMENTS TO ANIMATE------*/
.pancake {
display: inline-block;
position: absolute;
width: 65%;
height: 25%;
left: 18%;
top: 0;
background: #FFE68E;
border-radius: 50%;
z-index: 1;
/*pancakes falling*/
-webkit-animation: slideIn 1s linear both;
animation: slideIn 1s linear both;
/* FIX: Pause the animation on start */
animation-play-state: paused;
}
/* FIX: Resume the animation when this class is added */
.slideIn {
animation-play-state: running;
}
.top-p {
position: absolute;
width: 95%;
height: 80%;
left: 2.25%;
background: linear-gradient(180deg, rgba(222, 159, 101, 0.75) 0%, #E09148 100%);
border-radius: 50%;
}
.p2 {
z-index: 2;
top: -7%;
left: 18%;
}
.p3 {
z-index: 3;
top: -14%;
left: 18%;
}
.p4 {
z-index: 4;
top: -21%;
left: 18%;
}
.p5 {
z-index: 5;
top: -28%;
left: 18%;
}
.p6 {
z-index: 6;
top: -35%;
left: 18%;
}
/*BUTTER*/
.shadow {
position: absolute;
z-index: 8;
top: -7%;
left: 42%;
height: 30%;
width: 15%;
margin: auto;
background: #FFDE68;
border-radius: 1px;
box-shadow: 1px 2px 2px rgba(202, 133, 65, 0.75);
transform: matrix(0.74, -0.44, 0.98, 0.77, 0, 0);
}
.top-b {
position: absolute;
z-index: 9;
top: -10%;
left: 45%;
height: 25%;
width: 10%;
margin: auto;
background: #FFEFB5;
border-radius: 1px;
transform: matrix(0.74, -0.44, 0.98, 0.77, 0, 0);
}
.shine{
position: absolute;
z-index: 10;
top: -4%;
left: 49%;
height: 7%;
width: 4%;
margin: auto;
background: #FFF;
border-radius: 1px;
transform: rotate(45deg);
}
.slideIn {
-webkit-animation: slideIn 1s linear both;
animation: slideIn 1s linear both;
}
/*------ KEYFRAMES -----*/
#-webkit-keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#-webkit-keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
<!-- FIX: You forgot to import the jquery in CodePen! -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="container">
<div class="plate">
<div class="inner-plate">
</div>
</div>
<!-- FIX: You don't need to bind function here since you've already done it in js.-->
<button>Good Morning!</button>
<div class="stack">
<div class="pancake">
<div class="top-p"></div>
</div>
<div class="pancake p2">
<div class="top-p"></div>
</div>
<div class="pancake p3">
<div class="top-p"></div>
</div>
<div class="pancake p4">
<div class="top-p"></div>
</div>
<div class="pancake p5">
<div class="top-p"></div>
</div>
<div class="pancake p6">
<div class="top-p"></div>
<div class="butter">
<div class = "shadow"></div>
<div class = "top-b"></div>
<div class = "shine"></div>
</div>
</div>
</div>
the class identifier is wrong it should be $(".pancake")
$(function() {
$('button').onclick(function() {
$('.pancake').addClass('slideIn');
});
})
javascript
You need to add the class identifier . in $(".pancake")
$(function() {
$('button').click(function() {
$('.pancake').addClass('slideIn');
});
})
#import url('https://fonts.googleapis.com/css?family=Montserrat:600&display=swap');
* {
outline: none;
/*NOTE: removing the blue outline for links and buttons is a terrible UI/UX decision for accessibility! Some folks do not have the motor skills to use a mouse and use the alternative Tab button instead. This is purely just for show and practice :-) */
}
body {
position: relative;
height: 100vh;
padding: 0;
margin: 0;
background: #FDF6D0;
display: flex;
align-items: center;
text-align: center;
}
.container{
position: absolute;
margin-top: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
align-items: center;
}
/*------BUTTON------*/
button {
display: inline-block;
border: none;
margin-top: 25%;
padding: 1em 2em;
/*CSS center element trick*/
position: absolute;
/* Gradient */
background: linear-gradient(90deg, #FF5F6D 0%, rgba(255, 195, 113, 0.88) 100%);
box-shadow: 0px 4px 10px rgba(255, 95, 109, 0.25);
border-radius: 40px;
/*text*/
position: relative;
text-transform: uppercase;
font-family: Montserrat, system-ui;
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 15px;
letter-spacing: 0.14px;
color: #fff;
cursor: pointer;
transition: all 0.1s linear;
}
button:hover {
transform: translateY(-6px);
background: linear-gradient(90deg, #FF777C 0%, #FFC487 100%);
box-shadow: 0px 6px 5px rgba(255, 95, 109, 0.25);
}
.plate {
position: relative;
width: 100%;
height: 100%;
background: #FFFFFF;
/* Stroke */
border: 1.25px solid #F9EADC;
border-radius: 50%;
box-shadow: 0px 4px 4px rgba(165, 75, 75, 0.15);
}
.inner-plate {
position: relative;
width: 75%;
height: 30px;
background: #FFFFFF;
/* Stroke */
border: 1.25px solid #F9EADC;
border-radius: 50%;
margin: 5px auto; /*stacked "plates" without flexboxes*/
}
/*------ELEMENTS TO ANIMATE------*/
.pancake {
display: inline-block;
position: absolute;
width: 65%;
height: 25%;
left: 18%;
top: 0;
background: #FFE68E;
border-radius: 50%;
z-index: 1;
/*pancakes falling*/
-webkit-animation: slideIn 1s linear both;
animation: slideIn 1s linear both;
}
.top-p {
position: absolute;
width: 95%;
height: 80%;
left: 2.25%;
background: linear-gradient(180deg, rgba(222, 159, 101, 0.75) 0%, #E09148 100%);
border-radius: 50%;
}
.p2 {
z-index: 2;
top: -7%;
left: 18%;
}
.p3 {
z-index: 3;
top: -14%;
left: 18%;
}
.p4 {
z-index: 4;
top: -21%;
left: 18%;
}
.p5 {
z-index: 5;
top: -28%;
left: 18%;
}
.p6 {
z-index: 6;
top: -35%;
left: 18%;
}
/*BUTTER*/
.shadow {
position: absolute;
z-index: 8;
top: -7%;
left: 42%;
height: 30%;
width: 15%;
margin: auto;
background: #FFDE68;
border-radius: 1px;
box-shadow: 1px 2px 2px rgba(202, 133, 65, 0.75);
transform: matrix(0.74, -0.44, 0.98, 0.77, 0, 0);
}
.top-b {
position: absolute;
z-index: 9;
top: -10%;
left: 45%;
height: 25%;
width: 10%;
margin: auto;
background: #FFEFB5;
border-radius: 1px;
transform: matrix(0.74, -0.44, 0.98, 0.77, 0, 0);
}
.shine{
position: absolute;
z-index: 10;
top: -4%;
left: 49%;
height: 7%;
width: 4%;
margin: auto;
background: #FFF;
border-radius: 1px;
transform: rotate(45deg);
}
.slideIn {
-webkit-animation: slideIn 1s linear both;
animation: slideIn 1s linear both;
}
/*------ KEYFRAMES -----*/
#-webkit-keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#-webkit-keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="plate">
<div class="inner-plate">
</div>
</div>
<button>Good Morning!</button>
<div class="stack">
<div class="pancake">
<div class="top-p"></div>
</div>
<div class="pancake p2">
<div class="top-p"></div>
</div>
<div class="pancake p3">
<div class="top-p"></div>
</div>
<div class="pancake p4">
<div class="top-p"></div>
</div>
<div class="pancake p5">
<div class="top-p"></div>
</div>
<div class="pancake p6">
<div class="top-p"></div>
<div class="butter">
<div class = "shadow"></div>
<div class = "top-b"></div>
<div class = "shine"></div>
</div>
</div>
</div>
Use following js (i remove animation from css .pancake class and add transform: translateY(-1000px); to it)
function onClick() {
[...document.querySelectorAll('.pancake')]
.map(x=> x.classList.add('slideIn'));
}
function onClick() {
[...document.querySelectorAll('.pancake')].map(x=> x.classList.add('slideIn'));
}
#import url('https://fonts.googleapis.com/css?family=Montserrat:600&display=swap');
* {
outline: none;
/*NOTE: removing the blue outline for links and buttons is a terrible UI/UX decision for accessibility! Some folks do not have the motor skills to use a mouse and use the alternative Tab button instead. This is purely just for show and practice :-) */
}
body {
position: relative;
height: 100vh;
padding: 0;
margin: 0;
background: #FDF6D0;
display: flex;
align-items: center;
text-align: center;
}
.container{
position: absolute;
margin-top: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
align-items: center;
}
/*------BUTTON------*/
button {
display: inline-block;
border: none;
margin-top: 25%;
padding: 1em 2em;
/*CSS center element trick*/
position: absolute;
/* Gradient */
background: linear-gradient(90deg, #FF5F6D 0%, rgba(255, 195, 113, 0.88) 100%);
box-shadow: 0px 4px 10px rgba(255, 95, 109, 0.25);
border-radius: 40px;
/*text*/
position: relative;
text-transform: uppercase;
font-family: Montserrat, system-ui;
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 15px;
letter-spacing: 0.14px;
color: #fff;
cursor: pointer;
transition: all 0.1s linear;
}
button:hover {
transform: translateY(-6px);
background: linear-gradient(90deg, #FF777C 0%, #FFC487 100%);
box-shadow: 0px 6px 5px rgba(255, 95, 109, 0.25);
}
.plate {
position: relative;
width: 100%;
height: 100%;
background: #FFFFFF;
/* Stroke */
border: 1.25px solid #F9EADC;
border-radius: 50%;
box-shadow: 0px 4px 4px rgba(165, 75, 75, 0.15);
}
.inner-plate {
position: relative;
width: 75%;
height: 30px;
background: #FFFFFF;
/* Stroke */
border: 1.25px solid #F9EADC;
border-radius: 50%;
margin: 5px auto; /*stacked "plates" without flexboxes*/
}
/*------ELEMENTS TO ANIMATE------*/
.pancake {
display: inline-block;
position: absolute;
width: 65%;
height: 25%;
left: 18%;
top: 0;
background: #FFE68E;
border-radius: 50%;
z-index: 1;
/*pancakes falling*/
transform: translateY(-1000px);
}
.top-p {
position: absolute;
width: 95%;
height: 80%;
left: 2.25%;
background: linear-gradient(180deg, rgba(222, 159, 101, 0.75) 0%, #E09148 100%);
border-radius: 50%;
}
.p2 {
z-index: 2;
top: -7%;
left: 18%;
}
.p3 {
z-index: 3;
top: -14%;
left: 18%;
}
.p4 {
z-index: 4;
top: -21%;
left: 18%;
}
.p5 {
z-index: 5;
top: -28%;
left: 18%;
}
.p6 {
z-index: 6;
top: -35%;
left: 18%;
}
/*BUTTER*/
.shadow {
position: absolute;
z-index: 8;
top: -7%;
left: 42%;
height: 30%;
width: 15%;
margin: auto;
background: #FFDE68;
border-radius: 1px;
box-shadow: 1px 2px 2px rgba(202, 133, 65, 0.75);
transform: matrix(0.74, -0.44, 0.98, 0.77, 0, 0);
}
.top-b {
position: absolute;
z-index: 9;
top: -10%;
left: 45%;
height: 25%;
width: 10%;
margin: auto;
background: #FFEFB5;
border-radius: 1px;
transform: matrix(0.74, -0.44, 0.98, 0.77, 0, 0);
}
.shine{
position: absolute;
z-index: 10;
top: -4%;
left: 49%;
height: 7%;
width: 4%;
margin: auto;
background: #FFF;
border-radius: 1px;
transform: rotate(45deg);
}
.slideIn {
-webkit-animation: slideIn 1s linear both;
animation: slideIn 1s linear both;
}
/*------ KEYFRAMES -----*/
#-webkit-keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#-webkit-keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
<div class="container">
<div class="plate">
<div class="inner-plate">
</div>
</div>
<button onclick="onClick()">Good Morning!</button>
<div class="stack">
<div class="pancake">
<div class="top-p"></div>
</div>
<div class="pancake p2">
<div class="top-p"></div>
</div>
<div class="pancake p3">
<div class="top-p"></div>
</div>
<div class="pancake p4">
<div class="top-p"></div>
</div>
<div class="pancake p5">
<div class="top-p"></div>
</div>
<div class="pancake p6">
<div class="top-p"></div>
<div class="butter">
<div class = "shadow"></div>
<div class = "top-b"></div>
<div class = "shine"></div>
</div>
</div>
</div>

Set a visit count down using cookies

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>

Remove overlay div when user scrolls on div background image

Javascript noob here so any help would be greatly appreciated!
I'm trying to set the .scroll-overlay container to 0 opacity when the user scrolls down the div (revealing the overflow of the background image).
I've managed to get the .scroll-overlay container's opacity to fade to 0 only when the user scrolls on the body element.
How do i specifically target the #laptop-content container?
var fadeStart = 0,
fadeUntil = 0,
fading = $('.scroll-overlay');
$(window).bind('scroll', function() {
var offset = $(document).scrollTop(),
opacity = 0;
if (offset <= fadeStart) {
opacity = 1;
} else if (offset <= fadeUntil) {
opacity = 1 - offset / fadeUntil;
}
fading.css('opacity', opacity).html(opacity);
});
html {
height: 2000px;
}
#laptop-content .img {
-webkit-animation: scroll 0.2s ease-in-out 0s 1 alternate;
-moz-animation: scroll 6.5s ease-in-out 0s 1 alternate;
-o-animation: scroll 6.5s ease-in-out 0s 1 alternate;
animation: scroll 1.2s ease-in-out 0s 1 alternate;
background-image: url("http://via.placeholder.com/750x900");
background-size: contain;
background-repeat: no-repeat;
}
#laptop-content img {
opacity: 0;
}
#-webkit-keyframes scroll {
0% {
background-position: 0px 40px;
}
50% {
background-position: 0px -270px;
}
100% {
background-position: 0px 270px;
}
}
#-moz-keyframes scroll {
0% {
background-position: 0px -40px;
}
50% {
background-position: 0px -270px;
}
100% {
background-position: 0px -450px;
}
}
#-o-keyframes scroll {
0% {
background-position: 0px -40px;
}
50% {
background-position: 0px -470px;
}
100% {
background-position: 0px -850px;
}
}
#keyframes scroll {
0% {
background-position: 0px 300px;
}
80% {
background-position: 0px -40px;
}
100% {
background-position: 0px 0px;
}
}
#laptop-container {
padding-top: 50px;
position: relative;
float: left;
z-index: 10;
width: 750px;
height: 500px;
}
.hide-scrollbar {
position: absolute;
top: 76px;
left: 750px;
height: 500px;
width: 0;
background: #000;
opacity: 1;
z-index: 100;
}
#laptop {
width: auto;
position: absolute;
left: -189px;
}
#scroll-wrapper {
cursor: default !important;
top: 40px;
width: 750px;
height: 500px;
margin-left: 18px;
position: relative;
overflow: hidden;
-ms-touch-action: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
-webkit-box-shadow: -1px 10px 50px -6px rgba(0, 0, 0, 1);
-moz-box-shadow: -1px 10px 50px -6px rgba(0, 0, 0, 1);
box-shadow: -1px 10px 50px -6px rgba(0, 0, 0, 1);
}
#laptop-content {
position: absolute;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
#laptop-content img {
width: 100%;
}
.scroll-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 1;
}
#-webkit-keyframes scroll-ani {
0% {
opacity: 1;
top: 29%;
}
15% {
opacity: 1;
top: 50%;
}
50% {
opacity: 0;
top: 50%;
}
100% {
opacity: 0;
top: 29%;
}
}
#-moz-keyframes scroll-ani {
0% {
opacity: 1;
top: 29%;
}
15% {
opacity: 1;
top: 50%;
}
50% {
opacity: 0;
top: 50%;
}
100% {
opacity: 0;
top: 29%;
}
}
#keyframes scroll-ani {
0% {
opacity: 1;
top: 29%;
}
15% {
opacity: 1;
top: 50%;
}
50% {
opacity: 0;
top: 50%;
}
100% {
opacity: 0;
top: 29%;
}
}
.mouse-scroll {
border: none;
display: inline-block;
margin-top: 10%;
text-decoration: none;
overflow: hidden;
width: 100%;
text-align: center;
margin-top: 200px;
}
.mouse-scroll .mouse {
position: relative;
display: block;
width: 18px;
height: 28px;
margin: 0 auto 20px;
-webkit-box-sizing: border-box;
border: 2px solid #ffffff;
border-radius: 13px;
}
.mouse-scroll .mouse .mouse-movement {
position: absolute;
display: block;
top: 29%;
left: 50%;
width: 4px;
height: 4px;
margin: -2px 0 0 -2px;
background: #ffffff;
border-radius: 50%;
-webkit-animation: scroll-ani 2s linear infinite;
animation: scroll-ani 2s linear infinite;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="laptop-container">
<div class="hide-scrollbar"></div>
<div id="scroll-wrapper" style="overflow-y: auto; overflow-x: hidden; cursor: move; touch-action: none; user-select: none;">
<div>
<div id="laptop-content">
<div class="scroll-overlay">
<div class="mouse-scroll">
<span class="mouse">
<span class="mouse-movement"></span>
</span>
</div>
</div>
<div class="img"><img src="http://via.placeholder.com/750x900"></div>
</div>
</div>
</div>
</div>
If I understood what you want correctly, you're already almost there. You just have to bind your scroll-handler to #scroll-wrapper and calculate the scroll-offset of #scroll-wrapper instead of the whole document.
Here's your code with the necessary alterations:
var fadeStart = 0,
fadeUntil = 0,
fading = $('.scroll-overlay');
$('#scroll-wrapper').bind('scroll', function() {
var offset = $('#scroll-wrapper').scrollTop(),
opacity = 0;
if (offset <= fadeStart) {
opacity = 1;
} else if (offset <= fadeUntil) {
opacity = 1 - offset / fadeUntil;
}
fading.css('opacity', opacity).html(opacity);
});
html {
height: 2000px;
}
#laptop-content .img {
-webkit-animation: scroll 0.2s ease-in-out 0s 1 alternate;
-moz-animation: scroll 6.5s ease-in-out 0s 1 alternate;
-o-animation: scroll 6.5s ease-in-out 0s 1 alternate;
animation: scroll 1.2s ease-in-out 0s 1 alternate;
background-image: url("http://via.placeholder.com/750x900");
background-size: contain;
background-repeat: no-repeat;
}
#laptop-content img {
opacity: 0;
}
#-webkit-keyframes scroll {
0% {
background-position: 0px 40px;
}
50% {
background-position: 0px -270px;
}
100% {
background-position: 0px 270px;
}
}
#-moz-keyframes scroll {
0% {
background-position: 0px -40px;
}
50% {
background-position: 0px -270px;
}
100% {
background-position: 0px -450px;
}
}
#-o-keyframes scroll {
0% {
background-position: 0px -40px;
}
50% {
background-position: 0px -470px;
}
100% {
background-position: 0px -850px;
}
}
#keyframes scroll {
0% {
background-position: 0px 300px;
}
80% {
background-position: 0px -40px;
}
100% {
background-position: 0px 0px;
}
}
#laptop-container {
padding-top: 50px;
position: relative;
float: left;
z-index: 10;
width: 750px;
height: 500px;
}
.hide-scrollbar {
position: absolute;
top: 76px;
left: 750px;
height: 500px;
width: 0;
background: #000;
opacity: 1;
z-index: 100;
}
#laptop {
width: auto;
position: absolute;
left: -189px;
}
#scroll-wrapper {
cursor: default !important;
top: 40px;
width: 750px;
height: 500px;
margin-left: 18px;
position: relative;
overflow: hidden;
-ms-touch-action: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
-webkit-box-shadow: -1px 10px 50px -6px rgba(0, 0, 0, 1);
-moz-box-shadow: -1px 10px 50px -6px rgba(0, 0, 0, 1);
box-shadow: -1px 10px 50px -6px rgba(0, 0, 0, 1);
}
#laptop-content {
position: absolute;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
#laptop-content img {
width: 100%;
}
.scroll-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 1;
}
#-webkit-keyframes scroll-ani {
0% {
opacity: 1;
top: 29%;
}
15% {
opacity: 1;
top: 50%;
}
50% {
opacity: 0;
top: 50%;
}
100% {
opacity: 0;
top: 29%;
}
}
#-moz-keyframes scroll-ani {
0% {
opacity: 1;
top: 29%;
}
15% {
opacity: 1;
top: 50%;
}
50% {
opacity: 0;
top: 50%;
}
100% {
opacity: 0;
top: 29%;
}
}
#keyframes scroll-ani {
0% {
opacity: 1;
top: 29%;
}
15% {
opacity: 1;
top: 50%;
}
50% {
opacity: 0;
top: 50%;
}
100% {
opacity: 0;
top: 29%;
}
}
.mouse-scroll {
border: none;
display: inline-block;
margin-top: 10%;
text-decoration: none;
overflow: hidden;
width: 100%;
text-align: center;
margin-top: 200px;
}
.mouse-scroll .mouse {
position: relative;
display: block;
width: 18px;
height: 28px;
margin: 0 auto 20px;
-webkit-box-sizing: border-box;
border: 2px solid #ffffff;
border-radius: 13px;
}
.mouse-scroll .mouse .mouse-movement {
position: absolute;
display: block;
top: 29%;
left: 50%;
width: 4px;
height: 4px;
margin: -2px 0 0 -2px;
background: #ffffff;
border-radius: 50%;
-webkit-animation: scroll-ani 2s linear infinite;
animation: scroll-ani 2s linear infinite;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="laptop-container">
<div class="hide-scrollbar"></div>
<div id="scroll-wrapper" style="overflow-y: auto; overflow-x: hidden; cursor: move; touch-action: none; user-select: none;">
<div>
<div id="laptop-content">
<div class="scroll-overlay">
<div class="mouse-scroll">
<span class="mouse">
<span class="mouse-movement"></span>
</span>
</div>
</div>
<div class="img"><img src="http://via.placeholder.com/750x900"></div>
</div>
</div>
</div>
</div>

Categories