CSS Shimmer effect with blocking JavaScript - javascript

I have a shimmer React component with the following CSS
background: #ebebeb;
background-image: linear-gradient(to right, #ebebeb 0%, #c5c5c5 20%, #ebebeb 40%, #ebebeb 100%);
and the animation keyframe I apply to it is as follows:
{
0%: { background-position: -468px 0 };
100%: { background-position: 468px 0 };
}
My home page is quite heavy on mount. So the animation freezes for about a second or so.
I read that animating transition is done off-thread https://www.phpied.com/css-animations-off-the-ui-thread/
Can anyone help me do my shimmer effect in a similar off-thread manner?

Use transform as suggested in the link. Here is an idea with pseudo element:
.box {
background-image: linear-gradient(to right, #ebebeb calc(50% - 100px), #c5c5c5 50%, #ebebeb calc(50% + 100px));
background-size:0;
height: 200px;
position:relative;
overflow:hidden;
}
.box::before {
content:"";
position:absolute;
top:0;
right:0;
width:calc(200% + 200px);
bottom:0;
background-image:inherit;
animation:move 2s linear infinite;
}
#keyframes move{
to {
transform:translateX(calc(50% + 100px));
}
}
<div class="box">
</div>

Related

How can I skew a scrollbar?

::-webkit-scrollbar-thumb {
-webkit-transform: skewX(15deg);
-moz-transform: skewX(15deg);
transform: skewX(15deg);
}
I've realised that I cannot simply assign a transform via css so I was wondering if there is any other way to achieve a skew-like effect on my scrollbar to match other elements of the site.
Here is an example of my main menu highlighting with a 15deg skew transform. I'm looking to create the same effect but on a vertical scrollbar:
Could this possibly be achieved with a pseudo element or background image?
Multiple background can do this.
I considered 45deg to better see the result but you can adjust the angle like you want:
body {
width:300vw;
}
::-webkit-scrollbar {
width: 1em;
height:1em;
}
::-webkit-scrollbar-thumb {
background:
linear-gradient( 45deg, transparent 10px,orange 0) left, /* 45deg */
linear-gradient(-135deg,transparent 10px,orange 0) right; /* 45deg - 180deg */
background-size:51% 100%;
background-repeat:no-repeat;
}
some text
Another idea to make it works on both scrollbar but with no transparency
body {
width:300vw;
height:300vh;
}
::-webkit-scrollbar {
width: 1em;
height:1em;
}
::-webkit-scrollbar-thumb {
background:
linear-gradient(to top right, #fff 49%,transparent 50%) bottom left,
linear-gradient(to bottom left , #fff 49%,transparent 50%) top right,
orange;
background-size:1em 1em;
background-repeat:no-repeat;
}
some text

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>

Javascript animate a style change using CSS3 transitions

I have a div that has a background gradient which values are set dynamically using javascript. Sometime, I need to change the gradient values (can be colors or color stop position). I would like to animate those changes without using javascript (dont get me wrong, I set the gradient valeus using javascript but I want to animate thise using CSS3). I tried setting a transition property like I would do with CSS. Here is a MWE:
function getPercent() {
return Math.random() * 100;
}
setInterval(() => {
const per = getPercent();
document.getElementById('foo').style.background =
`linear-gradient(to right, #aebcbf 0%,#aebcbf ${per}%,#0a0e0a ${per}%,#0a0e0a 100%`
}, 1000)
.container {
transition: all 1s ease;
background: linear-gradient(to right, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%);
width: 150px;
height: 10px;
}
<div class="container" id="foo"></div>
Hope this is useful
background: linear-gradient(269deg, #ffffff, #ff0000);
background-size: 400% 400%;
-webkit-animation: AnimationName 23s ease infinite;
-moz-animation: AnimationName 23s ease infinite;
-o-animation: AnimationName 23s ease infinite;
animation: AnimationName 23s ease infinite;
#-webkit-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
#-moz-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
#-o-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
#keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
Ref: https://www.gradient-animator.com/
and for more info about CSS transition check this
https://css-tricks.com/almanac/properties/t/transition/
Unfortunately the background-image is not animatable (more info about background-image). Therefore animating CSS gradients is an issue.
To solve this with pure CSS, you can create an :before that has contains the new gradient. Give it opacity: 0 and change this to opacity: 1 when you want to show the new gradient.
Eventually we can do the following:
.container{
width: 150px;
height: 10px;
background: linear-gradient(to right, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%);
position: relative;
z-index: 100;
}
.container:before{
background: linear-gradient(to right, #aebcbf 0%, #6e7774 10%, #0a0e0a 51%, #0a0809 100%);
content: '';
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
width: 100%;
z-index: -100;
transition: opacity 0.45s;
}
.container:hover:before {
opacity: 1;
}
<div class="container" id="foo"></div>
EDIT:
If you want to make the gradients dynamic use a variable that keeps track of which element you changed last, like:
var swapElement = 0;
function getPercent() {
return Math.random() * 100;
}
setInterval(() => {
const per = getPercent();
if(swapElement == 0){
//change gradient of :before
//set opacity to 1
swapElement = 1;
} else {
document.getElementById('foo').style.background =
`linear-gradient(to right, #aebcbf 0%,#aebcbf ${per}%,#0a0e0a ${per}%,#0a0e0a 100%`
}, 1000);
//set opacity :before to 0
swapElement = 0;
}

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