I try to animate a border also for IE11 and I thought it will possible through using anime.js.
First I set it up as CSS Animation and try now to translate it to anime.js.
But my problem is that I don't find any example or some in the documentation how I can animate multiple values for background-size.
The div-border should grow animated on the screenborders.
const myAnimation = anime({
targets: '#aniBorder',
easing: 'linear',
backgroundSize: [
{
duration: 1000,
value: '+=0 10px, 10px 0, 0 10px, 10px 0';
},
{
duration: 1000,
value: '+=100% 10px, 10px 0, 0 10px, 10px 0';
},
{
duration: 1000,
value: '+=100% 10px, 10px 100%, 0 10px, 10px 0';
},
{
duration: 1000,
value: '+=100% 10px, 10px 100%, 100% 10px, 10px 0';
},
{
duration: 1000,
value: '+=100% 10px, 10px 100%, 100% 10px, 10px 100%';
}
],
});
Here I have a jsbin:
https://jsbin.com/hehukay/edit?html,css,js,output
The rectangle in the middle (.finishAni) should show you what I want to realize with anime.js.
Cheers
The best way to make it the same on all platforms would be to use 4 divs instead of one div with an animated border. 4 divs, position: absolute and then position them, appropriately.
Related
I have coded a website in Next.js.
I decided to have some text boxes in front of the background with backdrop-filter enabled in order to achieve the "glass like" effect.
Particularly I have added these lines in css
.textbox {
background: rgba( 255, 255, 255, 0.3 );
backdrop-filter: blur( 10px );
-webkit-backdrop-filter: blur( 10px ); */
box-shadow: 0 8px 32px 0 rgba( 0, 0, 0, 0.18 );
border-radius: 10px;
}
This works very well, as expected. On my pc there is no lag, however on my phone (chrome),
i can easily see frame drops and lags when the backdrop filter is applied. If i remove this, it gets again smooth. Is this normal? Is there any solution for this?
If i just blur the background it works and there is no lag. But, i don't get the desired result.
Thank you.
I couldn't remake the gradient with CSS :
So here is the objective :
More information
Gradient color:
Start color: #1696B6 with 50% opacity
End color: Black with 100% transparency
I already tried. I got this :
$gradiant-background-dark-theme: linear-gradient(#1696b6, black, #1696b6);
I need someone to help me.
.gradient{
height:200px;
width:400px;
background: linear-gradient(#1696b6, black, #1696b6)
}
<div class='gradient'>test</div>
I got the perfect matching
$gradiant-background-dark-theme: repeating-linear-gradient(to top,rgb(22, 150, 180) 0%,rgb(0, 0, 0,0.5) 10%,rgb(0, 0, 0, 0.5) 90%,rgb(22, 150, 182) 100%)
.container {
background: black;
}
.gradient{
height:200px;
width:400px;
background: repeating-linear-gradient(to top,rgb(22, 150, 180) 0%,rgb(0, 0, 0,0.5) 10%,rgb(0, 0, 0, 0.5) 90%,rgb(22, 150, 182) 100%)
}
<div class='container'><div class='gradient'>test</div></div>
Please use Angles in your CSS
instead of this
$gradiant-background-dark-theme: linear-gradient(#1696b6, black, #1696b6);
Please Use
$gradiant-background-dark-theme: linear-gradient(45deg, #1696b6, black, #1696b6);
Syntax : background-color: linear-gradient(angle, color1, color2);
For Transparency you have to select color code with opacity is better By using RGBA color code
I have a CSS gradient in Figma
background: linear-gradient(180deg, #0097F3 26.66%, rgba(255, 255, 255, 0.1) 100%);
How can I convert that to react-native-linear-gradient package
I am doing the below code, I dont know how to do 180deg and 26 % etc
<LinearGradient
start={{x: 0.26, y: 0.26}}
end={{x: 0, y: 1.0}}
location={[0.25, 0.4]}
colors={['#0097F3', 'rgba(255, 255, 255, 0.1)']}
style={{flex: 1}}
>
........
</LinearGradient>
A value of 0deg is equivalent to "to top". A value of 90deg is equivalent to "to right". A value of 180deg is equivalent to "to bottom".
background-image: linear-gradient(angle, color-stop1, color-stop2);
start: An optional object of the following type: { x: number, y: number }. Coordinates declare the position that the gradient starts at, as a fraction of the overall size of the gradient, starting from the top left corner. Example: { x: 0.1, y: 0.1 } means that the gradient will start 10% from the top and 10% from the left.
end: Same as the start, but for the end of the gradient.
locations: An optional array of numbers defining the location of each gradient color stop, mapping to the color with the same index in colors prop. Example: [0.1, 0.75, 1] means that first color will take 0% – 10%, second color will take 10% – 75% and finally third color will occupy 75% – 100%.
What I am trying to do is create this in Qml (w/o using any images):
Specification
It is a button that has:
a linear gradient as background
two borders
each has a width of 1px
the colors have an alpha, so the background will effect the actual visible color of each pixel
the outer border is above the general background of the application
the inner border is above the gradient
the colors of the inner and outer border of the left side is interchanged compared to the bottom and right border (i.e. color of inner border left = color of outer border bottom, etc.)
on the bottom left and bottom right (but not on the top!) there is a 3px radius
In CSS (the reference implementation is a browser single-page application) it is done with this code:
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
box-shadow: rgba(152, 182, 219, 0.15) 0px 0px inset, rgba(2, 2, 4, 0.4) -1px 0px inset, rgba(2, 2, 4, 0.4) 0px -1px inset, rgba(152, 182, 219, 0.15) 1px 0px inset;
background: linear-gradient(rgb(47, 72, 99) 30%, rgb(36, 51, 71) 100%) padding-box;
border-bottom: 1px solid rgba(152, 182, 219, 0.15);
border-left: 1px solid rgba(2, 2, 4, 0.4);
border-right: 1px solid rgba(152, 182, 219, 0.15)
I am having trouble recreating this in Qml. As the radius property of the rectangle can only be set equal for all corners, I followed the idea mentioned in https://stackoverflow.com/a/39971599 . The result without using borders looks like this:
no borders
And this is the code I use for it:
Button {
id: headerConfigButton
// ...
background: Rectangle {
color: "transparent"
Rectangle {
height: headerConfigButton.height - headerConfigButtonLowerBackground.radius
width: headerConfigButton.width
}
Rectangle {
id: headerConfigButtonLowerBackground
radius: 3
height: headerConfigButton.height
width: headerConfigButton.width
color: "#242e3a"
}
LinearGradient {
source: parent
anchors.fill: parent
start: Qt.point(0, 0)
end: Qt.point(0, parent.height)
gradient: Gradient {
GradientStop {
position: 0.0
color: "#344a62"
}
GradientStop {
position: 1.0
color: "#293749"
}
}
}
}
}
Applying the borders was a little clumsy - I made a rectangle ("1px line") for each side and each border. Without the radius it looks like as in this picture:
no radius
Please note that the alpha values of the borders are not respected in this imgage; I found it easier to see what happens without using them.
The code for this:
Button {
id: headerConfigButton
// ...
background: Rectangle {
color: "transparent"
Rectangle { // left outer border
width: 1
height: headerConfigButton.height
color: "#181e26"
}
Rectangle { // left inner border
x: 1
width: 1
height: headerConfigButton.height - 1
color: "#4d637d"
}
Rectangle { // bottom outer border
x: 1
y: headerConfigButton.height - 1
width: headerConfigButton.width - 2
height: 1
color: "#344151"
}
Rectangle { // bottom inner border
x: 2
y: headerConfigButton.height - 2
width: headerConfigButton.width - 4
height: 1
color: "#181e26"
}
Rectangle { // right inner border
x: headerConfigButton.width - 2
width: 1
height: headerConfigButton.height - 1
color: "#181e26"
}
Rectangle { // right outer border
x: headerConfigButton.width - 1
width: 1
height: headerConfigButton.height
color: "#344151"
}
Rectangle { // gradient fill
id: headerConfigButtonGradientFill
x: 2
width: headerConfigButton.width - 4
height: headerConfigButton.height - 2
LinearGradient {
source: parent
anchors.fill: parent
start: Qt.point(0, 0)
end: Qt.point(0, parent.height)
gradient: Gradient {
GradientStop {
position: 0.0
color: "#344a62"
}
GradientStop {
position: 1.0
color: "#293749"
}
}
}
}
}
}
But now I struggle to create the round corners in conjunction with the borders. One issue is that the color of the outer and inner borders are not the same on each side. In conjunction with the opacity of the border colors, I have no idea how to get the colors in the corners right. Additionally, the gradient needs to be cropped as well.
The colors of the gradient and borders shall be themeable later on. Thus, using a background image or recreating the corners pixel by pixel with fixed colors taken from the spec is not an option.
Has anyone got an idea how to solve this? Maybe I am completely off and there is a much better and easier way to do this?
Thanks in advance!
http://jsfiddle.net/7nm7xpwa/
See code here ^
Basically I have a class that I am adding to a div that animates the background position, creating a moving stripe effect (like a barber pole). The class is added on a click event and as such, the start and stop of the background animation begins shortly after the click. When more than one div is used, they are usually out of synch. Is there a way to ensure that the animation of a second div clicked will be synchronous to the same animation on the first div clicked?
Thank you for your time!
code here as well:
CSS
.selected {
background: linear-gradient(
45deg,
rgba(255,255,255, .95) 25%,
transparent 25%,
transparent 50%,
rgba(255,255,255, .95) 50%,
rgba(255,255,255, .95) 75%,
transparent 75%,
transparent
);
background: -webkit-linear-gradient(
45deg,
rgba(255,255,255, .95) 25%,
transparent 25%,
transparent 50%,
rgba(255,255,255, .95) 50%,
rgba(255,255,255, .95) 75%,
transparent 75%,
transparent
);
background: -o-linear-gradient(
45deg,
rgba(255,255,255, .95) 25%,
transparent 25%,
transparent 50%,
rgba(255,255,255, .95) 50%,
rgba(255,255,255, .95) 75%,
transparent 75%,
transparent
);
background: -moz-linear-gradient(
45deg,
rgba(255,255,255, .95) 25%,
transparent 25%,
transparent 50%,
rgba(255,255,255, .95) 50%,
rgba(255,255,255, .95) 75%,
transparent 75%,
transparent
);
animation: barberpole 2s linear infinite;
-webkit-animation: barberpole 2s linear infinite;
-moz-animation: barberpole 2s linear infinite;
/* opacity: .9; */
}
#keyframes barberpole {
from { background-position: 0 0; }
to { background-position: 200px 100px; }
}
#-webkit-keyframes barberpole {
from { background-position: 0 0; }
to { background-position: 200px 100px; }
}
#-moz-keyframes barberpole {
from { background-position: 0 0; }
to { background-position: 200px 100px; }
}
.pixel {
width: 100px;
height: 100px;
background-color: grey;
float:left;
}
JS
$('.pixel').click(function(){
$(this).addClass('selected');
});
HTML
<div class='pixel'></div>
<div class='pixel'></div>
<div class='pixel'></div>
<div class='pixel'></div>
<div class='pixel'></div>
<div class='pixel'></div>
I have been trying this for the last couple of hours, I found this challenging and fun, but I could not find the perfect solution.
I found no way of just following the previous animation so I needed to reset all selected classes and add them back.
The way I got this (somewhat) working was by using the delay function setting it to the same time as the animation, removing and re-adding the class immediately did not have the same effect unfortunately.
Here is what I came up with:
$('.pixel').click(function () {
$('.pixel').each(function () {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected').delay(2000).queue(function(){
$(this).addClass('selected').dequeue();
});
}
});
$(this).addClass('selected');
});
Here is the updated fiddle: http://jsfiddle.net/7nm7xpwa/9/
EDIT: I found it! Here is the full solution of the above trick (resetting the animation). It basically removes the element completely then re-adds it, this way resetting the animation:
$('.pixel').click(function () {
$('.pixel').each(function () {
if ($(this).hasClass('selected')) {
var elm = this,
newone = elm.cloneNode(true);
elm.parentNode.replaceChild(newone, elm);
}
});
$(this).addClass('selected');
});
Source: Restart CSS Animation | CSS-TRICKS
Here is the new fiddle: http://jsfiddle.net/7nm7xpwa/10/
EDIT #2: In the comments of above article on CSS-TRICKS, I found an ever more simple way of doing the animation reset / element replacement as follows:
$('.pixel').click(function () {
$('.pixel').each(function () {
if ($(this).hasClass('selected')) {
$(this).replaceWith($(this).clone(true)); // turned this into a 1 liner
}
});
$(this).addClass('selected');
});
Another version of your fiddle with this: http://jsfiddle.net/7nm7xpwa/11/
There are a few approaches you can take.
Fake it - just cover up the original with a pseudo element or something and on click remove the overlay. The only downside to this is that the animations are still running when covered, but this shouldn't be an issue if you have are only animating a few elements. If you're animating a lot of elements you shouldn't be using CSS animations in the first place most likely
Wait for animationIteration - Check to see if the first is animated, if so start the other when animationIteration fires. The downside to this is that there will be a slight delay before the animations after the first start
Keep track of the total animation time - Start a timer when the first is clicked (or before), set animation-delay to a negative value syncing with the current time when the next are clicked. This is relatively difficult to do accurately.