ReactJS Click and Hold Button - javascript

I'm creating a React App which is able to shut down physical devices (like power sources etc.)
For every device, I have a shutdown button which needs to be pressed and hold for 3 seconds to activate. In addition to that, I need a animation that shows the remaining time of this 3 seconds to the user: which exactly looks like :
http://sonsoleslp.github.io/react-click-n-hold/
However, I am getting errors when I import the CSS to my CSS file that is
#-webkit-keyframes fill {
to {
background-size: 100% 0;
}
}
#keyframes fill {
to {
background-size: 100% 0;
}
}
.cnh_holding button {
background: -webkit-linear-gradient( white , white) rgb(255,215,235) no-repeat 0 0;
background: linear-gradient( white , white) rgb(255,215,235) no-repeat 0 0;
mix-blend-mode: multiply;
background-size: 100% 100%;
-webkit-animation: fill 2s forwards;
animation: fill 2s forwards;
}
Whole CSS code is up there.
I tried changing the CSS but animation does not work this time. Is there any suggestion?

It works if you add from{} before to{}
#-webkit-keyframes fill {
from {background-size: 100% 100%;}
to {
background-size: 100% 0;
}
}
#keyframes fill {
from {background-size: 100% 100%;}
to {
background-size: 100% 0;
}
}
.cnh_holding button {
background: -webkit-linear-gradient( white , white) rgb(255,215,235) no-repeat 0 0;
background: linear-gradient( white , white) rgb(255,215,235) no-repeat 0 0;
mix-blend-mode: multiply;
background-size: 100% 100%;
-webkit-animation: fill 2s forwards;
animation: fill 2s forwards;
}
<div class="cnh_holding"><button>CLICK</button></div>

Related

When background image scaled, it starts to flicker in Chrome

I have a div with a background image on it. When it has simple transform scale animation, it starts to flicker in Google Chrome and Opera.
Here is a simple exmple:
http://codepen.io/anon/pen/bWpNYq
CSS:
body {
height: 100vh;
overflow: hidden
}
div {
width: 100%;
height: 100%;
background-color: #f00;
background-position: 50% 50%;
background-image: url(".....jpg");
background-size: cover;
}
Script:
TweenLite.set('div', {
backfaceVisibility: 'hidden',
perspective: 1000
});
TweenLite.fromTo('div', 10, {
scale: 1.1
}, {
scale: 1
});
When the image is a simple img element, the same scale animation works fine. The transition is smooth:
http://codepen.io/anon/pen/pPyvdp
The examples use GASP for animations. I need a solution which use GSAP to scale the div with better result.
Do you any idea how to make it smooth with background image?
Try this:
Add transition: all 1s linear; so it scale smoothly.
body {
height: 100vh;
overflow: hidden
}
div {
width: 100%;
height: 100%;
background-position: 50% 50%;
background-image: url("https://smartslider3.com/wp-content/uploads/2015/10/slide52.jpg");
background-size: cover;
transition: all 1s linear;
}
Hey maybe you can try out this css animation. For better browser support add
-webkit-animation
-moz-animation
-o-animation
body {
height: 100vh;
overflow: hidden
}
div {
width: 100%;
height: 100%;
background-position: 50% 50%;
background-image: url("https://smartslider3.com/wp-content/uploads/2015/10/slide52.jpg");
background-size: cover;
-webkit-animation: animate 5s forwards;
animation: animate 5s forwards;
}
#-webkit-keyframes animate {
0% { transform: scale(1); }
100% { transform: scale(1.1); }
}
#keyframes animate {
0% { transform: scale(1); }
100% { transform: scale(1.1); }
}
<div>
</div>
CSS3 allows you to add native transition to your transformations. Try to use code below:
document.body.addEventListener('click', function(){
var div = document.getElementById('img');
div.style.transform = 'scale(.5)';
})
body {
height: 100vh;
overflow: hidden
}
div {
width: 100%;
height: 100%;
background-position: 50% 50%;
background-image: url("https://smartslider3.com/wp-content/uploads/2015/10/slide52.jpg");
background-size: cover;
transition: transform 30s;
}
<div id="img"></div>
It uses css property "transition" and starts transition on body click.
Just use css, way better. If you open up your inspector you'll see that your tweenlite code is setting/ updating the style attribute of your div very fast with this piece of code: transform: translate3d(0px, 0px, 0px) scale(1.00212, 1.00212);.
This is JS calculating something and then telling CSS what to do (very basic explanation). CSS can do this on it's own. Why do you want to stick with your GSAP engine so badly?

Cross-fading background images with Javascript [duplicate]

I've placed three background images in a div. I'm trying to make all three of them cycle through on a timer that fades in and out. I've actually found similar quesitons on here, but I cannot get them to work. Anyway, here's the relevant code:
HTML
<div id="slideshow">
</div>
CSS
#slideshow{
position:relative;
top:0;
width:100%;
height:635px;
background:
url("car4.jpg"),
url("city.jpg"),
url("host3.jpg");
background-repeat:no-repeat;
background-size:100%;
}
I'm hoping to do this in CSS, but I'm guessing it requires JQUERY; which I don't have much experience in. But that's OK.
I'd really appreciate any help. Let me know if I can give you any more information. Thank you.
*** I've tried css animations but I didn't get the results. Here's what I changed it to:
#slideshow{
position:relative;
top:0;
width:100%;
height:635px;
background:url("car4.jpg");
background-repeat:no-repeat;
background-size:100%;
animation-name: one;
animation-duration: 4s;
}
#keyframes one {
from {background: url("car4.jpg");}
to {background: url("city.jpg");}
}
This looks correct, but it still only showing the original image "car4.jpg"
Thanks
Try creating array from css background-image value , fading in , fading out first background image ; removing faded out background image from array , placing removed background image at last index of array ; resetting background image value to array joined by comma; fading in , fading out next , now first indexed background image ; cycling through fading in , fading out all background images ; recursively calling function , to attempt to create displayed effect of an "infinite" fade in , fade out "slideshow"
$(function() {
// set `$.fx.interval` at `0`
$.fx.interval = 0;
(function cycleBgImage(elem, bgimg) {
// `elem`:`#slideshow`
// set, reset, delay to `1000` after background image reset
elem.css("backgroundImage", bgimg)
// fade in background image
.fadeTo(3000, 1, "linear", function() {
// set `delay` before fadeing out image
// fade in background image
$(this).delay(3000, "fx").fadeTo(3000, 0, "linear", function() {
// split background image string at comma , creating array
var img = $(this).css("backgroundImage").split(","),
// concat first background image to `img` array,
// remove first background image from `img` array
bgimg = img.concat(img[0]).splice(1).join(",");
// recursively call `cycleBgImage`
cycleBgImage(elem, bgimg);
});
});
}($("#slideshow")));
});
body {
width: 400px;
height: 400px;
}
/* set `#slideshow` parent background color */
.slideshow {
background: #000;
display:block;
width:inherit;
height:inherit;
}
#slideshow {
width: 100%;
height: 100%;
display: block;
opacity: 0.0;
background-color: #000;
/*
set background images as `url(/path/to/image)` here,
separated by commas
*/
background-image: url("http://lorempixel.com/400/400/cats/?1"),
url("http://lorempixel.com/400/400/animals/?2"),
url("http://lorempixel.com/400/400/nature/?3"),
url("http://lorempixel.com/400/400/technics/?4"),
url("http://lorempixel.com/400/400/city/?5");
background-size: cover, 0px, 0px, 0px;
/* set transtitions at 3000ms
-webkit-transition: background-image 3000ms linear;
-moz-transition: background-image 3000ms linear;
-ms-transition: background-image 3000ms linear;
-o-transition: background-image 3000ms linear;
transition: background-image 3000ms linear;
*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="slideshow">
<div id="slideshow"></div>
</div>
jsfiddle http://jsfiddle.net/gkjL6mdj/15/
From the answer here and suggestion from #guest271314 try defining CSS 3 key frames for animation:
#slideshow{
position:relative;
top:0;
width:100%;
height:635px;
background:
url("car4.jpg"),
url("city.jpg"),
url("host3.jpg");
background-repeat:no-repeat;
background-size:100%;
-moz-animation: swim 2s linear 0s infinite;
-webkit-animation: swim 2s linear 0s infinite;
animation: swim 2s linear 0s infinite;
}
#-moz-keyframes swim {
from { background-position: 200% 0, 0 0; }
to { background-position: -100% 0, 0 0; }
}
#-webkit-keyframes swim {
from { background-position: 200% 0, 0 0; }
to { background-position: -100% 0, 0 0; }
}
#keyframes swim {
from { background-position: 200% 0, 0 0; }
to { background-position: -100% 0, 0 0; }
}
CSS
#background-slideshow {
transition: background 1.5s ease;
background-position: center top, center top, center top;
background-size: cover, cover, cover;
background-repeat: no-repeat, no-repeat, no-repeat;
background-image: url(img/background-1.jpg), url(img/background-2.jpg), url(img/background-3.jpg);
}
JS
var i = 1;
setInterval(function() {
e = document.getElementById('background-slideshow');
switch (i) {
case 0:
e.style.backgroundPosition = 'center top, center top, center top';
break;
case 1:
e.style.backgroundPosition = window.innerWidth + 'px top, center top, center top';
break;
case 2:
e.style.backgroundPosition = window.innerWidth + 'px top, ' + window.innerWidth + 'px top, center top';
break;
}
i++;
if (i > 2) i = 0;
}, 3000);

CSS bounce hover animation jitters

I have a bounce animation occur on hover on my page (on an image of an arrow). However, if the cursor is near the top edge, it will generally jitter, due to the change of the position of the content area from what I can gather. The image will move, bringing your mouse out of the hover area, resetting the image position abruptly, and repeating until you move the mouse.
Does anyone have any idea how to fix this? Can be CSS/Javascript/some other library, doesn't matter to me.
.arrow-main {
position: absolute;
left: 0;
right: 0;
bottom: 1%;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
width: 90px;
}
.bounce:hover {
-webkit-animation:bounce .9s infinite;
-moz-animation:bounce .9s infinite;
-o-animation:bounce .9s infinite;
animation:bounce .9s infinite;
}
#-webkit-keyframes bounce {
0% { bottom:10px; }
50% { bottom:0px; }
100% { bottom:10px; }
}
#-moz-keyframes bounce {
0% { bottom:10px; }
50% { bottom:0px; }
100% { bottom:10px; }
}
#-o-keyframes bounce {
0% { bottom:10px; }
50% { bottom:0px; }
100% { bottom:10px; }
}
#keyframes bounce {
0% { bottom:10px; }
50% { bottom:0px; }
100% { bottom:10px; }
}
I actually made a codepen to try and illustrate the issue, but it doesn't jitter at all... I'm using Chrome.
EDIT: Just tried the codepen again, and it jitters as it should.
EDIT 2: I modified the codepen to try out the comments so far, and if you hold your cursor near the bottom of the arrow img, you should get an idea of what I am trying to combat.
CodePen

fullpage.js - how to create progress bar for slides when autoplay is on

I am using fullpage.js and have the basics setup ok. I am using the autoslide function
afterRender: function() {
idInterval = setInterval(function() {
$.fn.fullpage.moveSlideRight();
}, 2000);
I would like to add a timer progress-bar when in the auto slideshow mode so the users know there is more.
I have a codepen and with fullpage example and a working code for the progressbar. https://codepen.io/anon/pen/OXWPje
any suggestion on how to incorporate a progress bar for each slide ?
thanks
so the best way I could figure this out is to use a external ccs animation to create a looped progress bar inside of the slide that matches the timer set in javascript.
something like
https://codepen.io/anon/pen/aZpReg
I picked the loading code from https://codepen.io/sriramsitaraman/pen/zBNmgX
.anim9 {
margin: 0 auto 2em auto;
width: 600px;
height: 2px;
background: -webkit-linear-gradient(left, #f00, #f00 10%, #000 10%);
background: linear-gradient(to right, #f00, #f00 10%, #000 10%);
-webkit-animation: anim9 6s linear infinite;
animation: anim9 6s linear infinite;
}
#-webkit-keyframes anim9 {
to {
background-position: 600px 0;
}
}
#keyframes anim9 {
to {
background-position: 600px 0;
}
}
thanks

How to create a stepped animation from a strip?

I'm animating an element background, using a strip - a set of image blocks in a single image - by using only css keyframes. But it doesn't work properly as I don't want the transitions to be linear but in steps:
http://jsbin.com/muyeguba/4/
I tried the "step-end" that shows more or less what I want to achieve. I'm currently reading docs ( http://www.w3.org/TR/css3-transitions/ ) and it seems this is possible, by creating the timing function ourselves ?
Is it possible ? or Would a JS solution be better ?
Here's my CSS for a loading animation from my site. Since you did not provide any images, I'll provide mine as an example.
Pay attention to the animate property. The synatx is as follows:
animation: name duration timing-function delay iteration-count direction;
In my case direction is omitted.
Image:
.loader {
display: inline-block;
width: 32px !important;
height: 32px !important;
background-image: url("loader.png");
background-repeat: no-repeat;
background-size: 2400px 32px;
animation: play16 3.25s steps(75) infinite;
}
#keyframes play32 {
from { background-position: 0px; }
to { background-position: -2400px; }
}
In the steps(75), the number has to match the amount of 'frames' your sprite contains, otherwise the animation will cut off or some frames will repeat.
I use prefix-free to eliminate the need for vendor prefixes. You can either use this, or prefix the code manually.
So, I was doing it wrong:
.animate {
background-image: url(image-strip-with-a-11-block);
width: 53px;
height: 78px;
background-position: 0, 0;
animation:play 1s infinite steps(10);
}
#keyframes play {
0% { background-position: 0px; }
25% { background-position: 100px, 0px; }
50% { background-position: 200px, 0px; }
75% { background-position: 300px, 0px; }
100% { background-position: 400px, 0px; }
}
Should be instead:
.animate {
background-image: url(image-strip-with-a-11-block);
width: 53px;
height: 78px;
background-position: 0, 0;
animation:play 1s infinite steps(10);
}
#keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}

Categories

Resources