How to move a div in a semicircle
here is my .html file
<div class="progress">
<div class="barOverflow">
<div class="bar"></div>
</div>
<div id="b" style="position:absolute;"> <img src="assets/Mostly_Cloudy.png" /> </div>
</div>
.css file
.progress{
position: relative;
margin-left: 100px;
margin-top: 35px;
margin-bottom: -52px;
float:left;
text-align: center;
}
.barOverflow{ /* Wraps the rotating .bar */
position: relative;
overflow: hidden; /* Comment this line to understand the trick */
width: 200px; height: 100px; /* Half circle (overflow) */
margin-bottom: -14px; /* bring the numbers up */
}
.bar{
position: absolute;
top: 0; left: 0;
width: 200px; height: 200px; /* full circle! */
border-radius: 50%;
box-sizing: border-box;
border: 5px solid #dedede; /* half gray, */
border-bottom-color: #ffde3e; /* half azure */
border-right-color: #ffde3e;
}
div#b {
width: 25%;
}
.ts file
setTimeout(()=>{
$(".progress").each(function(){
var int = 100;
var $bar = $(this).find(".bar");
var $img = $(this).find("#b");
var perc =100;
$({p:0}).animate({p:perc}, {
// duration: 1*12*60*60*1000,
duration: 30*1000,
easing: "swing",
step: function(p) {
$bar.css({
transform: "rotate("+ (45+(p*1.8)) +"deg)", // 100%=180° so: ° = % * 1.8
// 45 is to add the needed rotation to have the green borders at the bottom
});
}
});
$("#b").animate({left: "+="+perc},{
duration:30*1000,
easing:"swing"
});
});
},100)
referring to this Question stack I got the idea of rotation, but I cannot move the image along with the rotation.
how to make my image float along with the
.bar
div color .
This image is where I wanted it to act as a line finder
The actual image looks like this
+3
source to share
4 answers
Try making a few additional changes. Perhaps this will be what you expect.
<div class="barOverflow">
<div class="bar">
<div id="b" style="position:absolute;"> <img src="http://images.clipartpanda.com/clipart-sun-clip_art_image_of_a_bright_sunshine_0071-0902-0318-3204_SMU.jpg" width="50px"/> </div>
</div>
+3
source to share
This is one way to do it. As per my comment on your post.
FIDDLEJS link
.large {
position: absolute;
background-color: red;
height: 50px;
width: 200px;
top: 100px;
left: 50px;
transform: rotate(180deg);
animation-name: rotate;
animation-duration: 4s;
/*animation-iteration-count: infinite;*/
animation-timing-function: linear;
}
@-webkit-keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(180deg);}
}
/* Standard syntax */
@keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(180deg);}
}
.small {
position: relative;
width: 40px;
height: 40px;
background-color: green;
top: 5px;
left: 5px;
transform: rotate(-180deg);
animation-name: rotateCCW;
animation-timing-function: linear;
animation-duration: 4s;
/*animation-iteration-count: infinite;*/
}
@-webkit-keyframes rotateCCW {
0% {transform: rotate(0deg);}
100% {transform: rotate(-180deg);}
}
/* Standard syntax */
@keyframes rotateCCW {
0% {transform: rotate(0deg);}
100% {transform: rotate(-180deg);}
}
+1
source to share
Here you can rotate the image in a semicircle. Modified code from this post - How do I move an image along a circular path using jquery?
var t = 0;
function moveit() {
t += 0.05;
var r = -100;
var xcenter = 100;
var ycenter = 100;
var newLeft = Math.floor(xcenter + (r * Math.cos(t)));
var newTop = Math.floor(ycenter + (r * Math.sin(t)));
$('#friends').animate({
top: newTop,
left: newLeft,
}, 10, function() {
if(newLeft<199)
{
moveit();
}
});
}
$(document).ready(function() {
moveit();
});
#friends { position: absolute; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://jsfiddle.net/img/logo.png"
id="friends"/>
+1
source to share
I did it in canvas adding some changes. This is a more efficient approach using asynchronous frames. Transparent background.
<div class="progress">
<canvas id="canvas"></canvas>
<div class="container">
<img src="http://images.clipartpanda.com/vector-clouds-png-KinejMzkT.png" />
</div>
</div>
+1
source to share