In my website, I have a YouTube-style progress bar (a thin line that is fixed to the top of the screen, loading from left to right) and a header over all of the content. Both of these elements have position: fixed.
When the page is finished loading, the progress bar gets opacity: 0. The progress bar has transition: opacity 0.4s, but it's not transitioning, just appearing and disappearing. This is my issue.
Here is an example of the issue: https://codepen.io/anon/pen/ZJNaqJ
Ideally, any solution would involve changing CSS within either .loader-outer or .loader... not #loader-wrapper. This is because I'm pulling in an external progress bar component (I'm using React) and I'd rather not re-implement it if I don't have to.
Thank you!
You can use css3 animation instead. If you want to trigger the animation at a specific event, add a style class name and set the animation attributes there. Then remove the style class name to stop the animation.
.wrapper {
width: 800px;
height: 400px;
background-color: lightblue;
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: palevioletred;
z-index: 1;
height: 50px;
}
.loader-outer {
}
.loader-wrapper {
}
.loader {
background-color: lightpink;
height: 10px;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
animation-name:opacityAnimation;
animation-iteration-count: infinite;
animation-duration:2s;
}
#keyframes opacityAnimation {
0% {opacity:0;}
50% {opacity:1;}
100% {opacity:0;}
}
.content {
background-color: lightgreen;
}
<div class="wrapper">
<div>
<div class="header">
header stuff here
</div>
<div class="content">
body!
</div>
</div>
<div class="loader-outer">
<div id="loader-wrapper">
<div class="loader"></div>
</div>
</div>
</div>
Related
How is it possible to make this transition in css the last transition of this gif: https://cdn.dribbble.com/users/757683/screenshots/4317968/dribbble_spec_1_v4.gif
The last one, I put a image here:
Start showing pyramid gradually, and slide it to right releasing the login details on the left.
You can do something like:
The whole parent div shall be bigger than 100vw e.g: 120vw.
The body shall have overflow-x: hidden,
The img should be 100vw while the sign-in part a bit smaller eg: 20vw,
The parent div should be translated in such a way that the img is only visible at the beginning, then we would animate the parent div to be translated to show the sign-in part as well.
Enough of theory, understand from the code below:
* {
margin: 0;
padding: 0;
}
body {
overflow-x: hidden;
}
.parent_container {
display: flex;
width: 120vw;
animation: anime 2s;
}
#keyframes anime {
0% {
transform: translate(-20vw);
}
100% {
transform: translate(0);
}
}
.sign_in_eg {
height: 100vh;
width: 20vw;
background: red;
}
.img_eg {
height: 100vh;
width: 100vw;
background: blue;
}
<div class="parent_container">
<div class="sign_in_eg">This is for signin</div>
<div class="img_eg">This is for image</div>
</div>
I have a DIV with "width: 100%", and after some time it moves to a different width (for example "width: 50%") with a nice transition. I want that the part which is going to decrease to get a different color. How do I do it?
.container {
width: 80%;
height: 50px;
}
.bar {
background-color: red;
width: 100%;
height: 100%;
transition-duration: 1s;
}
<div class="container">
<div class="bar"></div>
</div>
You can simply put another bar exactly behind this bar. Set it's z-index to 1. And your current bar's z-index to a higher number.
The bar that is in the back, has a black color like you wanted.
Now when the red bar decrease it's width, the one in the back becomes visible.
Here you go, the most basic working example.
(Try hovering the bar and see it moving)
By simply overlaying a pseudo-element over the static .bar element, with position:absolute, it is places above the bar and has dynamic width which you should change.
.container {
width: 80%;
height: 50px;
}
/* static background bar */
.bar {
--progress: 80%; /* css variable */
position: relative;
background-color: salmon;
width: 100%;
height: 100%;
}
/* This is the part which moves: */
.bar::before{
content: '';
background-color: darkred;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
width: var(--progress);
transition: 1s;
}
.bar:hover {
--progress: 20%;
}
<div class="container">
<div class="bar"></div>
</div>
This solution uses a linear-gradient where I animate the background-size. I placed a fully black gradient on the .container, and a red one on the .bar, where I put a transition: background-size 1s on the black .container.
By using javascript to change a CSS variable, I can get the bar to animate.
Added a range to show-case the result.
Do note that it's always better to specify what attribute to animate with transiation, because otherwise the browser loops through all animatable properies, which can create janky animations.
let rangeInput = document.querySelector('input[type="range"');
let containerDiv = document.getElementById("container");
if (rangeInput) {
rangeInput.addEventListener('change', (event) => {
let newValue = event.target.value;
containerDiv.style.setProperty('--bar-width', `${newValue}%`);
});
}
input[type="range"] {
width: 80%;
margin-top: 1rem;
}
#container {
--bar-width: 100%;
width: 80%;
height: 50px;
background: linear-gradient(black, black);
transition: background-size 1s;
}
/* added "div" to obtain a higher specificity, to override the default background properties. */
div#container,
div.bar
{
background-repeat: no-repeat;
background-size: var(--bar-width);
}
.bar {
background: linear-gradient(red, red);
width: 100%;
height: 100%;
}
<div id="container">
<div class="bar"></div>
</div>
<input type="range" value="100" />
I'm trying to create a parallax header for my wordpress site, i'm using the divi theme.
Here is my code:
HTML:
<div class="parallax">
<div class="parralax__layer parallax__layer--back">
<img src="https://crispimages.co/wp-content/uploads/2018/05/layer_5.png">
</div>>
<div class="parralax__layer parallax__layer--base">
<img src="https://crispimages.co/wp-content/uploads/2018/05/layer_5.png">
</div>
</div>
CSS:
.parallax {
perspective: 1px;
height: 25vh;
overflow-x: hidden;
overflow-y: auto;
position: relative;
}
.parallax__layer {
position: absolute;
top: 0px;
right: 0;
bottom: 0;
left: 0;
transform-style: preserve-3d;
}
.parallax__layer--base {
transform: translateZ(-1px) scale(2);
}
.parallax__layer--back {
transform: translateZ(-15px) scale(2);
}
My problem is that my header has this seperate scroll bar because it's in its over DIV to the rest of my page, the parallax effect works fine with overflow set to auto, but when I turn it off it breaks the paralax effect.
How do I get the header element to scroll with the rest of my page while still keeping the overflow set to auto?
You can see the problem I'm having here:
https://crispimages.co/home/
you can add the following style rule:
.parallax::-webkit-scrollbar {
display: none;
}
This will solve your problem. But as you can see its vendor prefix dependent. So it will only work in webkit browsers.
Many preloaders fill up an image from bottom to top like this example.
How would one create an animation based off a single image in CSS to show the fill up effect? I have tried with the following code but this just produces a image sliding effect and not a fill up effect.
By fill up effect what I mean is that the actual image slowly fills up a frame (like water filling up a tank).
.frame {
position: relative;
height: 600px;
width: 300px;
overflow: hidden;
border: 1px solid;
}
.frame img {
position: absolute;
top: 100%;
animation: fill-up 3s ease infinite;
}
#keyframes fill-up {
to {
top: 0px;
}
}
<div class='frame'>
<img src='http://buildinternet.com/live/imagefill/dude.jpg' />
</div>
Note: The images used in the answer are not my own. They were taken from Build Internet Site.
Creating an image fill-up animation similar to the one available here (that uses jQuery for animation) is possible using CSS3 animations. It just needs two containers for the image and the height of one to be animated from to 0 to full height.
The following is how this animation is created:
One parent container element whose height, width are equal to (or greater than) that of the image
One second level container element which is positioned absolutely with respect to the bottom of the parent. The initial height of this element is set to 0 and the animation on this element produces the fill-up effect.
The image that is also positioned absolutely with respect to the bottom of the top level container.
The second level container has overflow: hidden so that the other portions of the image do not show (they get clipped). As the height of the second level container is animated, more and more of the image become visible.
.container {
position: relative;
width: 300px;
height: 600px;
}
.frame {
position: absolute;
bottom: 0px;
left: 0px;
height: 0px;
width: 100%;
overflow: hidden;
animation: fill-up 3s ease infinite;
}
.frame img {
position: absolute;
bottom: 0px;
}
#keyframes fill-up {
to {
height: 600px;
}
}
<div class='container'>
<div class='frame'>
<img src='http://buildinternet.com/live/imagefill/dude.jpg' />
</div>
</div>
As you could see from the above snippet, it doesn't have the frame visible before the image starts to fill up the frame. If that is also needed like in the linked website then it is tough to achieve with a single image. You would need two different image elements, where, one is the frame whose fill is transparent (so that the actual image positioned behind it can show through) and the other is the actual image. For this animation, we need one extra second level container for the frame. Below is a sample demo.
.container {
position: relative;
width: 300px;
height: 600px;
}
.frame {
position: absolute;
bottom: 0px;
left: 0px;
height: 100%;
width: 100%;
}
.frame:nth-child(2) {
bottom: 35px;
left: 10px;
height: 0px;
overflow: hidden;
z-index: -1;
animation: fill-up 3s ease infinite;
}
.frame:nth-child(2) img {
position: absolute;
bottom: 0px;
}
#keyframes fill-up {
to {
height: 600px;
}
}
<div class='container'>
<div class='frame'>
<img src='http://buildinternet.com/live/imagefill/dudeframe.png' />
</div>
<div class='frame'>
<img src='http://buildinternet.com/live/imagefill/dude.jpg' />
</div>
</div>
The other thing we see in that linked website is that the fill happens at an angle. If that is also required then a skew transform should be added to the second level container (the one that has the image and not the frame). Since a transform is added to the parent, the image will also get skewed. So, a reverse transform should be added to the img element to make it appear normal.
.container {
position: relative;
width: 300px;
height: 600px;
}
.frame {
position: absolute;
bottom: 0px;
left: 0px;
height: 100%;
width: 100%;
}
.frame:nth-child(2) {
bottom: 40px;
left: 10px;
height: 0px;
transform: skewY(-10deg);
transform-origin: right bottom;
overflow: hidden;
z-index: -1;
animation: fill-up 3s ease infinite;
}
.frame:nth-child(2) img {
position: absolute;
bottom: 22px;
transform: skewY(10deg);
}
#keyframes fill-up {
to {
height: 600px;
}
}
<div class='container'>
<div class='frame'>
<img src='http://buildinternet.com/live/imagefill/dudeframe.png' />
</div>
<div class='frame'>
<img src='http://buildinternet.com/live/imagefill/dude.jpg' />
</div>
</div>
Note: The images used in the answer are not my own. They were taken from Build Internet Site.
I'm trying to make a splash page on my website with 2 large buttons, each a right angled triangle, and both join by the longest side to create a square. Basically I'm looking to find out how to make non-rectangular buttons in css.
I have no idea if this is even possible though, and cannot find anything online explaining similar techniques for buttons which are not rectangular, and i'm not particularly skilled in css. A push in the right direction would be very helpful!
A very old (unanswered question) deserves an answer.
You could use a nested div element in which the parent has an overflow set to hidden, with the child element rotated.
Here is a basic example: (please note: jQuery only required for demo)
$('.tri').click(function() {
alert("triangle clicked!");
});
.wrap {
height: 200px;
width: 200px;
position: relative;
overflow: hidden;
margin: 2px auto;
}
.wrap .tri {
position: absolute;
height: 70%;
width: 70%;
background: tomato;
transform-origin: bottom left;
bottom: 0;
transition: all 0.6s;
left: 0;
cursor: pointer;
transform: rotate(45deg);
}
.wrap2 {
transform: rotate(180deg);
}
.wrap .tri:hover {
background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="tri"></div>
</div>
<div class="wrap wrap2">
<div class="tri"></div>
</div>