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>
Related
I’m trying to make an hover effect with an image that increase the size but it doesn’t react everywhere. For other words, how do increase the Hitbox for a image without it actually expanding
Ok, first of all. I tried to use different kinds of scaling, margin, padding, etc. but I just don’t have enough experience
You can set the width and height of the image by doing this into your css file :
your class / attriute{
width:50px;
height:50px;
transition: transform .2s; /* Simple animation */
}
And then you can add this property :
your class / attriute:hover{
transform:scale(2.5);
}
Here are a few ways to enlarge the hit-hover area of an element.
Option 1: large transparent border
img {
border: 50px solid transparent;
}
img:hover {
filter: contrast(0.3);
}
<img src="https://via.placeholder.com/150" />
Option 2: add the image in CSS background: url()
div {
width: 300px;
height: 300px;
background: url(https://via.placeholder.com/150) no-repeat 50% 50%;
}
div:hover {
filter: contrast(.3);
}
<div></div>
Option 3: Target a sibling element
.wrap {
position: relative;
}
.wrap div,
.wrap img {
position: absolute;
}
.wrap div {
width: 300px;
height: 300px;
z-index: 2;
}
.wrap div:hover + img {
filter: contrast(.3);
}
<div class="wrap">
<div></div>
<img src="https://via.placeholder.com/150" />
</div>
I'm looking for a CSS solution that adapts to div contents, with the functionality of clip-path but dynamic. This is my code:
.background {
background: yellow;
text-align: center;
}
.text {
display: inline-block;
margin: 20px;
padding: 20px;
background: teal;
}
<div class="background">
<div class="text">
My text is in here
</div>
</div>
Yellow and teal are just used for illustration. I want to replace the yellow background with an image, but only show it in the teal area. The div.background spans the width of the browser, but I cannot make assumptions about the width of div.text. Can this be done with only CSS or does it require JS and dynamically setting background-position?
Use a pseudo element that you make relative to the background element
.background {
background: yellow;
text-align: center;
position: relative;
z-index: 0;
}
.text {
display: inline-block;
color: #fff;
margin: 20px;
padding: 20px;
clip-path: inset(0); /* clip to only text element */
}
.text:before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
background: url(https://picsum.photos/id/1056/800/600) center/cover;
}
/* to illustrate */
.text:hover {
clip-path: none;
}
<div class="background">
<div class="text">
My text is in here
</div>
</div>
Here is one way of doing what you want through JS. The image is in the background element, and it is clipped according to the dimensions of the child element. There's a resize observer applied to the child element to trigger the calculation of the clipping mask whenever the dimensions of the child change.
I've added an animation to show how the clipping is calculated in real-time, but as you can see there is some slight stutter.
let text = document.querySelector('.text');
let bg = document.querySelector('.background');
let observer = new ResizeObserver(() => {
calculateClipPath(bg, text);
})
observer.observe(text);
function calculateClipPath (parent, child) {
parent.style.clipPath = `inset(
${child.offsetTop}px
${parent.clientWidth - (child.offsetLeft + child.clientWidth)}px
${parent.clientHeight - (child.offsetTop + child.clientHeight)}px
${child.offsetLeft}px
)`;
}
.background {
background: url(https://c4.wallpaperflare.com/wallpaper/368/148/1024/flowers-roses-drawing-light-wallpaper-preview.jpg);
text-align: center;
position: relative;
}
.text {
display: inline-block;
margin: 20px;
padding: 40px;
width: 200px;
animation: 3s infinite change;
}
#keyframes change {
0% {
width: 200px;
}
50% {
width: 150px;
}
100% {
width: 200px;
}
}
<div class="background">
<div class="text">
My text is in here
</div>
</div>
I'm still experimenting to see if there is a purely CSS version of the solution because that would always be smoother than the JS solution. If I can figure it out, I'll edit this answer and add it here
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" />
Here is a short codepen of a simple css animation that I'm struggling to work with. Code also below:
.navscroll {
width: 100%;
height: 100px;
padding: 5px;
overflow: hidden;
position: relative;
background-color: red;
}
.navscroll div {
position: relative;
width: 200px;
height: 100%;
line-height: 50px;
text-align: center;
background-color: blue;
opacity: 1;
border-radius: 5px;
transform: translateX(100%);
animation: navscroll 15s linear infinite;
}
#keyframes navscroll {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
<div class="navscroll">
<div>Why arent these</div>
<div>Side by side</div>
<div>or sliding across the WHOLE navbar</div>
</div>
Its supposed to be a scrolling navbar of divs, but I'm having two issues:
The inner divs are stacking vertically, not horizontally...
The inner divs are scrolling across only a small percentage of the nav bar / outer div...
Ideally, if there were many divs in the navscroll div, only 5-6 of them would display anytime on the screen, although the navbar would always be scrolling and those other divs would make their way onto the screen eventually. (similar to stock tickers ticking across the top of the TV screen). Any help with this is appreciated, thanks!!
div is a block level element (means it has display: block; by default). These create a line break before and after themselves. Use display: inline-block; and make sure they align properly using vertical-align: middle;.
2nd problem: translateX(100%) here the percentage does not refer to the parent element, but to the div being animated.
.navscroll {
width: 100%;
height: 100px;
padding: 5px;
overflow: hidden;
position: relative;
background-color: red;
white-space: nowrap;
}
.navscroll div {
position: relative;
width: 200px;
height: 100%;
line-height: 50px;
text-align: center;
background-color: blue;
opacity: 1;
border-radius: 5px;
transform: translateX(100%);
animation: navscroll 15s linear infinite;
/* this does the magic: */
display: inline-block;
vertical-align: middle;
}
#keyframes navscroll {
0% {
left: 100%;
}
100% {
left: -100%;
}
}
<div class="navscroll">
<div>Why arent these</div>
<div>Side by side</div>
<div>or sliding across the WHOLE navbar</div>
</div>
As per your question about how to create a snippet here:
The inner divs are stacking vertically because the default styling for a div is display: block. Adding the styles display: inline-block; vertical-align: top; to your .navscroll div rules will set them side by side, aligned to their top edges.
The animation is starting in the middle, and not all the way to the right like you intend because of how transform: translate() works. transform refers to the object being transformed, not its parent. So, translating something 100% of it refers to the width of the object. Try animating the position, something like this instead:
#keyframes navscroll {
0% {
left: 100%;
}
100% {
left: -600px;
}
}
EDIT: Also, remove the initial transform: translateX(100%); and you can simply animate the left position to -600px (3x the width of the each block).
So I'm learning CSS transitions and transforms and am trying to make a simple slider in CodePen. The basic idea is that I have one div on top of another and I want the first one to slide off the second when hovered on. It works fine without any overflow property, but once I added overflow: hidden to the underlying square, it pushes the overlying square down. Why is this?
http://codepen.io/johnnycopes/pen/BKReOq
--- HTML ---
<div class="container">
<div class="shape">
<div class="shape-cover">
</div>
</div>
</div>
--- CSS ---
body {
font-family: Verdana;
background: #fff0a5;
}
.container {
margin: 0 auto
}
.shape {
margin: 50px auto 0;
width: 200px;
height: 200px;
overflow: hidden;
background: #ffb03b;
}
.shape-cover {
margin: 50px auto 0;
height: 200px;
width: 200px;
background: #468966;
transform: translateX(0%);
transition: transform .5s ease-in-out;
}
.shape-cover:hover {
transform: translateX(100%);
}
It is because you are using a margin on the "overlaying square".
shape-cover is inside the shape, so the margin of the shape-cover will me relative to its parent.
So try removing the margin on the shape-cover div.