I have to arranged clients logos in circle as it shows in image, I have tried but
not get perfect circle, There is any template available for this?
Something like this?
To calculate a point on a circle you can use:
var x = Math.cos(point) * size;
var y = Math.sin(point) * size;
and then it's a matter of either looping in the value like I did below, or just manually calculating the points in the circle and hard coding them in.
function getCircle(offset, size, point, circlesize) {
var x = Math.cos(point) * size;
var y = Math.sin(point) * size;
var $div = $('<div class="picturediv"></div>');
var $wrap = $('<div class="wrap"></div>');
$wrap.css({
top: offset + 'px',
left: offset + 'px'
});
$div.css({
top: (size+x) + 'px',
left: (size+y) + 'px',
width: circlesize + 'px',
height: circlesize + 'px'
});
$wrap.append($div);
$('#wrap').append($wrap)
}
for(var c=0;c<6;c++) {
getCircle(200, 100,c * 45,50);
}
for(var c=0;c<=10;c++) {
getCircle(100, 200,c * 25.7, 75);
}
.picturediv {
width: 50px;
height: 50px;
background-color:black;
border: 1px solid red;
border-radius:50%;
position: absolute;
top: 0px;
left: 0px;
background-image: url(https://i.imgur.com/AilIzSF.jpg);
background-position: -219px -193px;;
background-repeat: no-repeat;
}
.wrap {
position: relative;
left: 0px;
left: 0px;
}
#wrap {
width:100%;
height: 100%;
background-color: gray;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
<div class="wrap">
<div class="picturediv" style="width:120px;height:120px;left:265px;top:265px;"></div>
</div>
</div>
Related
I'm attempting to randomly display 6 letters from the list letters in a circle. Currently I've adapted code that displays 6 divs with the class .field and provides a number (0-5) as an attribute to each field.
I'd like to randomly assign and display each letter (without repeating) within each field. However, I'm unsure about how to identify and splice into the list of fields (although I'm also unsure if splicing is the way to go). Does anyone have advice?
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<meta charset="utf-8">
<title></title>
</head>
<style media="screen">
body {
padding: 2em;
}
#container {
width: 600px;
height: 600px;
border: 2px solid blue;
position: relative;
}
.field {
width: 100px;
height: 100px;
position: absolute;
border: 2px solid #f00;
}
.field:hover {
border: 2px solid blue;
}
#crosshair-x {
width: 100px;
height: 2px;
background: #000;
position: absolute;
right: 250px;
top: 300px;
}
#crosshair-y {
width: 2px;
height: 100px;
background: #000;
position: absolute;
left: 300px;
top: 250px;
}
</style>
<body>
Num: <input type="text" value="6" />
<div id="container">
<div id="center"></div>
<div id="crosshair-x"></div>
<div id="crosshair-y"></div>
</div>
</body>
<script type="text/javascript">
function createFields() {
var num = Math.floor(Math.random() * 6) + 1
$('.field').remove();
var container = $('#container');
for (var i = 0; i <
+$('input:text').val(); i++) {
$('<div />', {
'class': 'field',
'attribute': i,
'text': i,
}).appendTo(container);
}
}
function distributeFields() {
var ang = Math.floor(Math.random() * 360) + 0
var radius = 200;
var fields = $('.field'),
container = $('#container'),
width = container.width(),
height = container.height(),
angle = ang,
step = (2 * Math.PI) / fields.length;
fields.each(function() {
var x = Math.round(width / 2 + radius * Math.cos(angle) - $(this).width() / 2);
var y = Math.round(height / 2 + radius * Math.sin(angle) - $(this).height() / 2);
if (window.console) {
console.log($(this).text(), x, y);
}
$(this).css({
left: x + 'px',
top: y + 'px'
});
angle += step;
});
}
$('input').change(function() {
createFields();
distributeFields();
});
createFields();
distributeFields();
letters = ["A","B","C","D","E","F"]
</script>
</html>
I've adapted this code from #ThiefMaster (thank you!): Dynamically arrange some elements around a circle
Here is the thing you are looking for :
var letters;
function createFields() {
var num = Math.floor(Math.random() * 6) + 1
$('.field').remove();
var container = $('#container');
let fieldCount = $('input:text').val();
letters = ["A", "B", "C", "D", "E", "F"];
for (var i = 0; i < fieldCount; i++) {
let randomIndex = Math.floor(Math.random() * letters.length);
$('<div />', {
'class': 'field',
'attribute': i,
'text': letters[randomIndex],
}).appendTo(container);
letters.splice(randomIndex, 1);
}
}
function distributeFields() {
var ang = Math.floor(Math.random() * 360) + 0
var radius = 200;
var fields = $('.field'),
container = $('#container'),
width = container.width(),
height = container.height(),
angle = ang,
step = (2 * Math.PI) / fields.length;
fields.each(function() {
var x = Math.round(width / 2 + radius * Math.cos(angle) - $(this).width() / 2);
var y = Math.round(height / 2 + radius * Math.sin(angle) - $(this).height() / 2);
if (window.console) {
//console.log($(this).text(), x, y);
}
$(this).css({
left: x + 'px',
top: y + 'px'
});
angle += step;
});
}
$('input').change(function() {
createFields();
distributeFields();
});
createFields();
distributeFields();
body {
padding: 2em;
}
#container {
width: 600px;
height: 600px;
border: 2px solid blue;
position: relative;
}
.field {
width: 100px;
height: 100px;
position: absolute;
border: 2px solid #f00;
}
.field:hover {
border: 2px solid blue;
}
#crosshair-x {
width: 100px;
height: 2px;
background: #000;
position: absolute;
right: 250px;
top: 300px;
}
#crosshair-y {
width: 2px;
height: 100px;
background: #000;
position: absolute;
left: 300px;
top: 250px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Num: <input type="text" value="6" />
<div id="container">
<div id="center"></div>
<div id="crosshair-x"></div>
<div id="crosshair-y"></div>
</div>
I understand that we need to use transform: rotate(ndeg); in order to rotate a specific element in CSS. In this case, I want to do it dynamically. Using jQuery, I want to rotate the box/container div when the user drags the handle (the red background) on n degrees as the user wishes. Is it possible in jQuery?
body {
padding: 50px;
}
.box_element {
border: 1px solid black;
width: 200px;
height: 200px;
position: relative;
z-index: -1;
}
.handle {
position: absolute;
bottom: -10px;
right: -10px;
width: 10px;
height: 10px;
border: 1px solid;
background: red;
z-index: 10;
}
<body>
<div class="box_element">
THIS IS TEST
<div class="handle"></div>
</div>
</body>
Here you need to write few code to make it possible, try live code https://codepen.io/libin-prasanth/pen/xxxzbLg
var stop,
active = false,
angle = 0,
rotation = 0,
startAngle = 0,
center = {
x: 0,
y: 0
},
R2D = 180 / Math.PI;
function start(e) {
e.preventDefault();
var bb = this.getBoundingClientRect(),
t = bb.top,
l = bb.left,
h = bb.height,
w = bb.width,
x,
y;
center = {
x: l + w / 2,
y: t + h / 2
};
x = e.clientX - center.x;
y = e.clientY - center.y;
startAngle = R2D * Math.atan2(y, x);
return (active = true);
}
function rotate(e) {
e.preventDefault();
var x = e.clientX - center.x,
y = e.clientY - center.y,
d = R2D * Math.atan2(y, x);
rotation = d - startAngle;
return (rot.style.webkitTransform = "rotate(" + (angle + rotation) + "deg)");
}
function stop() {
angle += rotation;
return (active = false);
}
rot = document.getElementById("draggable");
rot.addEventListener("mousedown", start, false);
window.addEventListener("mousemove", function(event) {
if (active === true) {
event.preventDefault();
rotate(event);
}
});
window.addEventListener("mouseup", function(event) {
event.preventDefault();
stop(event);
});
#draggable {
left: 50px;
top: 50px;
width: 100px;
height: 100px;
position: relative;
border: 1px solid #000;
}
#draggable:before{
content: "";
position: absolute;
bottom: -5px;
right: -5px;
width: 10px;
height: 10px;
background: #f00;
}
<div id="draggable">
</div>
You can make use of a css-variable and then change the value of the variable when clicked.
const box_element = document.getElementById('box_element');
const handle = document.getElementById('handle');
handle.addEventListener('click', function() {
let currentVal = getComputedStyle(box_element).getPropertyValue('--rotate_deg');
box_element.style.setProperty(
'--rotate_deg', ((parseInt(currentVal.replace('deg', '')) + 90) % 360) + 'deg');
});
:root {
--rotate_deg: 0deg;
}
.box_element {
margin: 1em;
border: 1px solid black;
width: 100px;
height: 100px;
position: relative;
z-index: -1;
transform: rotate(var(--rotate_deg))
}
.handle {
position: absolute;
bottom: -10px;
right: -10px;
width: 10px;
height: 10px;
border: 1px solid;
background: red;
z-index: 10;
cursor: pointer;
}
<div class="box_element" id="box_element">
THIS IS TEST
<div class="handle" id="handle"></div>
</div>
Fiddle link
I am trying to make this circle in perspective(check fiddle link). I tried the css property but it shows unusual behaviour.
/*
using:
circular positioning code:
http://stackoverflow.com/a/10152437/1644202
point at:
http://pointat.idenations.com/api
depends on:
jquery
https://github.com/thomas-dotworx/jqrotate (pointat)
*/
function createFields() {
$('.field').remove();
var container = $('#container');
for(var i = 0; i < +$('input:text').val(); i++) {
$('<div/>', {
'class': 'field',
'text': i + 1,
}).appendTo(container);
}
}
function distributeFields(deg) {
deg = deg || 0;
var radius = 200;
var fields = $('.field:not([deleting])'), container = $('#container'),
width = container.width(), height = container.height(),
angle = deg || Math.PI*3.5, step = (2*Math.PI) / fields.length;
fields.each(function() {
var x = Math.round(width/2 + radius * Math.cos(angle) - $(this).width()/2);
var y = Math.round(height/2 + radius * Math.sin(angle) - $(this).height()/2);
if(window.console) {
console.log($(this).text(), x, y);
}
$(this).css({
left: x + 'px',
top: y + 'px'
});
angle += step;
});
}
$('input').change(function() {
createFields();
distributeFields();
initPointAt();
});
var timer = null,
timer2 = null;
$('#addone').click(function() {
// do not append to current, otherwise you see it moving through the container
$('.field').addClass('moveAni');
$('<div/>', {
'class': 'field',
'text': $('.field').length +1
})
.css({
left: $('#container').width()/2-25 + 'px',
top: $('#container').height()/2-25 + 'px'})
.addClass('moveAni')
.appendTo('#container')
.pointat({
target: "#center",
defaultDirection: "down"
});
distributeFields();
// without css:
//$('.field').pointat("updateRotation");
// with css: for css move animation
clearInterval(timer); clearTimeout(timer2);
timer = setInterval(function() {
$('.field').pointat({
target: "#center",
defaultDirection: "down"
}); // does not seem to update correctly: .pointat("updateRotation")
}, 20);
timer2 = setTimeout(function() {
clearInterval(timer);
}, 420); // css animation timeout, interval +1 extra to update after the ani
// update input field
$('input:text').val($('.field').length);
});
$('#delone').click(function() {
$('#container .field:not([deleting]):last')
.attr('deleting', 'true')
.css({
left: $('#container').width()/2-25 + 'px',
top: $('#container').height()/2-25 + 'px'
})
.fadeOut(400, function() {
$(this).remove();
});
// do distribiution as if the currently out-animating fields are gone allready
distributeFields();
clearInterval(timer); clearTimeout(timer2);
timer = setInterval(function() {
$('.field').pointat({
target: "#center",
defaultDirection: "down"
}); // does not seem to update correctly: .pointat("updateRotation")
}, 20);
timer2 = setTimeout(function() {
clearInterval(timer);
}, 420); // css animation timeout, interval +1 extra to update after the ani
// update input field
$('input:text').val($('.field:not([deleting])').length); // update yet
});
createFields();
distributeFields();
initPointAt();
function initPointAt() {
$('.field').pointat({
target: "#center",
defaultDirection: "down",
xCorrection: -20,
yCorrection: -20
});
}
body { padding: 2em; }
#container { width: 600px; height: 600px; border: 1px solid #000; position: relative; border-radius: 50%;}
#center { width: 10px; height: 10px; position: absolute; left: 295px; top: 295px; background: #000; border-radius: 50%; }
.field { position: absolute; background: #f00; }
#crosshair-x { width: 600px; height: 1px; background: #000; position: absolute; left: 0; top: 300px; }
#crosshair-y { width: 1px; height: 600px; background: #000; position: absolute; left: 300px; top: 0; }
.field {
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
}
.moveAni {
transition: left 400ms ease-out, top 400ms ease-out;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//pointat.idenations.com/jquery.pointat.min.js"></script>
<script src="//pointat.idenations.com/jquery.rotate-1.0.1.min.js"></script>
Number of fields: <input type="text" value="4" />
<button id="addone">++</button>
<button id="delone">--</button>
<div id="container">
<div id="center"></div>
<div id="crosshair-x"></div>
<div id="crosshair-y"></div>
</div>
Then i inserted an image tad inside container and tried to add field inside image tag.
I achieved this using three.js but don't want to do this in it because it takes too much time to load.
Wrap your container in another div you apply perspective to. The perspective must be applied to the parent, not to the element itself.
Updated Fiddle link : http://jsfiddle.net/w840vkbL/1/
#perspective {
perspective: 500px;
width: 150px;
}
#container {
transform: rotateY(40deg);
background: lightblue;
height: 150px;
}
<div id="perspective">
<div id="container">
<h3>SOME PERSPECTIVE CONTENT</h3>
</div>
</div>
I have a panel on the left side of my screen that flips out when activated. As you move your mouse around, it slightly alters the rotateY transform for a nice interactive effect. I want to mirror this on the right side of the screen, but every adjustment I make just causes the panel to freak out when you move the mouse.
What adjustments need to be made to the second jquery function to mirror the effect? I tried a lot of things including the current code which is replacing x = x + 15 with x = 360 - (x + 15). It's close, but still not right.
$(document).on('mousemove','#viewport1 .menu',function( event ) {
var x = Math.round(event.pageX / $(this).width() * 10);
x = x + 15;
$(this).css('transform','rotateY(' + x + 'deg)');
});
$(document).on('mousemove','#viewport2 .menu',function( event ) {
var x = Math.round(event.pageX / $(this).width() * 10);
x = 360 - (x + 15); //this is almost but not quite right...
$(this).css('transform','rotateY(' + x + 'deg)');
});
.viewport {
perspective: 1000px;
position: absolute;
top: 0; bottom:0; width: 30%;
padding: 5px;
}
.menu {
text-align: center;
width: 100%;
border: 1px solid black;
display: inline-block;
height: 100%;
}
#viewport1 {
left: 0;
}
#viewport1 .menu {
perspective-origin: left;
transform-origin: left;
transform: rotateY(15deg);
}
#viewport2 {
text-align: right;
right: 0;
}
#viewport2 .menu {
perspective-origin: right;
transform-origin: right;
transform: rotateY(345deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="viewport1" class="viewport">
<div class="menu">HOVER ME!</div>
</div>
<div id="viewport2" class="viewport">
<div class="menu">HOVER ME!</div>
</div>
You are using event.pageX, which is the position of the mouse pointer, relative to the left edge of the document, to calculate the rotation of the <div>. You need to substract the left offset: $(this).offset().left. After that you change x+15 to x-15 and you get the mirrored effect.
$(document).on('mousemove','#viewport1 .menu',function( event ) {
var x = Math.round(event.pageX / $(this).width() * 10);
x = x + 15;
$(this).css('transform','rotateY(' + x + 'deg)');
});
$(document).on('mousemove','#viewport2 .menu',function( event ) {
var x = Math.round((event.pageX - $(this).offset().left) / $(this).width() * 10);
x = x - 15;
$(this).css('transform','rotateY(' + x + 'deg)');
});
.viewport {
perspective: 1000px;
position: absolute;
top: 0; bottom:0; width: 30%;
padding: 5px;
}
.menu {
width: 100%;
border: 1px solid black;
display: inline-block;
height: 100%;
}
#viewport1 {
left: 0;
}
#viewport1 .menu {
perspective-origin: left;
transform-origin: left;
transform: rotateY(15deg);
}
#viewport2 {
text-align: right;
right: 0;
}
#viewport2 .menu {
perspective-origin: right;
transform-origin: right;
transform: rotateY(345deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="viewport1" class="viewport">
<div class="menu"></div>
</div>
<div id="viewport2" class="viewport">
<div class="menu"></div>
</div>
Hello
So I started to write some function witch will do this(closer you move mouse to div the closer div moves to mouse position on parent X axsis, maximum div position is left:-40% and minimum is left: -80%):
Note: The black arrow is cursor(mouse position)
Code
HTML markup:
<div class="wraper">
<div class="ls">
<div class="ldiv">
</div>
</div>
<div class="c">
<div class="coordinates">
</div>
<div class="cdiv">
</div>
</div>
<div class="rs">
<div class="rdiv">
</div>
</div>
</div>
CSS markup:
body{
margin: 0;
padding: 0;
}
.wraper{
width: 100%;
height: 500px;
}
.ls, .rs{
position: relative;
float: left;
width: 30%;
height: 100%;
background-color: #eeeeee;
}
.c{
position: relative;
float: left;
width: 40%;
height: 100%;
background-color: #dddddd;
}
.cdiv{
position: absolute;
top: 25%;
left: 10%;
width: 80%;
height: 50%;
background-color: red;
}
.ldiv{
position: absolute;
top: 30%;
left: -80%;
width: 80%;
height: 40%;
background-color: red;
}
.rdiv{
position: absolute;
top: 30%;
right: -40%;
width: 80%;
height: 40%;
background-color: red;
}
Javacsript markup:
//ASsign global variables
var mouseX = 0;
var newTop = 0;
$("div.ls").mousemove(function(event) {
// Get parrent offset
var parentOffset = $(this).offset();
// Get child division offset
var division = $(".ldiv").offset();
// Calculate mouse position inside left division
var relX = event.pageX - parentOffset.left;
var relY = event.pageY - parentOffset.top;
// Check if mouse changed its position
if (mouseX != relX){
// Get new position of x axis
var newPosX = $(this).width() - relX - 161;
// Get new height of child element in percentage
var newHeight = 100 * parseFloat($(".ldiv").height()) / parseFloat($(this).height());
// Display important stuff
$(".coordinates").text("Mouse position = X:" + relX + " Y:" + relY + "Div offset = X:" + division.left + " Y:" + division.top + " Width = " + $(this).width()+" newHJeight = "+newHeight);
//If mouse moves left
if (mouseX > relX) {
// Cant go lower then 0.2 because javascript is rounding it down
newHeight += 0.2;
// calculate new top so division stays in middle of parent
newTop = (100 - newHeight) / 2;
// Assign new css
$(".ldiv").css({
left: newPosX + "px",
height: newHeight + "%",
top: newTop + "%"
});
}
//If mouse moves right
else {
newHeight -= 0.2;
newTop = (100 - newHeight) / 2;
$(".ldiv").css({
left: newPosX + "px",
height: newHeight + "%",
top: newTop + "%"
});
}
// Record mouse position
mouseX = relX;
}
});
Here is live example in jsFiddle
Things I want to get done:
How can I rewrite this code so it would work more like animation, and wouldn't go out of order if I would move mouse to fast?
I would'n rely on mousemove, I would Use requestAnimationFrame [or a simple setTimeout] instead.
that way you would have a way lesser load on your cpu and a smoother animation.