Right now, I have the following JQuery .animate command which moves a line image from top:0px to top:200px.
$("#scanner").animate({ top: '200px' }, 2000);
How can I animate the line image from 200px back to 0px and so on, to 200px , repetativly, infinitly?
(To clarify, the animation is like a barcode scanner).
Set it as success callback
function topInc(){
$("#scanner").animate({ top: '200px' }, 2000, topDec);
}
function topDec(){
$("#scanner").animate({ top: '0' }, 2000, topInc);
}
topInc();
In case someone needs it, the CSS solution would be:
.scan-box {
position: relative;
width: 200px;
height: 200px;
border: 1px solid black;
}
#scanner {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 10px;
background: none rgba(255, 0, 0, .5);
animation: scanning 3s linear infinite;
}
#keyframes scanning {
0% {
top: 0;
}
50% {
top: calc(100% - 10px);
}
100% {
top: 0;
}
}
<div class="scan-box">
Scanning...
<div id="scanner"></div>
</div>
As a bonus, some customization can be done via additional styles or using CSS Variables:
:root {
--data-from: 0;
--data-to: 100%;
}
.scan-box {
position: relative;
width: 150px;
height: 150px;
border: 1px solid black;
float: left;
margin: 0 10px 10px 0;
}
.scanner {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 10px;
background: none rgba(255, 0, 0, .5);
animation: scanning 3s linear infinite;
}
.scanner-ease-in-out {
animation: scanning 3s ease-in-out infinite;
}
#keyframes scanning {
0% {
top: var(--data-from);
}
50% {
top: calc(var(--data-to) - 10px);
}
100% {
top: var(--data-from);
}
}
<div class="scan-box">
Scanning...
<div class="scanner"></div>
</div>
<div class="scan-box">
Scanning...
<div class="scanner scanner-ease-in-out"></div>
</div>
<div class="scan-box">
Scanning...
<div class="scanner" style="--data-from:25%;--data-to:75%"></div>
</div>
Also on JSFiddle.
Related
I need to make a random position of image ".block" and make the auto reset of function when it flies down. Big thanks to everybody who will help. :)
var player = document.getElementById("player");
var block = document.getElementById("block");
function goleft(argument) {
player.classList.add("animatel");
setTimeout(function() {
player.classList.remove("animatel");
}, 1);
console.log("left");
}
function goright(argument) {
player.classList.add("animater");
console.log("right");
}
body {
background-color: lightblue;
}
.player {
height: 50px;
width: 50px;
position: relative;
top: 450px;
}
.block {
height: 30px;
width: 30px;
position: relative;
top: -50px;
animation: block 1s infinite linear;
}
#game {
width: 500px;
height: 500px;
border: 2px solid black;
}
#keyframes block {
0% {
top: -50;
}
100% {
top: 420;
}
}
#keyframes gor {
0% {
left: 0px;
}
50% {
left: 450px;
}
100% {
left: 0px;
}
}
#keyframes gol {
0% {
right: 450px;
}
50% {
right: 0px;
}
100% {
right: 450px;
}
}
.animater {
animation: gor 1s;
position: relative;
}
.animatel {
animation: gol 1s;
position: relative;
}
<body>
<div id="game">
<div id="player"><img class="player" src="https://via.placeholder.com/50" alt="player box"></div>
<div id="block"><img class="block" src="https://via.placeholder.com/80" alt="bogdan"></div>
<button onclick="goleft()">left</button>
<button onclick="goright()">right</button>
<script type="text/javascript" src="script.js"></script>
</div>
</body>
I'm trying to create a sidebar like this:
function show_menu(){
document.querySelector('#sidebar').classList.toggle('sidebar_open');
document.querySelector('#blackscreen').classList.toggle('blackscreen_open');
}
#hamburger {
width: 5rem;
height: 5rem;
background-color: red;
}
#header_wrapper {
display: block;
}
#sidebar {
position: fixed;
top: 0;
right: 0;
width: 0;
height: 100vh;
transition: width 0.25s;
}
.sidebar_open {
width: 50% !important;
background-color: green;
display: grid !important;
}
#blackscreen{
position:fixed;
top:0;
right:0;
width:100vw;
height:100vh;
transition: background-color 0.25s;
}
.blackscreen_open {
background-color: rgba(0, 0, 0, 0.5);
}
<div id="hamburger" onclick="show_menu()">click here</div>
<div id='blackscreen' onclick="show_menu()"></div>
<span id='sidebar'>
</span>
but the sidebar transition only works one way,
My best guess is that the transition requires 2 classes to operate
but since I've removed one class the transition back might not be taking place
so I tried the solution according to this question like this:
function show_menu(){
document.querySelector('#sidebar').classList.toggle('sidebar_open');
document.querySelector('#blackscreen').classList.toggle('blackscreen_open');
}
#hamburger {
width: 5rem;
height: 5rem;
background-color: red;
}
#header_wrapper {
display: block;
}
#sidebar {
position: fixed;
top: 0;
right: 0;
width: 0;
height: 100vh;
}
#sidebar:not(.sidebar_open) {
transition: width 0.25s;
}
.sidebar_open {
width: 50% !important;
background-color: green;
display: grid !important;
}
#blackscreen {
position: fixed;
top: 0;
right: 0;
width: 100vw;
height: 100vh;
transition: background-color 0.25s;
}
.blackscreen_open {
background-color: rgba(0, 0, 0, 0.5);
}
<div id="hamburger" onclick="show_menu()">click here</div>
<div id='blackscreen' onclick="show_menu()"></div>
<span id='sidebar'>
</span>
but as you can see even that didn't work
I'm pretty sure I'm missing something obvious but any & all help is greatly appreciated!
I'm fairly certain that the transition IS working but you're not seeing it because when it's not open, your sidebar doesn't have a background colour, and since you don't have a transition setting for your background attribute, when you remove the sidebar_open class the background colour IMMEDIATELY reverts to none and the width transition becomes invisible.
You should be able to test this by moving background-color: green; from the .sidebar_open class to the #sidebar element.
You need to have the background-color set even when the sidebar is not open. Otherwise, when the class is removed, you can no longer see it even though the width is being animated.
#sidebar {
position: fixed;
top: 0;
right: 0;
width: 0;
height: 100vh;
background-color: green;
transition: width 0.25s;
}
function show_menu() {
document.querySelector('#sidebar').classList.toggle('sidebar_open');
document.querySelector('#blackscreen').classList.toggle('blackscreen_open');
}
#hamburger {
width: 5rem;
height: 5rem;
background-color: red;
}
#header_wrapper {
display: block;
}
#sidebar {
position: fixed;
top: 0;
right: 0;
width: 0;
height: 100vh;
background-color: green;
transition: width 0.25s;
}
.sidebar_open {
width: 50% !important;
display: grid !important;
}
#blackscreen {
position: fixed;
top: 0;
right: 0;
width: 100vw;
height: 100vh;
transition: background-color 0.25s;
}
.blackscreen_open {
background-color: rgba(0, 0, 0, 0.5);
}
<div id="hamburger" onclick="show_menu()">click here</div>
<div id='blackscreen' onclick="show_menu()"></div>
<span id='sidebar'></span>
function sleep(ms) {
return new Promise (
resolve => setTimeout(resolve, ms)
);
}
async function disableButton() {
document.getElementById("actionButtons").disabled = true;
await sleep(5000);
document.getElementById("actionButtons").disabled = false;
}
document.getElementById("actionButtons").addEventListener("click", function() { disableButton(); })
#actionButtons {
position: relative;
width: 120px;
height: 30px;
margin: 5px;
top: 10px;
left: 40px;
background-color: white;
border: 1px solid black;
position: relative;
}
#actionButtons:after{
content: "";
position: absolute;
left: -1px;
right: -1px;
height: 0px;
bottom: -2px;
background: black;
}
#actionButtons:disabled:after{
height: 4px;
transform-origin: bottom;
animation: cooldown 5s linear forwards;
}
#keyframes cooldown{
from{
width: 100%;
}
to {
width: 0%;
}
}
<button id="actionButtons"></button>
This snippet is now what I've found as a solution to what I was looking for. Thank you for all the help!
I'm attempting to create a button with a cooldown.
I have javascript setup to disable then enable the button. I want a thicker full width bottom border upon being disabled, and that border to animate to a width of 0, upon which the but is reenabled.
My issue is with the CSS, getting a bottom border created upon disabled that I can then animate. Any animations I use effect the entire button, how can I just access the bottom border? Also, I want it to only animate to 0, once enabled I dont want the animation going back to full width. This is the CSS code I have:
.actionButtons {
position: relative;
width: 120px;
height: 30px;
margin: 5px;
top: 10px;
left: 40px;
border: 1px solid black;
}
.actionButtons:disabled {
content: '';
position: relative;
bottom: -6px;
width: 119px;
border-bottom: 2px solid black;
animation: cooldown 10s linear;
}
#keyframes cooldown {
0% { width: 100%; }
100% { width: 0; }
}
Any ideas for how to accomplish this?
So as i said in comment you can use pseudo element to create border and then animate scaleY() of it. In that way you have well performed fluent animation of height.
if you will animate height in px then you will get quantized value to whole one. (tested in chrome)
function sleep(ms) {
return new Promise (
resolve => setTimeout(resolve, ms)
);
}
async function disableButton() {
document.getElementById("actionButtons").disabled = true;
await sleep(5000);
document.getElementById("actionButtons").disabled = false;
}
document.getElementById("actionButtons").addEventListener("click", function() { disableButton(); })
#actionButtons {
position: relative;
width: 120px;
height: 30px;
margin: 5px;
top: 10px;
left: 40px;
border: 1px solid black;
border-bottom-width: 0;
position: relative;
}
#actionButtons:after{
content: "";
position: absolute;
left: -1px;
right: -1px;
height: 1px;
bottom: 0;
background: red;
}
#actionButtons:disabled {
content: '';
position: relative;
bottom: -6px;
width: 119px;
animation: cooldown 5s linear forwards;
}
#actionButtons:disabled:after{
height: 5px;
transform-origin: bottom;
animation: scale-down 4s linear forwards;
}
#keyframes scale-down{
from{
transform: scaleY(1);
}
to {
transform: scaleY(0);
}
}
#keyframes cooldown {
0% { width: 100%; }
100% { width: 0; }
}
<button id="actionButtons"></button>
Not exactly sure what you were trying to achieve but you can use transition css-property to auto animate css changes.
In your case, you can add,
transition: border 1s ease;
to animate your border.
I have reduced the sleep to 1s and increased the border width to 10px just for presentational purposes.
Is this what you wanted to achieve ?
function sleep(ms) {
return new Promise(
resolve => setTimeout(resolve, ms)
);
}
async function disableButton() {
document.getElementById("actionButtons").disabled = true;
await sleep(1000);
document.getElementById("actionButtons").disabled = false;
}
document.getElementById("actionButtons").addEventListener("click", function() {
disableButton();
})
#actionButtons {
position: relative;
width: 120px;
height: 30px;
margin: 5px;
top: 10px;
left: 40px;
border: 1px solid black;
transition: border 1s ease;
}
#actionButtons:disabled {
content: '';
position: relative;
bottom: -6px;
width: 119px;
border-bottom: 10px solid black;
}
<button id="actionButtons"></button>
I'm trying to change the color every image on click but they are not properly selectable because of overlying each other with positioning and z-index...
code is working as you can check by clicking on top right corner it change color...tried different methods of CSS, not JavaScript... newbie in JavaScript.
body,div,p,h1,h2,h3,h4,h5,h6,span {
margin: 0;
}
div.nav {
height: 100px;
width: 100%;
padding: 20px 0;
background-color: #615d5d;
text-align: center;
}
.screens_wrap {
display: inline-block;
margin: 0 auto;
height: 100%;
position: relative;
}
.screen_inner {
position: relative;
height: 100%;
margin: 0 auto;
width: 150px;
}
.screen {
position: absolute;
width:100px;
height: 58px;
border: 3px solid #aeaeae;
}
/* transparent style -------------------------------------------------------------------*/
.nav .screen.screen1 {
bottom: 0;
left: 0;
z-index: 3;
background-color: #00ad63;
}
.nav a .screen.screen2 {
bottom: 15px;
left: 15px;
z-index: 2;
background-color: transparent;
}
.nav a .screen.screen2:hover{
background-color: #4f025a;
}
.nav .screen.screen3 {
bottom: 30px;
left: 30px;
z-index: 1;
background-color: transparent;
}
.nav .screen.screen3:hover{
background-color: #ffec36;
}
.nav .screen2:hover, .screen3:hover {
-webkit-animation-name: hover;
-webkit-animation-duration: 1s;
animation-name: hover;
animation-duration: 4s;
-webkit-animation-fill-mode: forwards;
opacity: 1;
width: 100px;
}
.nav.nav6 {
height: 200px;
}
.screen_inner a.screenanchors:first-child img {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.screen_inner a.screenanchors:nth-child(2) img{
position: absolute;
left: 20px;
top: 20px;
z-index: 2;
}
.screen_inner a.screenanchors:nth-child(3) img{
position: absolute;
left: 40px;
top: 40px;
z-index: 3;
}
.screenanchors img {
overflow: hidden;
}
#keyframes spinning {
from {
transform: translateZ(-5em) rotateY(0deg);
}
to {
transform: translateZ(-5em) rotateY(180deg);
}
}
#keyframes skewing {
from {
transform: translateZ(-5em) skew(-3deg, -25deg);
}
to {
transform: translateZ(-5em) skew(-3deg, 0deg);
width: 100%;
height: 100px;
z-index: 9999999;
bottom: 0;
}
}
/* Standard syntax */
#keyframes hover {
0% {
margin-bottom:+10px;
bottom: unset;
}
100% {
margin-bottom:+10px;
bottom: unset;
}
}
<div class="nav nav6" style="margin-top: 25px;">
<div class="screens_wrap">
<div class="screen_inner">
<img id="imgName" src="https://imageshack.com/i/plylrZh4p" onclick="changeSrc()" width="100px">
<img id="imgName1" src="https://imageshack.com/i/pljaZE0Gp" onclick="changeSrc1()" width="100px">
<img id="imgName2" src="https://imageshack.com/i/plm9slyTp" onclick="changeSrc2()" width="100px">
</div>
</div>
</div>
<script>
function changeSrc(){
document.getElementById("imgName").src="https://imageshack.com/i/plm9slyTp";
document.getElementById("imgName1").src="https://imageshack.com/i/plylrZh4p";
document.getElementById("imgName2").src="https://imageshack.com/i/pljaZE0Gp";
}
function changeSrc1(){
document.getElementById("imgName").src="https://imageshack.com/i/pljaZE0Gp";
document.getElementById("imgName1").src="https://imageshack.com/i/plm9slyTp";
document.getElementById("imgName2").src="https://imageshack.com/i/plylrZh4p";
}
function changeSrc2(){
document.getElementById("imgName").src="https://imageshack.com/i/plylrZh4p";
document.getElementById("imgName1").src="https://imageshack.com/i/pljaZE0Gp";
document.getElementById("imgName2").src="https://imageshack.com/i/plm9slyTp";
}
</script>
it should work by clicking every where on single image, no overlay effecting clickable space...
Just to Help out others, I fixed the issue using area mapping...
I am attempting to get a panel to slide up when a trigger is selected. This is working in my snippet. The issue is that the contents within the #proposal-panel are showing, even though I have #proposal-panel set to opacity: 0, until the trigger is clicked (.active is added). It is showing at the bottom of the page.
Also, for some reason on my actual site, the panel is not sliding up. I have multiple sections, just like the example. The panel just sets at the bottom of the page. The only thing that happens when the active class is added is the z-index takes effect.
I am wanting the panel to slide from the bottom to the top when triggered. That is what I am trying to do with translateYin the active class.
Does anyone know why the contents are showing and possibly why the panel is not sliding up?
Here is a fiddle.
$('#proposal-trigger').on('click', function () {
$('#proposal-panel').addClass('active');
});
#red {
height: 100vh;
width: 100%;
background: red;
}
#blue {
height: 100vh;
width: 100%;
background: blue;
}
#proposal-trigger {
background: #3B3B3B;
width: 100px;
height: 100px;
position: fixed;
bottom: 0;
right: 200px;
}
#proposal-panel {
background: #333333;
width: 58%;
height: 100vh;
position: fixed;
padding: 15px 0;
right: 0;
bottom: -100vh;
opacity: 0;
transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#proposal-panel.active {
transition: ease 0.3s;-webkit-transition: ease 0.3s;
transform: translateY(0vh);-webkit-transform: translateY(0vh);
bottom: 0;
top: 0;
z-index: 99;
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="red"></section>
<section id="blue"></section>
<div id="proposal-trigger">
<input>
<input>
</div>
<div id="proposal-panel"></div>
Assuming it's the little black box you see at the bottom, that's from #proposal-trigger. #proposal-panel is hidden. I removed the background color from #proposal-trigger to get rid of that.
And to have the element slide up, use transform: translate().
$('#proposal-trigger').on('click', function() {
$('#proposal-panel').addClass('active');
});
#red {
height: 100vh;
width: 100%;
background: red;
}
#blue {
height: 100vh;
width: 100%;
background: blue;
}
#proposal-trigger {
width: 100px;
height: 100px;
position: fixed;
bottom: 0;
right: 200px;
}
#proposal-panel {
background: #333333;
width: 58%;
height: 100vh;
position: fixed;
padding: 15px 0;
right: 0;
opacity: 0;
transition: 0.3s;
transform: translateY(100%);
bottom: 0;
}
#proposal-panel.active {
transform: translateY(0);
z-index: 99;
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="red"></section>
<section id="blue"></section>
<div id="proposal-trigger">
<input>
<input>
</div>
<div id="proposal-panel"></div>
You don't need to use translateY to do this animations, just need to use top and bottom with the fixed position. And remove the background-color from #proposal-trigger so it doesn't show anymore
Here is a demo
$('#proposal-trigger').on('click', function () {
$('#proposal-panel').addClass('active');
});
<section id="red"></section>
<section id="blue"></section>
<div id="proposal-trigger">
<input>
<input>
</div>
<div id="proposal-panel"></div>
#red {
height: 100vh;
width: 100%;
background: red;
}
#blue {
height: 100vh;
width: 100%;
background: blue;
}
#proposal-trigger {
width: 100px;
height: 100px;
position: fixed;
bottom: 0;
right: 200px;
}
#proposal-panel {
background: #333333;
width: 58%;
position: fixed;
padding: 15px 0;
right: 0;
bottom: 0;
top: 100%;
opacity: 0;
transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#proposal-panel.active {
transition: ease 0.3s;-webkit-transition: ease 0.3s;
bottom: 0;
top: 0;
z-index: 99;
opacity: 1;
}