I have a situation where I multiple divs can have a class with a css animation, but in my situation the classes represent a state. Since these can change, the state that uses the css animation can be set onto the div at a different time than another div. With the yellow blinking effect I now have for that state, you see the multiple divs blink at different moments instead of together simultaneously.
So the question is, is there a way to make it so that the divs start blinking on the same moment instead, like that you can start the animation at .000 milliseonds?
I have added a snippet to simulate my problem:
function changeState(id) {
let stateElement = document.getElementById(id);
stateElement.classList.remove('green');
stateElement.classList.add('yellow-blinking');
stateElement.innerText = 'WARN';
}
setTimeout(() => changeState('state1'), 459);
setTimeout(() => changeState('state2'), 1321);
setTimeout(() => changeState('state3'), 2778);
.state {
margin: 8px;
padding: 4px 0px 0px;
border: 2px solid #000000;
border-radius: 3px;
font-family: Arial;
font-size: 14px;
font-weight: bold;
height: 20px;
width: 80px;
text-align: center;
}
.yellow-blinking {
background: #ffff00;
color: #000000;
animation: yellowflash-small 1s linear 0s infinite;
-webkit-animation: yellowflash-small 1s linear 0s infinite;
}
#keyframes yellowflash-small {
0% { background: #ffff00; }
49% { background: #ffff00; }
50% { background: #ffffff; }
99% { background: #ffffff; }
}
#-webkit-keyframes yellowflash-small {
0% { background: #ffff00; }
49% { background: #ffff00; }
50% { background: #ffffff; }
99% { background: #ffffff; }
}
.green {
background: #00d200;
color: #000000;
}
<div class="state green" id="state1">OK</div>
<div class="state green" id="state2">OK</div>
<div class="state green" id="state3">OK</div>
As you can see, the blinking is not synchronised with each other. Is there a way to make them blink together, regardless of when it gets to that state?
Apply the animation initially to the element and animate only the background-color then use background-image to have the initial green color. Like that the animation will start running behind the green and we simply show it by removing the green layer
function changeState(id) {
let stateElement = document.getElementById(id);
stateElement.classList.remove('green');
stateElement.innerText = 'WARN';
}
setTimeout(() => changeState('state1'), 459);
setTimeout(() => changeState('state2'), 1321);
setTimeout(() => changeState('state3'), 2778);
.state {
margin: 8px;
padding: 4px 0px 0px;
border: 2px solid #000000;
border-radius: 3px;
font-family: Arial;
font-size: 14px;
font-weight: bold;
height: 20px;
width: 80px;
text-align: center;
animation: yellowflash-small 1s linear infinite;
}
#keyframes yellowflash-small {
0% {
background-color: #ffff00;
}
49% {
background-color: #ffff00;
}
50% {
background-color: #ffffff;
}
99% {
background-color: #ffffff;
}
}
.green {
background-image: linear-gradient(#00d200 0 0);
color: #000000;
}
<div class="state green" id="state1">OK</div>
<div class="state green" id="state2">OK</div>
<div class="state green" id="state3">OK</div>
Related
I'm trying to make this news item component interface for a blog. Each item shows a story image and some of the text of the article. Rolling over the news item should "scrunch up" the image and reveal more of the text of the article. I can't see why my animation does not hold when you rollover the item, and then it resets completely before performing the "unscrunching."
There are keyframe animations that attach and detach to the item:
#keyframes scrunch {
from {
height: 50%;
}
to {
height: 10%;
}
}
#keyframes unscrunch {
from {
height: 10%;
}
to {
height: 50%;
}
}
.scrunch {
animation: scrunch 1s;
}
.unscrunch {
animation: unscrunch 1s;
}
Then I'm just adding and removing those classes from the news item class list:
const scrunchyBox = document.getElementById('scrunchyBox1');
const children = scrunchyBox.childNodes;
console.dir(children);
const scrunchyBoxHead = children[1];
scrunchyBox.addEventListener('pointerover', (event) => {
scrunchyBoxHead.classList.remove('unscrunch');
scrunchyBoxHead.classList.add('scrunch');
});
scrunchyBox.addEventListener('pointerout', (event) => {
scrunchyBoxHead.classList.remove('scrunch');
scrunchyBoxHead.classList.add('unscrunch');
});
Seems basic, but whatever I'm doing looks gross. Everything I've done is over at my Codepen.
You can use the transition property with the :hover pseudo-class. This will be the same that you have tryed to do with javascript.
To achieve this, just add few lines to your css file.
/* new block */
.scrunchyBox:hover .sectionHead {
height: 10%;
}
/* new block */
.scrunchyBox:hover .datedot {
transform: scale(0.45) translate(60px, -72px);
}
.scrunchyBox > .sectionHead {
transition: all 0.5s ease-in-out; /* new line */
}
.datedot {
transition: all 0.5s ease-in-out; /* new line */
}
body {
background-color: #ccc;
font-size: 18px;
}
.scrunchyBox {
color: #333;
position: relative;
background-color: #fff;
width: 400px;
height: 400px;
margin: 0 auto;
padding: 20px;
overflow: hidden;
filter: drop-shadow(4px 4px 4px #333);
}
/* new block */
.scrunchyBox:hover .sectionHead {
height: 10%;
}
/* new block */
.scrunchyBox:hover .datedot {
transform: scale(0.45) translate(60px, -72px);
}
.scrunchyBox > .sectionHead {
width: 400px;
height: 250px;
background-color: #3ab7f4;
padding: 0;
margin: 0 auto;
transition: all 0.5s ease-in-out; /* new line */
}
.datedot {
position: absolute;
top: 30px;
right: 30px;
background-color: rgba(0, 0, 0, 0.3);
padding: 12px;
border-radius: 60px;
width: 60px;
height: 60px;
transition: all 0.5s ease-in-out; /* new line */
}
.datedot > span {
font-family: 'Trebuchet MS', sans-serif;
color: rgba(255, 255, 255, 1);
text-align: center;
display: block;
margin: 0;
}
.datedot > span.day {
font-size: 2.2em;
font-weight: bold;
line-height: 0.8em;
padding: 0;
}
.datedot > span.month {
font-size: 1.3em;
font-weight: normal;
text-transform: uppercase;
padding: 0;
}
.scrunchyBox > h2 {
font-family: 'Trebuchet MS', sans-serif;
font-size: 1.2em;
line-height: 1em;
padding: 0;
}
.scrunchyBox > p {
font-family: 'Georgia', serif;
font-size: 1.4em;
}
<div id="scrunchyBox1" class="scrunchyBox">
<div class="sectionHead">
<div class="datedot">
<span class="day">30</span>
<span class="month">Oct</span>
</div>
</div>
<h2>A Headline for the Scrunchy Box</h2>
<p>
This is some text that would normally be some text that the reader would want to see more of. It gets cut off here by other elements, but then other elements "scrunch" in order to reveal more of the text for a preview.
</p>
</div>
You can retain the animation in its final state using animation-fill-mode: forwards; as described in answer to this question: Maintaining the final state at end of a CSS3 animation
It will still look janky if you remove pointer from the box mid-animation. I am not sure why you don't want to simply use CSS :hover with transition.
So I have a door animation using vanilla JS with CSS for the styling. Is there a way to hid the backside of the door when it's open?
As well as making the door not clickable. (I don't have it as toggle, but you can still interact with the button.)
Basically I just want a back background and not see the backwards "1" when the door is open.
Any ideas on how to make that happen? I imagine it's adding another div with style, but I really am not sure after goofing around with this for a while.
Cheers!
Codepen here: https://codepen.io/LovelyAndy/pen/LYZKEvB
HTML:
<div>
<div class="door-back">
<button class="door">1</button>
</div>
</div>
CSS
.door-back {
position: relative;
height: 105px;
width: 105px;
background-image: url("https://i.redd.it/e84gxikhoul21.jpg");
border-radius: 50px;
background-size: cover;
margin: 0 auto;
margin-top:50px;
}
.door {
position: absolute;
height: 105px;
width: 105px;
font-size: 1.5em;
color: white;
border: 2px solid goldenrod;
border-radius: 50px;
background: black;
cursor: pointer;
transform-origin: left;
transition: all 0.5s ease-in-out;
}
.doorOpen {
transform: perspective(1200px) translateZ(0px) translateX(0px) translateY(0px)
rotateY(-150deg);
}
.d1 {
top: 100px;
left: 60px;
}
JS
const doorEl = document.querySelector(".door");
doorEl.addEventListener('click', openTheDoor)
function openTheDoor() {
doorEl.classList.add("doorOpen");
}
Possible solution: change the text color on transition:
const doorEl = document.querySelector(".door");
doorEl.addEventListener('click', openTheDoor)
function openTheDoor() {
doorEl.classList.toggle("doorOpen");
}
.door-back {
position: relative;
height: 105px;
width: 105px;
background-image: url("https://i.redd.it/e84gxikhoul21.jpg");
border-radius: 50px;
background-size: cover;
margin: 0 auto;
margin-top: 50px;
}
.door {
position: absolute;
height: 105px;
width: 105px;
font-size: 1.5em;
color: white;
border: 2px solid goldenrod;
border-radius: 50px;
background: black;
cursor: pointer;
transform-origin: left;
transition: transform .5s ease-in-out,
color 0s .3s linear
}
.doorOpen {
transform: perspective(1200px) translateZ(0px) translateX(0px) translateY(0px) rotateY(-150deg);
color:black;
}
.d1 {
top: 100px;
left: 60px;
}
<div>
<div class="door-back">
<button class="door">1</button>
</div>
</div>
You can achieve both disable the click on door button and not to show the '1' after the door is open in CSS.
.doorOpen {
...other css
// you just need add this property which disables click
pointer-events: none;
color: black;
}
Making the text color black will make it complete black.
If you completely want to remove the text '1' then you can do like below.
const doorEl = document.querySelector(".door");
doorEl.addEventListener('click', openTheDoor)
function openTheDoor() {
doorEl.classList.add("doorOpen");
doorEl.textContent='';
}
These are two ways I can think of.
You can try to do something like this https://codepen.io/dom-the-dev/pen/MWeqaJq just have a button on the opposite side that acts like the back of the door
<div>
<div class="door-back">
<button class="door front">1</button>
<button class="door back">2</button>
</div>
I have made a button that basically will go on top of a leaflet map. It uses animate.css and wow.js to animate certain things and it works ok. It is made up of a div, an image, text and a span. What I need to do is make the whole thing into a div or something that I can resize and move without changing all the CSS etc. If I want to add an extra 2 or 3 buttons it will be a lot of hassle. I need to be able to move and resize depending on the screen resolution. I want to be able to use media queries to change just one thing like the size and position of the div but maintain the functionality.
I have tried putting everything into a new div but no joy!
I have included a fiddle http://jsfiddle.net/eLron3d2/1/
The HTML is :
<div id="start_box" class ="animated bounceIn">
<img id="target" class="targetimg" src="https://www.faces2places.co.uk/img/target.png" onclick="golive()"></img><button id="startbutton" type="button" class="btn-target animated bounceInLeft"></button>
<span id="status" class="btn-target-name animated fadeIn delaydn">START</span>
</div>
The CSS is :
#start_box {
position: fixed;
top: 10px;
/* right: 20px; */
left: 10px;
z-index: 2;
border: 2px solid;
border: radius:20px;
border-radius: 5px;
padding: 0px;
box-shadow: 0px 0px 0px 0px;
width: 80px;
height: 80px;
background-color: white;
border-color: #969696;
}
.targetimg {
position:relative;
top: 4px;
left: 8px;
border-radius: 2.5px;
display:flex;
width:60px;
height:60px;
animation-duration: 30000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.btn-target {
background-color: white !important;
position: fixed;
width: 72px;
height: 16px;
top: 67.5px;
left: 2.2px;
color: #000000;
border: 2px solid #969696;
border-radius: 5px 5px 5px 5px
}
.btn-target-name {
color:green;
font-family: 'Passion One', cursive;
display: block;
width: 76px;
top: 70.5px;
font-size: 12px;
font-weight:0;
text-align: center;
position: fixed;
}
.delaydn {
-webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */
animation-delay: 1s;
}
.goliveactive {
animation-duration: 30000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: spin;
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
And the JS is
window.live = false;
window.directions = true;
function golive() {
if (window.live === false) {
$("#target").addClass("goliveactive");
$('#status').css('color', '#ff3258');
$('#status').text('FINISH');
window.live = true;
} else if (window.live = true) {
$("#target").removeClass("goliveactive ");
$('#status').css('color', 'green');
$('#status').text('START');
window.live = false;
}
}
Ok, I have done it like so
http://jsfiddle.net/eLron3d2/2/
I wrapped everything into a button and changed pretty much everything to % not fixed sizes. I can change the size and position of it in the .target css
It works pretty good apart from I would like to change the font size to automatically change to fit but that one thing is easy to do with media queries, at least I don't have to change everything. The only thing is, the font does'nt load and show properly in jsfiddle but works on all browsers I have checked it with.
The HTML for 2 buttons is
<button class="btn target animated fadeIn"><span id="btn1" class="btnimage animated rubberBand" onclick="golive()"></span><span class="btn1textbox animated bounceInLeft"></span><span id="status" class="btn1text animated delaydn fadeIn">START</span></button>
<button class="btn target animated fadeIn delaybox"><img class="driverimg animated fadeIn" src="http://www.faces2places.co.uk/img/jules.jpg" onclick="alert('FUCKME')"></img><span class="btn1textbox animated bounceInLeft delaybox"></span><span id="status" class="btn1text animated delaydn2 fadeIn">JUSTIN.C</span></button>
The CSS is
.btn {
position: relative;
display: block;
margin-bottom:12px;
color: white;
font-size: 16px;
cursor: pointer;
border: 2px solid;
padding: 0px;
box-shadow: 0px 0px 0px 0px;
width:80px;
height:80px;
background-color: white;
border-color: #969696;
border-radius: 5px 5px 5px 5px
}
.target {
left:100px;
width:80px;
height:80px;
top:100px;
}
.btn1textbox {
position: absolute;
left: 5%;
top: 92%;
display: inline-block;
color: white;
border: 2px solid;
width: 86.5%;
height: 16%;
background-color: white;
border-color: #969696;
border-radius: 5px 5px 5px 5px
}
/* Darker background on mouse-over */
.btn:hover {
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
.btnimage {
position: relative;
background:url(https://www.faces2places.co.uk/img/target.png) no-repeat center;
display: inline-block;
width:100%;
height:100%;
background-size: 80% 80%;
top:-4px;
}
.btndriver {
position: relative;
display: inline-block;
width:100%;
height:100%;
background-size: 80% 80%;
}
.btn1text {
font-family: 'Passion One', cursive;
color:green;
position: relative;
display: inline-block;
width:100%;
height:100%;
top: -12px;
font-size: 13px;
}
.goliveactive {
animation-duration: 30000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: spin;
}
.delaydn {
-webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */
animation-delay: .8s;
}
.delaybox {
-webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */
animation-delay: .5s;
}
.delaydn2 {
-webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */
animation-delay: 1.3s;
}
button:focus {outline:0;}
.driverimg {
position:relative;
top:-1;
border-radius: 2.5px;
display:inline-block;
width:100%;
height:100%;
}
and the JS is
new WOW().init();
window.live = false;
window.directions = true;
function golive() {
if (window.live === false) {
$("#btn1").addClass("goliveactive");
$('#status').css('color', '#ff3258');
$('#status').text('FINISH');
window.live = true;
} else if (window.live = true) {
$("#btn1").removeClass("goliveactive ");
$('#status').css('color', 'green');
$('#status').text('START');
window.live = false;
}
}
How would I go about adding an failure state with an X instead of an tick to the following? I don't really get how the tick is generated.
The jquery and html is no problem just the actual generation of the tick and how this would be altered to display an X.
<div class="circle-loader">
<div class="checkmark draw"></div>
</div>
<p><button id="toggle" type="button" class="btn btn-success">Toggle Completed</button></p>
body {
padding: 5em;
text-align: center;
}
h1 {
margin-bottom: 1em;
}
// Define vars we'll be using
$brand-success: #5cb85c;
$loader-size: 8em;
$check-height: $loader-size/2;
$check-width: $check-height/2;
$check-left: ($loader-size/6 + $loader-size/12);
$check-thickness: 2px;
$check-color: $brand-success;
.circle-loader {
margin: 0 0 30px 10px;
border: $check-thickness solid rgba(0, 0, 0, 0.2);
border-left-color: $check-color;
animation-name: loader-spin;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
position: relative;
display: inline-block;
vertical-align: top;
}
.circle-loader,
.circle-loader:after {
border-radius: 50%;
width: $loader-size;
height: $loader-size;
}
.load-complete {
-webkit-animation: none;
animation: none;
border-color: $check-color;
transition: border 500ms ease-out;
}
$('#toggle').click(function() {
$('.circle-loader').toggleClass('load-complete');
$('.checkmark').toggle();
});
https://codepen.io/scottloway/pen/zqoLyQ
Before I get into this, I'm sure that there is an answer to my question. I am new to coding, so I don't understand how to plug in the information to make it work on my site. I am trying to get a portfolio like this site: http://gomedia.com/our-work/. Here is my site so you can see the code: http://www.mattsusla.graphics. I have tried for an hour with no success. Please Help!
It's best to do this with native css. Simply call the element's hover state with :hover
button { background: blue; }
button:hover { opacity: 0.5; }
<button>Change Opactiy on Hover</button>
Let's look at the code you'd need in JavaScript
var button = document.getElementById("my-button");
button.addEventListener("mouseover", function() {
button.style.opacity = 0.5;
});
button.addEventListener("mouesout", function() {
button.style.opacity = 1.0;
});
You dont need javascript for this.
Its simple done with css:
img:hover {
opacity: 0.5;
}
if you want it to be more smooth, you can add a transition. this is done with css, too. only use javascript if you really need it!
img {
opacity: 1;
}
img:hover {
opacity: 0.5;
-webkit-transition: opacity 1s;
transition: opacity 1s;
}
I am guessing that you are looking for the same functionality that is in the first site? If that is correct this will do it for you. See fiddle: https://jsfiddle.net/8sphkqkn/1/
html
<div id="box">
<div id="overlay">
<span id="text">Boss Dog Brewing Co.</span>
</div>
</div>
css
#box {
width: 300px;
height: 200px;
box-shadow: inset 1px 1px 40px 0 rgba(0, 0, 0, .45);
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
margin: 5% auto 0 auto;
background: url(http://s3.gomedia.us/wp-content/uploads/2015/03/GO_BossDogBrewery-1-e1430266175600-300x300.jpg);
background-size: cover;
border-radius: 5px;
overflow: hidden;
}
#overlay {
background: rgba(0, 0, 0, .75);
text-align: center;
padding: 45px 0 66px 0;
opacity: 0;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
width: 300px;
height: 200px;
}
#box:hover #overlay {
opacity: 1;
}
#text {
font-family: Helvetica;
font-weight: 900;
color: rgba(255, 255, 255, .85);
font-size: 16px;
}