I am creating a google-material-design-like button with a ripple effect but my animation is showing up as a square shape when I want it to be circle.
This happens because the animation reaches a size bigger than the div it is in, and then fills the edges of the outer div making it look like a square. Is there a way to set the outer div itself to be a circle, because even though I've set border-radius: 50%, the div itself (not the shape created within the div) is still a square.
html:
<div id="imgs">
<div id="button"></div>
</div>
css:
#button{
position: relative;
overflow: hidden;
height: 56px;
width: 56px;
border-radius: 50%;
-webkit-box-shadow: 0px 1px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 1px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 1px 5px 0px rgba(50, 50, 50, 0.75);
}
.drop{
display: block;
position: absolute;
background: hsl(180, 40%, 80%);
border-radius: 50%;
transform: scale(0);
}
.drop.animate {
-webkit-animation-name: ripple;
-webkit-animation-duration: 0.65s;
-webkit-animation-timing-function: linear;
}
#-webkit-keyframes ripple {
100% {opacity: 0; transform: scale(2.5);}
}
I thought that giving the #button the property of overflow: hidden would create the masked effect, but it didn't.
javascript:
var parent, ink, d, x, y;## Heading ##
$("#imgs #button").click(function(e){
element = $(this);
if(element.find(".drop").length === 0)
element.prepend("<span class='drop'></span>");
drop = element.find(".drop");
drop.removeClass("animate");
if(!drop.height() && !drop.width())
{
d = Math.max(element.outerWidth(), element.outerHeight());
drop.css({height: d, width: d});
}
x = e.pageX - element.offset().left - drop.width()/2;
y = e.pageY - element.offset().top - drop.height()/2;
//set the position and add class .animate
drop.css({top: y+'px', left: x+'px'}).addClass("animate");
});
Here is a working fiddle where you can see the effect the above code generates. How can I alter it so that the ripple animation shows up round (confined to the round button) as opposed to squared (expanding over the button's boundaries)?
This issue is caused by a reported bug in chrome. There isn't a fix yet but there is a simple work-around that doesn't affect the aesthetic.
You need to add a transform to the element: -webkit-transform: rotate(0.000001deg); It can be so small as to be imperceptible, but that should be enough to fix it by promoting the paint order of the elements.
var parent, ink, d, x, y;
$("#imgs #button").click(function(e) {
element = $(this);
if (element.find(".drop").length === 0)
element.prepend("<span class='drop'></span>");
drop = element.find(".drop");
drop.removeClass("animate");
if (!drop.height() && !drop.width()) {
d = Math.max(element.outerWidth(), element.outerHeight());
drop.css({
height: d,
width: d
});
}
x = e.pageX - element.offset().left - drop.width() / 2;
y = e.pageY - element.offset().top - drop.height() / 2;
//set the position and add class .animate
drop.css({
top: y + 'px',
left: x + 'px'
}).addClass("animate");
});
#button {
position: relative;
overflow: hidden;
height: 56px;
width: 56px;
border-radius: 50%;
-webkit-box-shadow: 0 1px 5px 0 rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0 1px 5px 0 rgba(50, 50, 50, 0.75);
box-shadow: 0 1px 5px 0 rgba(50, 50, 50, 0.75);
-webkit-transform: rotate(0.000001deg); /* This is the important bit */
}
.drop {
height: 56px;
width: 56px;
display: block;
position: absolute;
background: hsl(180, 40%, 80%);
border-radius: 90%;
transform: scale(0);
}
.drop.animate {
-webkit-animation-name: ripple;
-webkit-animation-duration: 0.65s;
-webkit-animation-timing-function: linear;
}
#-webkit-keyframes ripple {
100% {
opacity: 0;
transform: scale(2.5);
border-radius: 90%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imgs">
<div id="button"></div>
</div>
Here is a breakdown of the bug:
https://code.google.com/p/chromium/issues/detail?id=157218
Related
there i have a floating element that functions as on click scroll to the div , but the element is still appearing even after its reached the targeted div ,so i want to make it to invisible and not to appear when it reached to the div the floating thing must go invisible and reappear when the user is out of the page view of the div ,so if anyone can help me the code i will appreciate the work thank you here is the code
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function() {
$('#downloadq').hide().delay(5000).fadeIn(2200);
});
</script>
<style>
.wrapperq{
animation: shake 2.82s cubic-bezier(.36, .07, .19, .97) both infinite;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
#keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
}</style>
<style>
.wrapperq {
text-align: center;
}
.buttonq {
position: auto;
top: 50%;
}
.buttonq {
background-color: #000000; /* Green */
border: black;
z-index: 99999;
color: white;
padding: 15px 32px;
border-radius: 15px 50px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.buttonq1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
</style>
<script>
window.smoothScroll = function(target) {
var scrollContainer = target;
do { //find scroll container
scrollContainer = scrollContainer.parentNode;
if (!scrollContainer) return;
scrollContainer.scrollTop += 1;
} while (scrollContainer.scrollTop == 0);
var targetY = 0;
do { //find the top of target relatively to the container
if (target == scrollContainer) break;
targetY += target.offsetTop;
} while (target = target.offsetParent);
scroll = function(c, a, b, i) {
i++; if (i > 30) return;
c.scrollTop = a + (b - a) / 30 * i;
setTimeout(function(){ scroll(c, a, b, i); }, 20);
}
// start scrolling
scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0);
}
</script>
<script>
$(window).scroll(function() {
var winScrollTop = $(window).scrollTop();
var winHeight = $(window).height();
var floaterHeight = $('#floater').outerHeight(true)
var fromBottom = 50;
var top = winScrollTop + floaterHeight - fromBottom;
$('#floater').css({'top': top + 'px'});
});</script>
<style>
#floater {
position: absolute;
top: 100px;
left: -200px;
width: 100px;
height: 100px;
-webkit-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
z-index: 99999;
border-radius: 3px 0 0 3px;
color: white;
text-align: center;
box-sizing: border-box;
}
.red {
background-color: green;
color: white;
}
</style>
I'm trying to build a mechanic similar to this link https://demos.littleworkshop.fr/demos/infinitown/. Ignoring Three.JS's 3D features, I wish my user could drag the scene, this being an img tag or even a div with 3D transform, but the drag movement is just as smooth. How could I build this?
My first attempt https://codepen.io/diogenesjup-the-encoder/pen/xxdEoEg almost worked, however, the 3D transform, left the parent DIV and the drag movement is not so fluid.
#square {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100px;
height: 100px;
background: #000;
z-index: 9999;
transform: rotateX( -70deg) rotateY( 14deg) rotateZ( 38deg) translateX(16px) translateY(-19px) translateZ(20px) scale(1) skewX( -19deg) skewY( 1deg);
overflow: auto;
transform-style: preserve-3d;
box-shadow: rgb(249 249 251) 1px 1px 0px 1px, rgb(34 33 81 / 1%) -1px 0px 28px 0px, rgb(34 33 81 / 25%) 28px 28px 28px 0px;
}
#map {
position: relative;
left: 0;
top: 0;
width: 200px;
height: auto;
transform: rotateX( -70deg) rotateY( 14deg) rotateZ( 38deg) translateX(16px) translateY(-19px) translateZ(20px) scale(1) skewX( -19deg) skewY( 1deg);
overflow: auto;
transform-style: preserve-3d;
box-shadow: rgb(249 249 251) 1px 1px 0px 1px, rgb(34 33 81 / 1%) -1px 0px 28px 0px, rgb(34 33 81 / 25%) 28px 28px 28px 0px;
}
For the inner div being out of bound issues add margin in the direction of the out of bounding in your case try adding margin-right: 35% for the #map div. For the smoothing behavior modify the ui.position property inside the drag callback. Keep on adjusting the added value to get the needed smoothing. (I subtracted 7 in both just as an example).
$("#map").draggable({
drag: function(event, ui) {
ui.position.left = ui.position.left-7;
ui.position.top = ui.position.top-7;
}
});
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
Is there a way we can fill color of css semi-circle in an incremental way in anticlockwise direction like a progress bar.
Here is the semi-circle code. https://jsfiddle.net/sonymax46/wqfovdjh/7/.
.cc{
background-color: transparent;
overflow: hidden;
width: 80px;
}
.curve {
height: 60px;
width: 100%;
background-color: none;
border-radius: 50%;
border: 2px solid blue;
transform: translateX(50%);
}
I want existing blue colour to be filled with Green on an event. How to achieve this with css O SVG
Thank in Advance
Option A is to use a container that cut's off a circular element and a pseudo-class as a "mask" over the top of the circle. Then a gradient background shows the other color when the element is rotated.
The major drawback to this is you have to have a solid color background that the overlay can match visually.
.wrapper {
margin: 20px;
width: 200px;
height: 200px;
overflow: hidden;
/* just to show the box could be transparent */
background-color: lightgray;
cursor: pointer;
}
.arc {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
/* Use relative on parent so mask aligns */
left: 50%;
/* Move the circle 'outside' the wrapper */
background: linear-gradient(90deg, rgba(55, 238, 79, 1) 0%, rgba(55, 238, 79, 1) 50%, rgba(0, 212, 255, 1) 50%, rgba(0, 212, 255, 1) 100%);
transition: transform 1s ease;
}
.arc:after {
/* this creates the 'mask' */
content: '';
position: absolute;
width: 90%;
height: 90%;
top: 5%;
left: 5%;
background-color: white;
border-radius: 50%;
}
.wrapper:hover .arc {
/* rotate the full element because we can't transition backgrounds */
transform: rotate(-180deg);
}
.gradientExample {
/* just to show the gradient */
height: 20px;
width: 200px;
margin: 0 20px;
background: linear-gradient(90deg, rgba(55, 238, 79, 1) 0%, rgba(55, 238, 79, 1) 50%, rgba(0, 212, 255, 1) 50%, rgba(0, 212, 255, 1) 100%);
}
p {
font-family: Sans-Serif;
font-size: 14px;
margin: 20px 20px 0 20px;
}
<p>Hover over the arc</p>
<div class="wrapper">
<div class="arc"></div>
</div>
<div class="gradientExample"></div>
Option B - Use a clip-path instead of overlapping elements. This is much better but you need to create an SVG object to use for the arc and that's a pain from a sizing standpoint.
.wrapper {
margin: 20px;
width: 200px;
height: 200px;
overflow: hidden;
background-color: lightgray;
cursor: pointer;
}
.svgArc {
width: 100%;
height: 100%;
position: relative;
clip-path: url(#svgPath);
}
.svgArc:after {
/* have to use a pseudo element because we can't rotate the background */
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, rgba(55, 238, 79, 1) 0%, rgba(55, 238, 79, 1) 50%, rgba(0, 212, 255, 1) 50%, rgba(0, 212, 255, 1) 100%);
transition: transform 1s ease;
}
.v2:hover .svgArc:after {
transform: rotate(180deg);
}
p {
font-family: Sans-Serif;
font-size: 14px;
margin: 20px 20px 0 20px;
}
<p>Hover over the gray square</p>
<div class="wrapper v2">
<div class="svgArc">
</div>
</div>
<svg width="0" height="0" viewBox="0 0 200 200">
<defs>
<clipPath id="svgPath">
<path fill="#000000" stroke="#ffffff" stroke-width="1" d="M100,0 L100,10 L100,10 C50.2943725,10 10,50.2943725 10,100 C10,149.705627 50.2943725,190 100,190 L100,200 L100,200 C44.771525,200 0,155.228475 0,100 C0,44.771525 44.771525,0 100,0 Z"></path>
</clipPath>
</defs>
</svg>
Option C - Create an SVG circle and animate the offset-path. See my answer and example here: How to make linear css transition to SVG path?
maybe with css custom variables ?
const Root = document.documentElement
, btColor = document.getElementById('bt-color')
;
btColor.onclick=_=>
{
Root.style.setProperty('--bColor', 'green')
}
:root {
--bColor : blue;
}
.cc{
background-color: transparent;
overflow: hidden;
width: 80px;
}
.curve {
height: 60px;
width: 100%;
background-color: none;
border-radius: 50%;
border: 2px solid var(--bColor);
transform: translateX(50%);
}
<div class="cc">
<div class="curve"></div>
</div>
<br>
<button id="bt-color">change color</button>
I need rounded unblur image effect by mouse hover on Image.
Like:
enter link description here (background)
Angular solution would be perfect, but jQuery or native JS is ok too. Any ideas ?
I've found solution below, but it is not work in some browsers (( In IE 11 image is not blurred.
$("body").on("mousemove", function(event) {
$("#blurarea").css({
top: event.clientY - 75,
left: event.clientX - 75
});
});
html, body { height: 100%; }
body { -webkit-transform: translate3D(0,0, 1px); }
.softarea {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(http://blog.360cities.net/wp-content/uploads/2013/01/Omid.jpg) no-repeat;
-webkit-filter: blur(8px);
filter: grayscale(0.5) blur(10px);
/*firefox only*/
filter:url(#example);
}
.blurarea {
width: 150px;
height: 150px;
border: 1px solid #fff;
box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85),
0 0 7px 7px rgba(0, 0, 0, 0.25),
inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
background: url(http://blog.360cities.net/wp-content/uploads/2013/01/Omid.jpg) no-repeat;
background-attachment: fixed;
border-radius: 50%;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
<body>
<div id="softarea" class="softarea"></div>
<div id="blurarea" class="blurarea"></div>
<svg:svg>
<svg:filter id="example">
<svg:feGaussianBlur stdDeviation="2"/>
</svg:filter>
</svg:svg>
</body>
</html>
I have a canvas in the exact position of another div. I placed these one over the other intentionally.
I have to interact with the div to give input (input via mouse gesture) but the canvas which is right in the same place is not allowing me to give me input.
I can't place the canvas anywhere else because my output is the combination of response from canvas as well as the static elements in the div together.
This is my index.html
<div class="maincontainer">
<h2 id="heading" class="heading">Please set your password</h2>
<div id="patterncontainer" class="patterncontainer">
</div>
<canvas id="canvas" class="canvas"></canvas>
</div>
style.css
.patterncontainer {
margin-left: 32.5px;
position: absolute;
width: 225px;
height: 225px;
background: #66C285;
padding: 7.5px;
border-radius: 10px;
z-index: 1;
}
.canvas {
margin-left: 32.5px;
position: absolute;
left: 0px;
width: 225px;
height: 225px;
padding: 7.5px;
border-radius: 2px;
/*margin: 22.5px;*/
/*background-color: #FFF;*/
/*background-color: rgba(114, 160, 204, 1);*/
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
transform-origin: 0% 0%;
/*-webkit-box-shadow: 0px 0px 15px 5px rgba(114, 160, 204, 1);
-moz-box-shadow: 0px 0px 15px 5px rgba(114, 160, 204, 1);
box-shadow: 0px 0px 15px 5px rgba(114, 160, 204, 1);*/
/*display: none;*/
z-index: -1;
}
This is a part of my js file
var canvas = document.getElementById("canvas");
// canvas.style.display = inline;
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.stroke();
ctx.fillStyle="#FF0000";
How can I interact with patterncontainer div while still having canvas in the same place?
Please do comment if any further information is necessary.
Tell the canvas not to listen for events so the events fall through to the div.
CSS:
canvas{pointer-events:none;}