Develop Reference

How do I roll a image like this in js/css

I wanna zoom in & roll(left to right one by one) an image like this:
(The image is to large to upload)
https://i.imgur.com/sQG1chQ.png
It is for a coinflip system & I want it to go vertically instead of horizontal:)
& you will need to zoom in to see the coins.

Pure CSS:
You could do this with keyframes rule using CSS. Animations will take multiple parameters by dividing them with a comma, so you could make an animation for the flip and another for the move.
For the flip a transform: rotateX will do the trick, for the move a position of relative with a top position starting before top pages fold something like negative height of the image -2rem in my case, and moving to a calculated vh view-height off the bottom fold calc(100vw + 2rem).
EDIT:
I have added a new image and adjusted the position of both images to absolute, adjusting their left positions to be the same and then did some tweaking to the #keyframes tween for both image elements. Basically we toggle opacity # 90 degree flip points of each image within the tween, also adjust the rotation to show both images right side up on their respective flips. This is done by starting out on the second image tween 0% to rotate(180deg), then we increment through each 25% by 90deg.
#cont {
height: calc(100vh - 1rem);
overflow-y: hidden;
display: flex;
justify-content: center;
position: relative;
}
#img {
border: 1px black solid;
border-radius: 50%;
height: 2rem;
width: 2rem;
transition: all 1s linear;
perspective: 1000;
transform-style: preserve-3d;
animation: front 1200ms linear infinite,
move 5000ms linear infinite;
position: absolute; /* changed from relative to absolute */
left: calc(50vw - 1rem); /* center 50vw minus half the width of image */
}
/* Added a second image and adjusted rotate degrees in animation
keyframes tween to be exactly 180 degrees offset from 0
so second image looks like it is face up on turn,
Also added a opacity toggle when between the two images at 90deg and 277deg
when they are horizontally aligned on the z axis with top and bottom */
#img2 {
border-radius: 50%;
border: 1px black solid;
height: 2rem;
width: 2rem;
transition: all 1s linear;
perspective: 1000;
transform-style: preserve-3d;
animation: back 1200ms linear infinite,
move 5000ms linear infinite;
position: absolute; /* changed from relative to absolute */
left: calc(50vw - 1rem); /* center 50vw minus half the width of image */
}
#keyframes front {
0% {
transform: rotateX(0deg);
opacity: 1; /* added opacity starting at 1 0% on first image */
}
24% {
opacity: 1;
}
/* switch opacity to 0 here as neither image will be seen as it is 90deg */
25% {
transform: rotateX(90deg);
opacity: 0; /* opacity 0 here */
}
50% {
transform: rotateX(180deg); /* continue rotation */
}
74% {
opacity: 0; /* opacity 0 here */
}
/* switch opacity back on here */
75% {
transform: rotateX(270deg);
opacity: 1;
}
100% {
transform: rotateX(360deg);
opacity: 1;
}
}
#keyframes back {
0% {
/* start # 180deg so image is show face up on flip at this
point it will be upside down on the x axis */
transform: rotateX(180deg);
opacity: 0; /* start with opacity 0 */
}
24% {
opacity: 0;
}
/* switch this image to opacity 1 and continue rotation */
25% {
transform: rotateX(277deg);
opacity: 1;
}
50% {
transform: rotateX(360deg);
}
74% {
opacity: 1;
}
/* turn this images opacity to 0 here */
/* keep flipping image on same rotation, do not go back to 0
just increment by 90deg with each tween as 360 % 4 = 9 and 100 divided by four = 25
so every 25% of tween we hit a 90deg rotation*/
75% {
transform: rotateX(450deg);
opacity: 0;
}
100% {
transform: rotateX(540deg);
opacity: 0;
}
}
#keyframes move {
from {
top: -2rem;
}
to {
top: calc(100vh + 2rem);
}
}
<div id="cont">
<img id="img" src="https://cdn.pixabay.com/photo/2018/02/02/13/51/bitcoin-3125488_640.png">
<img id="img2" src="https://cdn.pixabay.com/photo/2017/07/27/21/37/bitcoin-2546854_960_720.png">
</div>

You can try rotating the image and animating the margin-left:
setTimeout(function() {
document.querySelector('img').style.marginLeft = "-10000px";
}, 1000);
.container {
overflow: hidden;
width: 50px;
transform: rotate(90deg);
}
img {
margin-left: 0px;
transition: 60s linear;
}
<div class="container">
<img src="https://i.imgur.com/sQG1chQ.png" height="50">
</div>

how i can start the gradient of image when push a button?

i have a problem with gradient code, i code it in css and everything is work perfect but the problem is that the gradient of image is start automatically, so i want to make the gradient start when i press the button
i tried to connect it with function in java script but it didn't work
<style>
.image {
width: 50vw;
height: 70vh;
position relative;
margin-top: -49%;
background: linear-gradient(-135deg, #ffffff, #ffffff, #ffffff, #ffffff,
#d9d9d9, #b3b3b3, #8c8c8c, #595959, #333333, #000000 ,#000000 ,#000000);
background-size: 400% 400%;
-webkit-animation: Gradient 5s ;
-moz-animation: Gradient 5s ;
animation: Gradient 5s ;
animation-fill-mode: forwards;
}
#keyframes Gradient {
0% {
background-position: 0% 50%
}
100% {
background-position: 100% 50%
}
}
</style>
<body>
<input type="radio" name="switch" value="on" onclick="changeImage()" />
<input type="radio" name="switch" value="off" checked="checked"
onclick="changeImage()"/>
</div>
<div class = "image">
<img src="image/bef_logo.png" id="myImage" style= "width: 10vw; position:
absolute; margin: 11% 0% 0% 19%;">
</div>
<script>
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("image/bef_logo.png")) {
image.src = "image/aft_logo.png";
}
else {
image.src = "image/bef_logo.png";
}
}
</script>
</body>
this is my code , the image and gradient .. all i want is to start gradient (which is appear in css code .image) when function changeimage() is applied

You can make the animation independent of the image by creating a new class in CSS:
.switch-animation{
-webkit-animation: Gradient 5s ;
-moz-animation: Gradient 5s ;
animation: Gradient 5s ;
animation-fill-mode: forwards;
}
Everything animation related is taken out and added to that class.
Once you have the class, add the line of code below somewhere in your changeImage() function, this will toggle the animation.
<script>
function changeImage() {
if (image.src.match("image/bef_logo.png")) {
//Code to toggle animating class:
document.querySelector('.image').classList.toggle('switch-animation');
image.src = "image/aft_logo.png";
}
else {
image.src = "image/bef_logo.png";
}
}
</script>

ReactJS Click and Hold Button

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>

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

Create animation with css gradient and javascript

I am working on an cordova application that allows us to scan rfid tags. Based of the RSSI signal strength I need to display a bar that shows how close or far the rfid tag is. The closer I get to the tag, the higher the bar and the further I go, the smaller the bar becomes. I built the following plunkr, which I thought I could use. Unfortunately the animation is not very smooth and its slow on the mobile application. I think the issue is that I am showing/hiding the divs with a timeout to simulate the animation. I think I may need to change this to use css animations with gradients. But I am not very familiar on how to do this and I have no idea how I would hide part of the gradient if say I want to show just a small part of the bar. Any suggestions on how to do this are greatly appreciated.
Update: I have uploaded a video of what I would like to achieve. Unfortunately I am not able to upload this to SO. The animation would change as I read the tags. So I could be moving the tag back and forth and based off that it should change the bar.
https://www.dropbox.com/s/9bd421fhqvt9v5g/gradient-bar-demo.mov?dl=0

For better performance it is best to animate scale rather than height. Source (really good article on animation performance).
Here is an example of how you could do it. It's not perfect but hopefully it should give you a good starting point.
var input = document.querySelector('input');
input.addEventListener('input', function() {
var value = this.value / 100;
var bar = document.querySelector('.meter-bar');
bar.style.transform = 'scaleY(' + value + ')';
// Adjust background size to account for the scale change, there is probably a better solution
bar.style.backgroundSize = '200px ' + (300 / value) + 'px';
});
input {
width: 200px;
}
.meter {
width: 200px;
height: 300px;
margin-top: 20px;
background-color: #e5e5e5;
}
.meter-bar {
width: 100%;
height: 100%;
background-color: #333;
background-image: linear-gradient(to top, #64b572 0%, #9fc63d 50%, #f63908 100%);
background-size: 200px 0;
background-position: bottom;
transform-origin: bottom;
transform: scaleY(0);
transition: transform 1s ease, background-size 1s ease;
opacity: 0.8;
}
<input type="range" min="0" max="100" step="1" value="0">
<div class="meter">
<div class="meter-bar">
</div>
</div>

You could animate the height with javascript and the gradient with css. I am updating here on mouse over but you could have it update with every scan input and accomplish the same thing. You would just need to set up more css classes for any other gradient variations you want.
var min = 15;
var max = 100
function randPercent(){
return Math.floor(Math.random()*(max-min+1)+min);
}
$( ".statusBar" ).mouseover(function(){
var barSize = randPercent();
if (barSize > 50) {
$(this).addClass('close');
} else {
$(this).removeClass('close');
}
$(this).animate({
height: barSize+'%'
},300
);
});
.wrapper {
height:100px;
position:relative;
}
.statusBar {
width:50px;
min-height:10px;
border:1px solid black;
position:absolute;
bottom:0;
}
.bg {
-webkit-transition: background 1s ;
-moz-transition: background 1s ;
-ms-transition: background 1s ;
-o-transition: background 1s ;
transition: background 1s ;
background: rgb(71,234,46);
}
.bg.close {
background: rgb(247,247,49);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="statusBar bg"></div>
</div>