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.
Related
I am trying to make a sticky banner witn html and css and js. My html is this
window.addEventListener('scroll', function(ev) {
var distanceToTop = container.getBoundingClientRect().top;
if (container.getBoundingClientRect().top >= document.documentElement.scrollTop - screen.height + 400) {
sticky.style.top = "100px"
} else {
sticky.style.top = document.documentElement.scrollTop - screen.height + 400 + "px";
}
});
.container {
background: red;
width: 600px;
height: 100px;
position: relative;
}
.sticky {
background: blue;
width: 200px;
height: 200px;
position: absolute;
right: 0;
top: 100px;
}
<div class="container">
<div class="sticky"></div>
</div>
I would want when i scroll the window the stocky div to be center on y axis and when the distance between container and top of the page is less then 200px the two divs to be attached.
Can anyone to give me a clue?
I tried this:
function getPosition(e) {
var rect = e.target.getBoundingClientRect();
var x = e.clientX - rect.left;
var y = e.clientY - rect.top;
return {
x,
y
}
}
window.addEventListener("click", function(event) {
document.getElementById("info").innerHTML = "ID: " + event.target.id + "<br> X: " + getPosition(event).x + " Y: " + getPosition(event).y;
});
body {
perspective: 400px;
margin: 0;
}
#test {
width: 400px;
height: 400px;
background-color: red;
transform: rotateY(45deg);
position: absolute;
left: 40%;
}
#info {
position: absolute;
right: 0;
top: 0;
box-shadow: 0px 0px 10px black;
width: 200px;
border-radius: 10px;
padding: 5px;
}
<div id="info"></div>
<div style="margin-top: 10%;">
<div id="test">
</div>
</div>
Link to jsfiddle
but it does just work without a 3D Rotation. If I click for example in the bottom right corner of the red div, then it should give me back something arround (because you never hit the corner exact) X: 300px and Y: 300px. But this works just when the element is with no rotation. So how can I get the clicked Position with 3d rotation? (if the rotation changes, then it must work too!)
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>
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>
How can I get the position of the cursor in percentage? I tried this so far.
$(".outter").click(function(e) {
var perc = e.offsetX / $(this).width() * 100;
if (perc > 100)
perc = 100;
$(this).children(".progress").css("width", perc + "%");
});
$(".outter").dblclick(function(e) {
$(this).children(".progress").css("width", "100%");
});
.outter {
display: inline-block;
width: 33.33%;
box-sizing: border-box;
border: 2px solid black;
padding: 10px;
position: relative;
}
.outter > .content {
position: relative;
z-index: 2;
}
.outter > .progress {
position: absolute;
top: 0;
left: 0;
background-color: #29B6AC;
height: 100%;
width: 50%;
z-index: 1;
transition: all .3s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outter">
<div class="content">
Some content...
</div>
<div class="progress"></div>
</div>
My problem is, that the value inside perc isn't correct. In the middle at about 50% it seems like ok. But if you click at about 10% od 90% you can see the backgroundbar won't stop at your cursor position. What did I wrong?
The .outter div has a padding of 10px, and since you are using jquery's .width() which will not include those 20 pixels.
You can either can get rid of the padding or you can use .outerWidth() to get the correct size.
Your padding css on the outter class messed up the offsetX module, try setting the padding to 0px and everything will work as intended... read on the offsetX API/doc
The calculation should be something like:
$(".outter").click(function(e) {
var parentOffset = $(this).parent().offset();
var relX = e.pageX - parentOffset.left;
var perc = relX / $(this).width() * 100;
...