I'm trying to make a simple CSS animation so that when a person clicks a button it will display a simple message (like steam when a players started something)
I'm trying to learn CSS, whar I did was this:
#keyframes item-adcionado {
0% {
z-index: -100;
opacity: 0;
}
50% {
z-index: 200;
opacity: 1;
}
100% {
z-index: -100;
opacity: 0;
}
}
#-webkit-keyframes item-adcionado {
0% {
z-index: -100;
opacity: 0;
bottom: 0%;
}
50% {
z-index: 200;
opacity: 1;
bottom: 5%;
}
100% {
z-index: -100;
opacity: 0;
bottom: 0%;
}
}
.item-nao-adicionado {
z-index: -100;
width: 10%;
height: 5%;
opacity: 0;
background-color: white;
box-shadow: 0px 0px 25px #696969;
padding: 25px;
border-radius: 20px;
position: fixed;
}
.item-adc {
z-index: -100;
width: 10%;
height: 5%;
opacity: 0;
background-color: white;
box-shadow: 0px 0px 25px #696969;
padding: 25px;
border-radius: 20px;
position: fixed;
animation: item-adcionado 10s ease;
-webkit-animation: item-adcionado 10s ease;
animation-fill-mode: forwards;
}
The div:
<div class="item-nao-adicionado" id="item-nao-adicionado"><h2>Jogo adicionado ao carrinho</h2></div>
The Change code:
document.getElementById("item-nao-adicionado").className = "item-adc";
Related
I try to code a little rock-paper-scissors based game and used the CSS/JS-code from this youtube tutorial to create neon buttons with a snake animation around the edges of the button.
https://youtu.be/3RRgVHd2TXQ
I then softened the edges of the buttons using "border-radius: 15px" - but the reflection has still sharp corners.
How can I solve this?
Also the snake-animation to shine around the edges of the button does not work :( - would be great to know why!?
Try the game: https://bamory.com/?hotlink=FARTWAR (click link to start a game-session and invite another player with the session-code appearing on top of the screen)
CODE:
html{
text-align: center;
}
}
body.chapter2 {
color: yellow;
}
input {
margin: 10px;
height: 50px;
width: 90%;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700;800;900&display=swap');
*
{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #050801;
flex-direction: column;
}
.button
{
border-radius: 15px;
position: relative;
display: inline-block;
padding: 10px 15px;
margin: 10px 10px;
color: #03e9f4;
font-size: 24px;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
transition: 0.5s;
letter-spacing: 4px;
-webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
width: 25%;
}
.button:nth-child(1)
{
filter: hue-rotate(290deg);
}
.button:nth-child(3)
{
filter: hue-rotate(110deg);
}
.button:hover
{
background: #03e9f4;
color: #050801;
box-shadow: 0 0 5px #03e9f4,
0 0 25px #03e9f4,
0 0 50px #03e9f4,
0 0 200px #03e9f4;
}
.button span
{
position: absolute;
display: block;
}
.button span:nth-child(1)
{
top: 0;
left: 0;
width: 25%;
height: 2px;
background: linear-gradient(90deg, transparent, #03e9f4);
animation: animate1 1s linear infinite;
}
#keyframes animate1
{
0%
{
left: -100%;
}
50%, 100%
{
left: 100%;
}
}
.button span:nth-child(2)
{
top: -100px;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg, transparent, #03e9f4);
animation: animate2 1s linear infinite;
animation-delay: 0.25s;
}
#keyframes animate2
{
0%
{
top: -100%;
}
50%, 100%
{
top: 100%;
}
}
.button span:nth-child(3)
{
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background: linear-gradient(270deg, transparent, #03e9f4);
animation: animate3 1s linear infinite;
animation-delay: 0.5s;
}
#keyframes animate3
{
0%
{
right: -100%;
}
50%, 100%
{
right: 100%;
}
}
.button span:nth-child(4)
{
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg, transparent, #03e9f4);
animation: animate4 1s linear infinite;
animation-delay: 0.75s;
}
#keyframes animate4
{
0%
{
bottom: -100%;
}
50%, 100%
{
bottom: 100%;
}
}
Thanks for your help! (it´s my first time using JS / stackoverflow - please forgive me if I inserted too much code or did other mistakes!)
how about give up box-reflect and use transform. take look at this:
css box-reflect alternative for older browser
it's more messy but why not more to learn
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>
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>
Hello I'm trying to simulate flip countdown timer But when I wrote the code I discovered that there was a difference between:
#keyframes zindex {
0% {
z-index: 2;
}
5% {
z-index: 4;
}
100% {
z-index: 4;
}
}
and:
#keyframes zindex {
0% {
z-index: 2;
}
100% {
z-index: 4;
}
}
That when I remove 5% the problem will occurred so I'd like to know why this problem ocurres.
Here my code:
body {
font: normal 11px "Helvetica Neue", Helvetica, sans-serif;
}
.wrap {
width: 50px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0px 0px -25px;
}
ul#initial {
list-style-type: none;
width: 100%;
height: 100%;
padding: 0px;
position: relative;
}
ul#initial li {
position: absolute;
top: 0;
left: 0;
text-align: center;
width: 100%;
}
.first {
z-index: 3;
}
.second {
-webkit-animation: zindex 1s 1s linear both;
}
#keyframes zindex {
0% {
z-index: 2;
}
5% {
z-index: 4;
}
100% {
z-index: 4;
}
}
.flipthis {
height: 50px;
width: 50px;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
background: #bbb;
transform-origin: 50% 100%;
color: #fff;
animation: flipthis 1s linear;
}
.flipthis-down {
height: 50px;
width: 50px;
background: #0034ff;
color: #fff;
overflow: hidden;
position: absolute;
top: auto;
left: 0;
bottom: 0;
}
.digit {
height: 200%;
font-size: 80px;
position: absolute;
width: 50px;
text-align: center;
text-shadow:0px 1px 2px rgba(224,224,224,0.87);
}
.flipthis-down .digit {
bottom: 0;
}
#-webkit-keyframes flipthis {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(-90deg);
}
}
.flipthis2 {
height: 50px;
width: 50px;
background: #00ff82;
color: #fff;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
.flipthis2-down {
height: 50px;
width: 50px;
background: #00f760;
color: #fff;
-webkit-transform-origin: 50% 0%;
overflow: hidden;
position: absolute;
top: auto;
left: 0;
bottom: 0;
animation: flipthis-down 1s 1s linear;
}
.flipthis2-down .digit {
bottom: 0;
}
#-webkit-keyframes flipthis-down {
0% {
transform: rotateX(90deg);
}
100% {
transform: rotateX(0deg);
}
}
a.derp {
-webkit-perspective: 2000px;
display: block;
width: 50px;
height: 100px;
}
<div class="wrap">
<ul id="initial">
<li class="first">
<a class="derp">
<div class="flipthis">
<div class="digit">1</div>
</div>
<div class="flipthis-down">
<div class="digit">1</div>
</div>
</a>
</li>
<li class="second">
<a class="derp">
<div class="flipthis2">
<div class="digit">2</div>
</div>
<div class="flipthis2-down">
<div class="digit">2</div>
</div>
</a>
</li>
</ul>
</div>
The first example reaches the final value of '4' after only 5% of the animation is done, the second example increases the z-index linearly over the specified animation duration.
Adding multiple '%' values tells your browser at what point in time what value should be reached, so your first animation is basically already finished after 5% of the time has passed.
i have created an two animation with css https://codepen.io/anon/pen/yOqxdq html an css
<img onclick="show(this);" src="http://tigersincrisis.com/wp-content/uploads/2014/01/image_21.jpg">
#keyframes shadow {
0% { opacity: 0;height: 0; transform : scale(0.1);}
100% { opacity: 1; height: 100%;transform : scale(1);}
}
#keyframes show {
0% { opacity: 0;margin: 20% auto;width: 20%;height: 20%;}
100% { opacity: 1;margin: 0; width: 100%;height: 100%;}
}
#show {
position: absolute;
left: 0;
bottom: 0;
text-align: center;
background-color: rgba(0, 0, 0, 0.76);
animation-name: show;
animation-duration: 2s;
animation-fill-mode: forwards;
z-index: 5;
}
#show-item{
position: relative;
margin: 0 auto;
animation-name: shadow;
animation-duration: 3s;
animation-fill-mode: forwards;
opacity: 0;
padding-top: 40px;
}
#show-item img{
border: 4px solid black;
}
a#closeShow{
position: relative;
float: right;
text-decoration: none;
color: #C8C8C8;
padding: 6px 10px;
background: rgba(0, 0, 0, 0.9);
border-radius: 26px;
height: 18px;
position: relative;
top: 25px;
left: 10px;
border: 2px solid #e0e0e0;
box-shadow: 0 0 2px black;
}
the problem is when user scroll the view is changed and div with position absolute stays up and box of showdow doesn't show on portion of the page down
Try position: fixed; for #show.
DEMO: FIDDLE