JQuery Parallax Background moving with mouseover - javascript

I have implemented horizontal parallax background following this tutorial.
I want to have the same effect vertically . Please Help.
This is my code so far,
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
var currentX = '';
var movementConstant = .015;
$(document).mousemove(function(e) {
if(currentX == '') currentX = e.pageX;
var xdiff = e.pageX - currentX;
currentX = e.pageX;
$('.parallax div').each(function(i, el) {
var movement = (i + 1) * (xdiff * movementConstant);
var newX = $(el).position().left + movement;
$(el).css('left', newX + 'px');
});
});
</script>
<style>
.parallax {
position: absolute;
width: 100%;
height: 800px;
overflow: hidden;
left: 0;
}
.water {
position: absolute;
width: 100%;
height: 800px;
left:0;
background-repeat: no-repeat;
background-position: top center;
}
.water-layer1 {
background-image: url(water-layer-1.png);
}
.water-layer2 {
background-image: url(water-layer-2.png);
}
.water-layer3 {
background-image: url(water-layer-3.png);
}
.water-layer4 {
background-image: url(water-layer-4.png);
}
</style>
</head>
<body>
<div class="parallax">
<div class="water water-layer4"></div>
<div class="water water-layer3"></div>
<div class="water water-layer2"></div>
<div class="water water-layer1"></div>
</div>
</body>
</html>

I'm on mobile so I can't test... try this:
<script>
var currentY = '';
var movementConstant = .015;
$(document).mousemove(function(e) { if(currentY == '') currentY = e.pageY;
var ydiff = e.pageY - currentY;
currentY = e.pageY;
$('.parallax div').each(function(i, el) { var movement = (i + 1) * (ydiff * movementConstant);
var newY = $(el).position().top + movement; $(el).css('top', newY + 'px'); }); });
</script>

Related

Getting X Y Coordinates into PHP variables on Mouse Click

The following script moves a ball from one location to another inside a box.
I would like to gather the coordinates of where the mouse is clicked inside this box and convert the X and Y coordinates onclick over to PHP variables so some additional PHP code can process this.
How can this be done please?
<!DOCTYPE html>
<html>
<head>
<title>Move to Click Position</title>
<style type="text/css">
body {
background-color: #FFF;
margin: 30px;
margin-top: 10px;
}
#contentContainer {
width: 550px;
height: 350px;
border: 5px black solid;
overflow: hidden;
background-color: #F2F2F2;
cursor: pointer;
}
#thing {
position: relative;
left: 50px;
top: 50px;
transition: left .5s ease-in, top .5s ease-in;
}
</style>
</head>
<body>
<div id="contentContainer">
<img id="thing" src="//www.kirupa.com/images/smiley_red.png">
</div>
<script src="//www.kirupa.com/prefixfree.min.js"></script>
<script>
var theThing = document.querySelector("#thing");
var container = document.querySelector("#contentContainer");
container.addEventListener("click", getClickPosition, false);
function getClickPosition(e) {
var parentPosition = getPosition(e.currentTarget);
var xPosition = e.clientX - parentPosition.x - (theThing.clientWidth / 2);
var yPosition = e.clientY - parentPosition.y - (theThing.clientHeight / 2);
theThing.style.left = xPosition + "px";
theThing.style.top = yPosition + "px";
}
// Helper function to get an element's exact position
function getPosition(el) {
var xPos = 0;
var yPos = 0;
while (el) {
if (el.tagName == "BODY") {
// deal with browser quirks with body/window/document and page scroll
var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
var yScroll = el.scrollTop || document.documentElement.scrollTop;
xPos += (el.offsetLeft - xScroll + el.clientLeft);
yPos += (el.offsetTop - yScroll + el.clientTop);
} else {
// for all other non-BODY elements
xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
yPos += (el.offsetTop - el.scrollTop + el.clientTop);
}
el = el.offsetParent;
}
return {
x: xPos,
y: yPos
};
}
</script>
</body>
</html>
I can then process these in the other script I have.
If someone can explain how this can be achieved it would be greatly appreciated.
Thanks
I have looked through and found a solution if anyone is after doing the same thing.
<!DOCTYPE html>
<html>
<head>
<title>Move to Click Position</title>
<style type="text/css">
body {
background-color: #FFF;
margin: 30px;
margin-top: 10px;
}
#contentContainer {
width: 614px;
height: 864px;
border: 5px black solid;
overflow: hidden;
background: url(Sample-Contract-Agreement-Letter.jpg) top left no-repeat;
background-color: #F2F2F2;
cursor: pointer;
}
#thing {
position: relative;
left: 50px;
top: 50px;
transition: left .5s ease-in, top .5s ease-in;
}
</style>
</head>
<body>
<div id="contentContainer">
<img id="thing" src="//www.kirupa.com/images/smiley_red.png">
</div>
<script src="//www.kirupa.com/prefixfree.min.js"></script>
<script>
var theThing = document.querySelector("#thing");
var container = document.querySelector("#contentContainer");
container.addEventListener("click", getClickPosition, false);
function getClickPosition(e) {
var parentPosition = getPosition(e.currentTarget);
var xPosition = e.clientX - parentPosition.x - (theThing.clientWidth / 2);
var yPosition = e.clientY - parentPosition.y - (theThing.clientHeight / 2);
document.getElementById('myField1').value = xPosition;
document.getElementById('myField2').value = yPosition;
theThing.style.left = xPosition + "px";
theThing.style.top = yPosition + "px";
}
// Helper function to get an element's exact position
function getPosition(el) {
var xPos = 0;
var yPos = 0;
while (el) {
if (el.tagName == "BODY") {
// deal with browser quirks with body/window/document and page scroll
var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
var yScroll = el.scrollTop || document.documentElement.scrollTop;
xPos += (el.offsetLeft - xScroll + el.clientLeft);
yPos += (el.offsetTop - yScroll + el.clientTop);
} else {
// for all other non-BODY elements
xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
yPos += (el.offsetTop - el.scrollTop + el.clientTop);
}
el = el.offsetParent;
}
return {
x: xPos,
y: yPos
};
}
</script>
<form action="test.php" method="post">
<input type=”hidden” value="" id="myField1" name="myField1">
<input type=”hidden” value="" id="myField2" name="myField2">
<input type="submit" value="Submit">
</form>
</body>
</html>

Can't use jQuery to override inline style generated by jQuery?

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>

Drag and drop an image using jquery

I am trying to create a photo editor using drag and drop. The problem is that when i am trying to drag and drop the image in a div in html it reloads a new page instead of setting the image in the div. I want to put the image in the grey square.
<script type = "text/javascript">
$.event.props.push("dataTransfer");
$(function () {
function desenare(img) {
var cW = img.width, cH = img.height;
$("#editor")
.attr({ width: cW, height: cH });
var context = $("#editor")[0].getContext("2d");
context.drawImage(img, 0, 0);
var id = context.getImageData(0, 0, cW, cH);
var v = [];
for (var i = 0; i < 256; i++) {
v.push(0);
}
for (var y = 0; y < cH; y++) {
for (var x = 0; x < cW; x++) {
var i = (y * cW * 4) + x * 4;
var val = Math.round(
(id.data[i] + id.data[i + 1] + id.data[i + 2])/3);
v[val]++;
}
}
grafic(context, v, cW, cH);
}
function grafic(c, v, W, H) {
c.save();
var n = v.length;
var f = H / Math.max.apply(this, v);
var w = W / n;
c.rotate(Math.PI);
c.translate(-W, -H);
c.scale(-1, H / Math.max.apply(this, v));
c.fillStyle = "rgba(255,0,0,0.3)";
for (var i = 0; i < n; i++) {
c.fillRect(-i * w, 0, w, v[i]);
}
c.restore();
}
$(document)
.on('dragover', function (e) {
event.stopPropagation();
})
.on('drop', function (e) {
event.preventDefault();
var files = e.dataTransfer.files;
if (files.length > 0) {
var reader = new FileReader();
reader.onload = function (e) {
desenare($("#editor")
.attr("src", e.target.result)[0]);
};
reader.readAsDataURL(files[0]);
}
});
});
</script>
Please check the following code and source link for jQuery UI.
Draggable:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#draggable" ).draggable();
} );
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
</body>
</html>
Droppable:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Droppable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
} );
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
</body>
</html>
Source code: https://jqueryui.com/

difficulty in comparing and assigning datatypes

to move red box over yellow container - onmouseover-> move right , onmouseout-> move left
I tried pos=document.getElementById("animate").style.left;
then by setinterval, I tried to move it using pos++ and pos--. but it didn't work. Please Help.
here's the code.
var id_l, id_r;
function right() {
clearInterval(id_l);
var box = document.getElementById("animate");
var pos=box.style.left;
id_r=setInterval(move,5);
function move() {
if(pos==900) {
clearInterval(id_r);
}
else {
pos++;
box.style.left = pos + "px";
}
}
}
function left() {
clearInterval(id_r);
var box = document.getElementById("animate");
var pos=box.style.left;
id_l=setInterval(move,5);
function move() {
if(pos==0) {
clearInterval(id_l);
}
else {
pos--;
box.style.left = pos + "px";
}
}
}
#container {
position: relative;
width: 1000px;
height: 100px;
background-color: yellow;
}
#animate {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
left: "200px";
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles/styles.css">
</head>
<body>
<div id="container" onmouseover="right()" onmouseout="left()">
<div id="animate">
</div>
</div>
<script src="scripts/javascript.js"></script>
</body>
</html>
You were doing it wrong. When you get the position, it gives you in format 100px etc. You have to trim px and then do your computation
var id_l, id_r;
function right() {
clearInterval(id_l);
var box = document.getElementById("animate");
var pos=box.style.left;
pos = pos.toString().substr(0, pos.length-2); // do not read `px`
id_r=setInterval(move,5);
function move() {
if(pos==900) {
clearInterval(id_r);
}
else {
pos++;
box.style.left = pos + "px";
}
}
}
function left() {
clearInterval(id_r);
var box = document.getElementById("animate");
var pos=box.style.left;
pos = pos.toString().substr(0, pos.length-2); // do not read px
id_l=setInterval(left,5);
function left() {
if(pos==0) {
clearInterval(id_l);
}
else {
pos--;
box.style.left = pos+"px";
}
}
}
#container {
position: relative;
width: 1000px;
height: 100px;
background-color: yellow;
}
#animate {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
left: "200px";
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles/styles.css">
</head>
<body>
<div id="container" onmouseover="right()" onmouseout="left()">
<div id="animate">
</div>
</div>
<script src="scripts/javascript.js"></script>
</body>
</html>
You can do correct by adding parseInt in both move() because it's get a string!
element.style.left is only work in inline style ! so use getComputedStyle is better
var pos = window.getComputedStyle(box).getPropertyValue('left');
function move() {
pos = parseInt(pos);
if(pos==900) {
clearInterval(id_r);
}
else {
pos++;
box.style.left = pos + "px";
}
}

JQuery $ is undefined [duplicate]

This question already has answers here:
I can't get jQuery to work [closed]
(3 answers)
Closed 8 years ago.
I took this snippet and placed all the code in index.html file as you can see below, but no matter where I put the js, jquery it does not work.
<!DOCTYPE html>
<html>
<head>
<style>
.parallax {
position: absolute;
width: 100%;
height: 800px;
overflow: hidden;
left: 0;
}
.water {
position: absolute;
width: 100%;
height: 800px;
left:0;
background-repeat: no-repeat;
background-position: top center;
}
.water-layer1 {
background-image: url(http://elikirk.com/demos/liquipel/images/water-layer-1.png);
}
.water-layer2 {
background-image: url(http://elikirk.com/demos/liquipel/images/water-layer-2.png);
}
.water-layer3 {
background-image: url(http://elikirk.com/demos/liquipel/images/water-layer-3.png);
}
.water-layer4 {
background-image: url(http://elikirk.com/demos/liquipel/images/water-layer-4.png);
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div class="parallax">
<div class="water water-layer4"></div>
<div class="water water-layer3"></div>
<div class="water water-layer2"></div>
<div class="water water-layer1"></div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var currentX = '';
var currentY = '';
var movementConstant = .015;
$(document).mousemove(function(e) {
if(currentX == '') currentX = e.pageX;
var xdiff = e.pageX - currentX;
currentX = e.pageX;
if(currentY == '') currentY = e.pageY;
var ydiff = e.pageY - currentY;
currentY = e.pageY;
$('.parallax div').each(function(i, el) {
var movement = (i + 1) * (xdiff * movementConstant);
var movementy = (i + 1) * (ydiff * movementConstant);
var newX = $(el).position().left + movement;
var newY = $(el).position().top + movementy;
$(el).css('left', newX + 'px');
$(el).css('top', newY + 'px');
});
});
});
</script>
</body>
</html>
I get ReferenceError: $ is not defined. The jQuery is being loaded well before the script.
What could be the problem here?
You have referenced JQuery two times. Remove one of them and add reference as mentioned below :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" />
The jquery lib is not loaded on your script.
replace
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
with
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
Happy Coding:)

Categories