JS/CSS: how to animate a circle to pill shape? - javascript

Ok this is what I'm trying to achieve (ideally with JS/jQuery):
https://dribbble.com/shots/3445331-Expanding-Button
On hover, I need a circular div to expand into a pill shape so other buttons can pop in within it. When I click the "x" again, I need it to roll back to a circle shape.
I only know how to scale things with JS/jQuery. How can I do this? I can't find anything just searching with plugins.

Instead of thinking that it is a circle to a pill shape, maybe try making it a square div, that changes the width to more of a rectangle on hover.
Then you would only have to make the border-radius rounded to look like a circle/pill shaped. Hope that makes sense.

#mari Lai is right on. If you think of the containing div as a single rectangle with a changing width and consistent border radiuses then it's really pretty straight forward. (you can trigger this with jQuery/JS or simply hover/focus css)
Something like this...
.pill {
width: 50px;
height: 50px;
border-radius: 25px;
background-color: #898989;
transition: width .5s ease;
}
.pill:hover, .pill:focus {
width: 240px;
}
<div class="pill">
</div>

So that "circle" in the beginning is a div with class circle, say with the following CSS:
.circle {
width: 100px;
height: 100px;
border-radius: 50px;
}
Then you could change that to the following:
.circle {
width: 100px;
height: 100px;
border-radius: 50px;
transition: width ease 0.3s;
}
So now the circle can animate width changes. We could define a "pill" width again with a class:
.pill {
width: 300px;
}
And if you want to use jQuery to trigger the width change on a click, we can do the following: toggle the pill class on the circle div
$(".circle").on("click", function() {
$(".circle").toggleClass("pill");
});
Of course to accomodate more buttons inside the "circle" div, you would use another selector for the click action, but you get the point :)
:edit:
Here's a fiddle for that: https://jsfiddle.net/6g0z3390/
:edit2:
I just realized you didn't want the change on click but on hover. In that case you could simply drop the JS and change the css from .pill to .circle:hover :)

Related

Making elements appear as if they share a background

I'm working on a to-do web app and I'm trying to achieve a visual effect wherein multiple todos appear to "share" a single background. So, imagine that a user adds a few todos. Their backgrounds appear as a part of a single gradient, with colors transitioning from top todo to bottom todo. This pen should hopefully demonstrate what I want to happen (click the first div):
Elements 'sharing' a background
HTML:
<div class="outer">
<div class="inner"></div>
<p>CLICK ME</p>
</div>
CSS:
.outer {
position: absolute;
left: 0;
top: 0;
height: 300px;
width: 200px;
background: white;
overflow: hidden;
clip: rect(auto, auto, auto, auto);
transition: transform 500ms ease-in-out;
font-size: 2rem;
}
.inner {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: linear-gradient(to right, red, orange, green, blue);
opacity: 0.5;
}
Now this already kind of works, I guess, but only if I manually animate position of the divs. Is there some way to utilize CSS transforms instead? The big problem there is that as soon as a transform is applied to outer div, the fixed child div stops being fixed, completely destroying the 'same background' illusion. you can see it in this pen:
Illusion fail
I read that it's part of the spec and that's just how it is, but thought maybe you CSS wizards here know other ways to achieve this effect, perhaps even without fixed child divs. Would really appreciate your help.
Here's an example using clip-path, but one issue is that it doesn't clip the same way as clip does, because it only clips the element itself, not child elements under it. Children elements will also get clipped, so they have to be moved to match the new clip position.
https://codepen.io/mix3d/pen/OJPjbGp

How to make custom cursor display over image?

I'm building a portfolio site for myself and I made a custom cursor that follows the default one, by creating an empty div, styling it as a small circle, and making it trail behind the default cursor with Javascript. All of that works fine.
The problem is that once the cursor moves over an image, the circle is displaying under it.
HTML
<div class="cursor"></div>
<img src="https://steamuserimages-a.akamaihd.net/ugc/268338039154053677/D41BD0C4419DBF35C84CB17B2737B065504B1858/" alt="">
CSS
.cursor {
height: 15px;
width: 15px;
border: 1px solid #0b0d0f;
border-radius: 50%;
position: absolute;
transition-duration: 200ms;
transition-timing-function: ease-out;
pointer-events: none;
}
JavaScript
const cursor = document.querySelector('.cursor');
document.addEventListener('mousemove', e => {
console.log(e);
cursor.setAttribute("style", "top: "+(e.pageY - 10)+"px; left: "+(e.pageX - 10)+"px;")
})
I would expect the custom cursor to hover over the image along with the default cursor, but instead is displays under it.
Give the hovering element a higher z-index in the CSS to make it appear in front of other elements (jsfiddle).
However, this may be a browser-specific problem—it works for me even without the z-index set.

How to animate a border?

I want to create a circling border, as seen in the second state of this object. So the loading icon. How would I do that with JavaScript?
I'm not looking for someone writing out the full code, but would like some direction to what selectors etc to research.
Is quite easy. Basically you start with a circle with a certain width and height, a full border-radius and a transition to it. Then on hover for example, you increase the width of that circle. Doing this will smootly transform that circle into a rectangle. If you dont manage to make it work, i`l create some examples for you.
Take a look at this(hover on the circle)
div {
width: 50px;
height: 50px;
border: 3px solid green;
border-radius: 30px;
margin:0 auto;
transition: .5s;
}
div:hover{
width: 200px;
background-color: green;
}
<div></div>
From here on you can modifiy it to fit your needs.

Custom on hover and ul/li elements?

I'm new here, so please tell me if I formulated something wrongly, code or text-wise.
This is the code I'm currently using for my page. Yes, I know it's short and terrible, but I'm still learning HTML/CSS. If you run that on a page, you'll notice no hover events on the navbar buttons, and some fiddling with the logo will reveal that the actual navbar is a big bar. (width:100%?)
I was only wondering as to how I would go about creating an on hover that's only slightly there, something like this: (hovered on the left, not hovered on the right)
Hover showcase
I don't necessarily need it using my current setup or it being exact, but I'd like an explanation as to how this would be done. (the site I took it from has fancy fade on the text turning blue and a slide animation on the bar from the bottom, but I don't expect I'll be able to do that)
I was also wondering how I could have the logo be on the same bar as the other li elements, and then center it off how long logo + li elements (the whole bar) would be. (as opposing to having the li elements centered and a logo off to the left.) Also, a thick, colored bar above the navbar, but not below, like a margin, and having the navbar be a little thicker as well, as the picture above depicts fairly well.
Thank you for any assistance I can recieve!
Hyao
So for the hover color you can do something like:
li:hover {
color: blue;
border-bottom: 3px solid blue;
}
To add more of the animation you might want to do:
li {
display: inline-block;
vertical-align: middle;
}
li a:hover {
color: blue;
}
li a:after {
margin: 0 auto;
width: 0px;
height: 3px;
display: block;
content: "";
background-color: blue;
transition: width 0.5s linear;
}
li a:hover:after {
width: 100%;
}
li img {
padding: 14px 16px;
}
http://plnkr.co/edit/GrxqcRjoMa7aWjHvnBhA
basically you are creating a psuedo element :after which has an animation on its width. When you hover over an li element the psuedo element will grow to 100% of the width looking like an expanding underline.
To make the image inline with the other elements remove your position: absolute style for the #logo

Masking a web page

Example:
The area with the red border is where you can fully see through the mask. Everything else is grayscaled and partially hidden with opacity or transparent white background.
One thing I tried is to make a class for each selectable area with a grayscale filter and lower opacity. Then I apply this class on all areas but the selected one. But this doesn't work well this nested zones because some of the areas become less opaque than others.
Any advice on how could I implement this?
Codepen
Works as expected only on #footer, because it doesn't have parent or children areas that are selectable
You could apply an highlighted class to the chosen element like so
.highlighted {
border: 1px red solid;
outline: 999em solid rgba(255,255,255, .75);
}
A wide outline will cover all other elements.
Example : http://codepen.io/anon/pen/emOXRJ
Add an z-index higher then the overlay to the element you want too focus on.
I don't think there will be a straightforward way to do this. One idea would be to have four block elements around the edges of the element in question that have a semi-transparent fill colour, however you will have to measure and position these in JavaScript, and you'll have to take scrolling into account also. Before attempting this, I would look for a library that already offers this.
You can use a full sized div with a transparent grey background and a z-index higher than the rest of your site:
#cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(200, 200, 200, 0.8);
z-index: 1;
}
and then on the zone you want to be fully visible you set an even higher z-index:
#other_content{
z-index: 2;
position: absolute;
top: 50px;
left: 100px;
border: red medium solid;
}
like in this fiddle

Categories

Resources