I wanted to recreate the text colour overlay clip-path effect from this site http://fleurmoreau.fr/
I made a version here https://codepen.io/Kerrys7777/pen/eYOrwbV. It seems to work OK, but hovering some areas seems to cause a bubbling effect? What can I change to make it smooth and functional?
I was following the tutorial https://www.youtube.com/watch?v=l_ahowxmqzg but using pure JavaScript.
I think the 'mouseout' function/method is causing this (bubbling) issue?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="all">
<style>
#import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond:300,700|Titillium+Web:200,400,400i,700&display=swap');
:root {
--maskX: 0;
--maskY: 50;
}
*,*:before,*:after {
box-sizing: border-box;
}
body {
font-family: 'Titillium Web', sans-serif;
font-size: 18px;
line-height: 1.4;
color: #161B1E;
}
h1,
h2,
h3,
h4
{
font-family: 'Cormorant Garamond', serif;
margin: 0;
}
h1 {
font-size: 15vw;
}
#titleContainer {
position: relative;
margin: 100px 0 0 50px;
display: inline-block;
}
p {
margin-left: 80px;
font-size: 1em;
}
.titleWrapper {
cursor: pointer;
color: #D4BBAB;
padding: 30px;
/*--maskX: 0;
--maskY: 50;*/
}
.cloneWrapper {
position: absolute;
top: 0;
left: 0;
color:#f2dcca;
/*clip-path: polygon(0 0, calc(var(--maskX) * 1%) 0, calc(var(--maskY) * 1%) 100%, 0% 100%);*/
transition: all 0.8s cubic-bezier(0.165,0.84,0.44,1);
clip-path: polygon(0 0,calc(var(--maskX) * 1% + (var(--maskY) - 50) * .4%) 0,calc(var(--maskX) * 1% + (var(--maskY) - 50) * -.4%) 100%,0 100%)
}
</style>
</head>
<body>
<section id="titleContainer">
<div class="titleWrapper">
<h1>Text Effect</h1>
</div>
<div class="titleWrapper cloneWrapper">
<h1>Text Effect</h1>
</div>
</section>
<p>Mouse over the rectangle above, and get the coordinates of your mouse pointer.</p>
<p id="demo"></p>
<script>
//GET MOUSE POSITION RELATIVE TO THIS ELEMENT
var titleContainerBox = document.getElementById("titleContainer");
//ADD EVENT (MOUSEMOVE) LISTENER
titleContainerBox.addEventListener("mousemove", function(event) {
mousePosMove(event);
});
//ADD EVENT (RESIZE) LISTENER
titleContainerBox.addEventListener("resize", function(event) {
mousePosMove(event);
});
/*['mousemove','resize'].forEach( evt =>
titleContainerBox.addEventListener(evt, mousePosMove(event), false)
);*/
function mousePosMove(e) {
//GET CONTAINER DIMENSIONS
var rect = titleContainerBox.getBoundingClientRect();
var width = titleContainerBox.clientWidth;
var height = titleContainerBox.clientHeight;
//MOUSE POSITION PX INSIDE titleContainer
var x = e.clientX - rect.left;
var y = e.clientY - rect.top;
//MOUSE POSITION PERCENTAGE INSIDE titleContainer
var oX = Math.floor((x/width) * 100);
var oY = Math.floor((y/height) * 100);
//UPDATE CSS VARIABLES
titleContainerBox.style.setProperty('--maskX', oX);
titleContainerBox.style.setProperty('--maskY', oY);
//SHOW INFO IN PAGE
var mouseCoordinates = "Coordinates: (" + x + ", " + y + ")" + "<br>" + " Dimensions: (" + width + ", " + height + ")" + "<br>" + " Percentage relative position: (" + oX + ", " + oY + ")";
document.getElementById("demo").innerHTML = mouseCoordinates;
}
//ADD EVENT (MOUSEOUT) LISTENER TO REMOVE EFFECT
titleContainerBox.addEventListener("mouseout", function(event) {
mousePosOut(event);
});
function mousePosOut(e) {
//SET CSS VARIABLES TO ZERO (REMOVE EFFECT)
setTimeout(function() {
titleContainerBox.style.setProperty('--maskX', 0); //-16 VALUE TO CORRECT CORNER ISSUE
titleContainerBox.style.setProperty('--maskY', 0);
}, 1000);
}
</script>
</body>
</html>
BTW where has the live example code setup window gone here at SO?
The mouseout event was causing the issue. Changed to mouseleave and some other minor tweaks. Seems to work fine now.
//GET MOUSE POSITION RELATIVE TO THIS ELEMENT TO FEED CLIP-PATH CSS VARIABLE VALUES
var titleContainerBox = document.getElementById("titleContainer");
//ADD EVENT (MOUSEMOVE) LISTENER
titleContainerBox.addEventListener("mousemove", function(event) {
mousePosMove(event);
});
//ADD EVENT (RESIZE) LISTENER
titleContainerBox.addEventListener("resize", function(event) {
mousePosMove(event);
});
/*['mousemove','resize'].forEach( evt =>
titleContainerBox.addEventListener(evt, mousePosMove(event), false)
);*/
function mousePosMove(e) {
//GET CONTAINER DIMENSIONS
var rect = titleContainerBox.getBoundingClientRect();
var width = titleContainerBox.clientWidth;
var height = titleContainerBox.clientHeight;
//MOUSE POSITION PX INSIDE titleContainer
var x = e.clientX - rect.left;
var y = e.clientY - rect.top;
//MOUSE POSITION PERCENTAGE INSIDE titleContainer
var oX = Math.floor((x/width) * 100);
var oY = Math.floor((y/height) * 100);
//UPDATE CSS VARIABLES
titleContainerBox.style.setProperty('--maskX', oX);
titleContainerBox.style.setProperty('--maskY', oY);
//SHOW INFO IN PAGE
var mouseCoordinates = "Coordinates: (" + x + ", " + y + ")" + "<br>" + " Dimensions: (" + width + ", " + height + ")" + "<br>" + " Percentage relative position: (" + oX + ", " + oY + ")";
document.getElementById("demo").innerHTML = mouseCoordinates;
}
//ADD EVENT (MOUSEOUT) LISTENER TO REMOVE EFFECT
titleContainerBox.addEventListener("mouseleave", function( event ) {
//SET CSS VARIABLES TO ZERO AFTER A SHORT DELAY
setTimeout(function() {
titleContainerBox.style.setProperty('--maskX', -16);
titleContainerBox.style.setProperty('--maskY', 0);
}, 700);
}, false);
#import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond:300,700|Titillium+Web:200,400,400i,700&display=swap');
:root {
--maskX: 0;
--maskY: 50;
}
*,*:before,*:after {
box-sizing: border-box;
}
body {
font-family: 'Titillium Web', sans-serif;
font-size: 18px;
line-height: 1.4;
color: #161B1E;
}
h1,
h2,
h3,
h4
{
font-family: 'Cormorant Garamond', serif;
margin: 0;
}
h1 {
font-size: 15vw;
}
#titleContainer {
position: relative;
z-index: 3;
margin: 100px 0 0 50px;
}
p {
margin-left: 80px;
font-size: 1em;
}
.titleWrapper {
cursor: pointer;
color: #D4BBAB;
padding: 30px;
/*--maskX: 0;
--maskY: 50;*/
}
.cloneWrapper {
position: absolute;
top: 0;
left: 0;
color:#f2dcca;
/*clip-path: polygon(0 0, calc(var(--maskX) * 1%) 0, calc(var(--maskY) * 1%) 100%, 0% 100%);*/
transition: all 0.8s cubic-bezier(0.165,0.84,0.44,1);
clip-path: polygon(0 0,calc(var(--maskX) * 1% + (var(--maskY) - 50) * .4%) 0,calc(var(--maskX) * 1% + (var(--maskY) - 50) * -.4%) 100%,0 100%)
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Clip Path Text Colour Effect</title>
</head>
<body>
<section id="titleContainer">
<div class="titleWrapper">
<h1>Text Effect</h1>
</div>
<div class="titleWrapper cloneWrapper">
<h1>Text Effect</h1>
</div>
</section>
<p>Mouse over the rectangle above, and get the coordinates of your mouse pointer.</p>
<p id="demo"></p>
</body>
</html>
Related
I have some image assets (folders in this example), where I can drag around and then use the "reset" button to essentially clean them up. However, after you reset the positions and try to drag again, it takes you all the way back to where you dragged it previously? Odd right??? Any help is greatly appreciated!
Again, looking to just solve for:
Let the user drag a folder/image
Let the user reset/clean-up
Let the user drag again, but starting from "reset"
"use strict";
// Reset Folder position on Clean Up
$(".reset-position").click(function () {
// Reset position
$(".resize-drag").removeAttr("style").css("transition", ".5s");
setTimeout(function () {
$(".resize-drag").removeAttr("style");
}, 600);
});
interact(".resize-drag")
.draggable({
onmove: window.dragMoveListener,
})
.resizable({
preserveAspectRatio: false,
edges: { left: false, right: false, bottom: false, top: false },
})
.on("resizemove", function (event) {
var target = event.target,
x = parseFloat(target.getAttribute("data-x")) || 0,
y = parseFloat(target.getAttribute("data-y")) || 0;
// update the element's style
target.style.width = event.rect.width + "px";
target.style.height = event.rect.height + "px";
// translate when resizing from top or left edges
x += event.deltaRect.left;
y += event.deltaRect.top;
target.style.webkitTransform = target.style.transform =
"translate(" + x + "px," + y + "px)";
target.setAttribute("data-x", x);
target.setAttribute("data-y", y);
target.textContent = event.rect.width + "×" + event.rect.height;
});
function dragMoveListener(event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute("data-x")) || 0) + event.dx,
y = (parseFloat(target.getAttribute("data-y")) || 0) + event.dy;
// translate the element
target.style.webkitTransform = target.style.transform =
"translate(" + x + "px, " + y + "px)";
// update the posiion attributes
target.setAttribute("data-x", x);
target.setAttribute("data-y", y);
}
:root {
--font-color: #000;
--font-size: 13px;
}
html,
body {
overflow: hidden;
background:white;
}
p {
font-size: var(--font-size);
text-align: center;
padding-top: 5px;
color: var(--font-color) !important;
}
.folder-container-1 {
width: 82px;
position: absolute;
right: 30px;
top: 10%;
cursor: pointer;
}
#folders {
width: 82px;
display: flex;
align-content: center;
justify-content: center;
}
#folders:active {
opacity: 0.7;
transform: rotate(4deg);
background: rgba(0, 0, 0, 0.5);
border-radius: 4px;
border: 1px solid grey;
}
.resize-drag {
box-sizing: border-box;
touch-action: none !important;
user-select: none !important;
}
.resize-container {
width: 100%;
height: 240px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Folder Reset Position</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<div class="folder-container-1">
<div class="folder-1 resize-drag projects-folder" data-target="#myProjects">
<img src="https://i.ibb.co/C2W4qR0/folder.png" id="folders" title="folder" alt="folder" />
<p>Folder 1</p>
</div>
<div class="folder-1 resize-drag components-folder" data-target="#myComponents">
<img src="https://i.ibb.co/C2W4qR0/folder.png" id="folders" title="folder" alt="folder" />
<p>Folder 2</p>
</div>
<div class="folder-1 resize-drag about-folder" data-target="#aboutMe">
<img src="https://i.ibb.co/C2W4qR0/folder.png" id="folders" title="folder" alt="folder" />
<p>Folder 3</p>
</div>
<button class="reset-position">Reset</button>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.6/interact.min.js"></script>
<script src="/script.js"></script>
<script src="/drag.js"></script>
</html>
You have the data-x/data-y attribute still attached to the draggable even after reset. Try removing that and it should work fine.
I'm quite not sure why you need setTimeout to remove the style attribute though. I have added an extra statement to remove data-x and data-y. Maybe you can clean that up to a single statement
$(".reset-position").click(function () {
// Reset position
$(".resize-drag").removeAttr("style").css("transition", ".5s");
$(".resize-drag").removeAttr('data-x data-y');
setTimeout(function () {
$(".resize-drag").removeAttr("style");
}, 600);
});
I'm trying to recreate the 3D hover-effect likely the Steam cards but i'm having an issue with FF and Edge regarding compatibility. I use the prefixes correctly I think but it doesn't work. Chrome is working fine btw. I have the code running on Sololearn too (https://code.sololearn.com/WaQaFKu9D2er/#html)
Here's the code:
function MoveAround(event) {
var cX = event.clientX;
var cY = event.clientY;
var oL = event.target.offsetLeft;
var oT = event.target.offsetTop;
var oW = event.target.offsetWidth;
var oH = event.target.offsetHeight;
var x = (cX - oL - (oW / 2)) / 5;
var y = ((cY - oT - (oH / 2)) / 5) * -1;
// Added following lines to convert negative values before representation.
while (x < 0) {
x = x + 360;
}
while (x > 360) {
x = x - 360;
}
while (y < 0) {
y = y + 360;
}
while (y > 360) {
y = y - 360;
}
var elem = event.target.style;
elem.width = "300px";
elem.height = "300px";
elem.transform = "rotateX(" + y + "deg) rotateY(" + x + "deg)";
console.log("cX: ", cX, " cY: ", cY, " oL: ", oL, " oT: ", oT, " oW: ", oW, " oH: ", oH, " x: ", x, " y: ", y)
}
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 500px;
background-color: #382525;
transform: perspective(800px);
transform-style: preserve-3d;
}
#Demo {
position: relative;
width: 200px;
height: 200px;
border: 7px solid white;
background-image: url("https://www.chi.lu/cats/cat.jpg");
background-position: center;
text-align: center;
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.3);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>On Mouse Move</title>
<link rel="stylesheet" type="text/css" href="mousemove.css" />
</head>
<body>
<div id="Demo" onmousemove="MoveAround(event)">
</div>
<script src="mousemove.js"></script>
</body>
</html>
If anyone has an idea what i'm doing wrong, please help me in this matter.
Thank you and best regards,
Claude
I'm trying to show HTML code inside a tooltip (div, table,...), but it doesn't show up and it doesn't show any errors.
If I use the <span> tag with some text inside it, it works correctly. But I need to insert more HTML code inside it. How can I fix it?
Only works with <span> tag, and I don't know how to solve this problem, any help? Why is this happening?
$(document).ready(function() {
//Tooltips
$(".tip_trigger").hover(function(){
tip = $(this).find('.tip');
tip.show(); //Show tooltip
}, function() {
tip.hide(); //Hide tooltip
}).mousemove(function(e) {
var mousex = e.pageX + 20; //Get X coodrinates
var mousey = e.pageY + 20; //Get Y coordinates
var tipWidth = tip.width(); //Find width of tooltip
var tipHeight = tip.height(); //Find height of tooltip
//Distance of element from the right edge of viewport
var tipVisX = $(window).width() - (mousex + tipWidth);
//Distance of element from the bottom of viewport
var tipVisY = $(window).height() - (mousey + tipHeight);
if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
mousex = e.pageX - tipWidth - 20;
} if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
mousey = e.pageY - tipHeight - 20;
}
tip.css({ top: mousey, left: mousex });
});
});
body {
margin: 0; padding: 0;
font: normal 12px Verdana, Geneva, sans-serif;
line-height: 1.8em;
color: #333;
}
* {
outline: none;
}
img {border: none;}
a {color: #d60000; text-decoration: none;}
/*--Tooltip Styles--*/
.tip {
display: inline-block;
color: #fff;
background:#1d1d1d;
display:none; /*--Hides by default--*/
padding:10px;
position:absolute; z-index:1000;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<p style="text-align:left;">My First
<a href="#" class="tip_trigger">Link
<span class="tip">
Some text. Works correctly!
</span>
</a>
</p>
<p style="text-align:left;">My Second
<a href="#" class="tip_trigger">Link
<div class="tip">
<table><tr><td>More text. Doesn't work!</td></tr></table>
</div>
</a>
</p>
Your issue is with the type of elements you put inside of other elements.
For example:
You can not put a <div> inside of an <a> or a <p>
See here: Putting <div> inside <p> is adding an extra <p>
I updated your example code with a working one.
$(document).ready(function() {
//Tooltips
$(".tip_trigger").hover(function(){
tip = $(this).siblings('.tip');
tip.show(); //Show tooltip
}, function() {
tip.hide(); //Hide tooltip
}).mousemove(function(e) {
var mousex = e.pageX + 20; //Get X coodrinates
var mousey = e.pageY + 20; //Get Y coordinates
var tipWidth = tip.width(); //Find width of tooltip
var tipHeight = tip.height(); //Find height of tooltip
//Distance of element from the right edge of viewport
var tipVisX = $(window).width() - (mousex + tipWidth);
//Distance of element from the bottom of viewport
var tipVisY = $(window).height() - (mousey + tipHeight);
if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
mousex = e.pageX - tipWidth - 20;
} if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
mousey = e.pageY - tipHeight - 20;
}
tip.css({ top: mousey, left: mousex });
});
});
body {
margin: 0; padding: 0;
font: normal 12px Verdana, Geneva, sans-serif;
line-height: 1.8em;
color: #333;
}
* {
outline: none;
}
img {border: none;}
a {color: #d60000; text-decoration: none;}
/*--Tooltip Styles--*/
.tip {
display: none;
color: #fff;
background:#1d1d1d;
display:none; /*--Hides by default--*/
padding:10px;
position:absolute; z-index:1000;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<p style="text-align:left;">My First
<a href="#" class="tip_trigger">Link
</a>
<span class="tip">
Some text. Works correctly!
</span>
</p>
<div style="text-align:left;">My Second
Link
<div class="tip">
<table><tr><td>More text. Doesn't work!</td></tr></table>
</div>
</div>
My code is forking this pen, I also include my code in the stack snippet under this post.
what I want to achieve are:
When the cursor is not inside the body, the eyeball would move randomly ( achieved ).
When the cursor enters the body, the eyeball follows the cursor ( achieved ).
When the cursor leaves the body, the eyeball starts moving randomly again ( not achieved ).
I called the function which is used to move the eyeball randomly in on("mouseleave") event, and it does move to a random position but it will immediately go back to the last cursor position, rather than staying at the new position. Can anyone point me to the right direction to fix the problem?
Thanks!
var
mouseOvering = false,
pupil = $("#pupil"),
eyeball = $("#iris"),
eyeposx = 40,
eyeposy = 20,
r = $(pupil).width()/2,
center = {
x: $(eyeball).width()/2 - r,
y: $(eyeball).height()/2 - r
},
distanceThreshold = $(eyeball).width()/2 - r,
mouseX = 0,
mouseY = 0;
$("body").ready( function(){
if ( !mouseOvering ) {
moveRandomly();
}
});
$("body").on('mouseleave', function(){
mouseOvering = false;
moveRandomly();
console.log("mouseleave");
});
$("body").on('mousemove', function(e){
mouseOvering = true;
console.log("mouseovering");
followCursor(e);
});
function moveRandomly() {
var loop = setInterval(function(){
var xp = Math.floor(Math.random()*80);
var yp = Math.floor(Math.random()*80);
pupil.animate({left:xp, top:yp});
}, 3500);
}
function followCursor(e) {
var d = {
x: e.pageX - r - eyeposx - center.x,
y: e.pageY - r - eyeposy - center.y
};
var distance = Math.sqrt(d.x*d.x + d.y*d.y);
if (distance < distanceThreshold) {
mouseX = e.pageX - eyeposx - r;
mouseY = e.pageY - eyeposy - r;
} else {
mouseX = d.x / distance * distanceThreshold + center.x;
mouseY = d.y / distance * distanceThreshold + center.y;
}
var xp = 0, yp = 0;
var loop = setInterval(function(){
// change 1 to alter damping/momentum - higher is slower
xp += (mouseX - xp) / 1;
yp += (mouseY - yp) / 1;
pupil.css({left:xp, top:yp});
}, 2);
}
body {
background-color: #D1D3CF;
}
#container {
display: inline;
height: 400px;
width: 400px;
}
#eyeball {
background: radial-gradient(circle at 100px 100px, #EEEEEE, #000);
height: 300px;
width: 300px;
border-radius: 100%;
position: relative;
}
#iris {
top: 10%;
left: 10%;
background: radial-gradient(circle at 100px 100px, #4DC9EF, #000);
height: 80%;
width: 80%;
border-radius: 100%;
position: absolute;
}
#pupil {
top: 10%;
left: 10%;
background: radial-gradient(circle at 100px 100px, #000000, #000);
height: 55%;
width: 55%;
border-radius: 100%;
position: absolute;
}
#keyframes move {
50% {
transform: translate(-50px, 50px);
}
}
#keyframes move2 {
50% {
transform: translate(-20px, 20px);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="eyeball">
<div id="iris">
<div id="pupil"></div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
With Javascript you can only track where the cursor is on the webpage. If you shift your cursor outside the body, it's not possible for your code to know where the cursor is.
This is the reason the eye tracking your cursor stops moving when you move your cursor outside the window.
The problem is that once the followcursor function was started it kept on moving back to the last known mouse position, even after the mouse had left the body. I just put a check on your mouseOvering variable inside your followcursor function:
var
mouseOvering = false,
pupil = $("#pupil"),
eyeball = $("#iris"),
eyeposx = 40,
eyeposy = 20,
r = $(pupil).width()/2,
center = {
x: $(eyeball).width()/2 - r,
y: $(eyeball).height()/2 - r
},
distanceThreshold = $(eyeball).width()/2 - r,
mouseX = 0,
mouseY = 0;
$("body").ready( function(){
if ( !mouseOvering ) {
moveRandomly();
}
});
$("body").on('mouseleave', function(){
mouseOvering = false;
console.log("mouseleave");
});
$("body").on('mousemove', function(e){
mouseOvering = true;
console.log("mouseovering");
followCursor(e);
});
function moveRandomly() {
var loop = setInterval(function(){
var xp = Math.floor(Math.random()*80);
var yp = Math.floor(Math.random()*80);
if (!mouseOvering) {
pupil.animate({left:xp, top:yp});
}
}, 3500);
}
function followCursor(e) {
var d = {
x: e.pageX - r - eyeposx - center.x,
y: e.pageY - r - eyeposy - center.y
};
var distance = Math.sqrt(d.x*d.x + d.y*d.y);
if (distance < distanceThreshold) {
mouseX = e.pageX - eyeposx - r;
mouseY = e.pageY - eyeposy - r;
} else {
mouseX = d.x / distance * distanceThreshold + center.x;
mouseY = d.y / distance * distanceThreshold + center.y;
}
var xp = 0, yp = 0;
var loop = setInterval(function(){
// change 1 to alter damping/momentum - higher is slower
xp += (mouseX - xp) / 1;
yp += (mouseY - yp) / 1;
if (mouseOvering) {
pupil.css({left:xp, top:yp});
}
}, 2);
}
body {
background-color: #D1D3CF;
}
#container {
display: inline;
height: 400px;
width: 400px;
}
#eyeball {
background: radial-gradient(circle at 100px 100px, #EEEEEE, #000);
height: 300px;
width: 300px;
border-radius: 100%;
position: relative;
}
#iris {
top: 10%;
left: 10%;
background: radial-gradient(circle at 100px 100px, #4DC9EF, #000);
height: 80%;
width: 80%;
border-radius: 100%;
position: absolute;
}
#pupil {
top: 10%;
left: 10%;
background: radial-gradient(circle at 100px 100px, #000000, #000);
height: 55%;
width: 55%;
border-radius: 100%;
position: absolute;
}
#keyframes move {
50% {
transform: translate(-50px, 50px);
}
}
#keyframes move2 {
50% {
transform: translate(-20px, 20px);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="eyeball">
<div id="iris">
<div id="pupil"></div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
I have posted my problem at http://jsfiddle.net/ugnf4/ as it would be make it easier.
Below is my html / javascript code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="mainContainer">
<div id="pageContainer" style="background: #cdcdcd;"></div>
</div>
<style>
BODY {
margin: 0px;
padding: 0px;
}
#pageContainer {
position: relative;
margin: 10px auto;
-webkit-transform-origin:50% 20%;
-webkit-transform:scale(1.37);
width: 1218px;
height: 774px;
border: 1px solid #000000;
}
#mainContainer {
width: 100%;
overflow: hidden;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</script>
<script type="text/javascript">
$(document).ready(function() {
setHeight();
$(window).resize(setHeight);
});
function setHeight()
{
$('#mainContainer').css({'height': $(window).height()});
}
$('#mainContainer').mousemove(function (e) {
});
</script>
</body>
</html>
Currently #mainContainer div has overflow hidden as i dont want to show scroll bars and #pageContainer div (inner div) is scaled at 1.37 using css3, as in certain cases based on screen / browser width height #pageContainer's content would be hidden because of overflow hidden.
I want to code javascript so that if somebody moves cursor in #mainContainer, based on position of mouse X and Y co-ordinates I would like to move #pageContainer so that similar position of #pageContainer would be visible (I hope it is clear).
I m having problem as I m using -webkit-transform-origin, unable to understand how to move #pageContainer around with respect to mouse co-ordinates of #mainContainer.
UPDATE:
I m looking something like what happens in issuu.com website when you open an ebook and zoom it more than the browser size (Should make it more clear)
I m looking for algo or pointer how to achieve it (how to calculate it) not necessarily a working script.
How can this be achieved.
Below is working html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="mainContainer">
<div id="pageContainer" >
<div id="pageContainerInner"style="background: #cdcdcd;">
</div>
</div>
<style>
BODY {
margin: 0px;
padding: 0px;
}
#pageContainer {
margin: 10px auto;
-webkit-transform-origin:50% 20%;
-webkit-transform:scale(1.37);
width: 1218px;
height: 774px;
}
#mainContainer {
width: 100%;
overflow: hidden;
}
#pageContainerInner {
position: relative;
width: 1218px;
height: 774px;
border: 1px solid #000000;
top: 0;
left: 0;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</script>
<script type="text/javascript">
var pageWidth = 1220;
var pageHeight = 776;
var scale = 1.37;
var scaledDelta = 5; //Percentage mouse position approximation
$(document).ready(function() {
setHeight();
$(window).resize(setHeight);
});
function setHeight()
{
$('#mainContainer').css({'height': $(window).height()});
}
$('#mainContainer').mousemove(function (e) {
// Calculate the offset of scaled Div
var offsetX = $('#pageContainer').offset().left;
var offsetY = $('#pageContainer').offset().top;
// Calculate div origin with respect to screen
var originX = (-1 * offsetX) / scale;
var originY = (-1 * offsetY) / scale;
var wWdt = $(window).width();
var wHgt = $(window).height();
// Now convert screen positions to percentage
var perX = e.pageX * 100 / wWdt;
var perY = e.pageY * 100 / wHgt;
// Div content which should be visible
var pageX = perX * pageWidth / 100;
var pageY = perY * pageHeight / 100;
// Calculate scaled divs new X, Y offset
var shiftX = (originX - pageX) + (e.pageX / scale);
var shiftY = (originY - pageY) + (e.pageY / scale);
$('#pageContainerInner').css({'left': shiftX+'px', 'top': shiftY+'px'});
});
</script>
</body>
</html>
Hope this will help others.
I have posted a probable solution at http://jsfiddle.net/PYP8c/.
Below are the modified styles for your page.
BODY {
margin: 0px;
padding: 0px;
}
#mainContainer {
width: 100%;
overflow: hidden;
position: relative;
margin: 10px auto;
-webkit-transform-origin:50% 20%;
-webkit-transform:scale(1.37);
width: 1218px;
height: 774px;
border: 1px solid #000000;
}
#pageContainer {
position:absolute;
top:0px;
}
This is the javascript code for the same.
$(document).ready(function() {
//setHeight();
//$(window).resize(setHeight);
});
function setHeight()
{
$('#mainContainer').css({'height': $(window).height()});
}
$('#mainContainer').mousemove(function (e) {
var contentHeight = $("#pageContainer").height();
var minTop = 774 - contentHeight;
if(minTop>0)
minTop = 0;
var currTop = ((e.pageY-10)/774.0)*(minTop);
document.getElementById("pageContainer").style.top = currTop+'px';
});
Its just a demo on how you could get the text to move based on the mouse coordinates.
You could make a lot of changes, like adding a scrollbar that fades which gives the user a feedback about how much content is still available in both the vertical directions.
Also I have used hard coded values for height, but in your final version I would recommend you get the height of the mainContainer division dynamically.