Not sure how to do this but I have the first part setup right via the codepen here
Not sure how to stop it from occurring unless you hover the black div. Basically I'm looking to have the normal mouse functionality until you hover this black div than fire the script/function. I'm also trying to achieve this without using any libraries and just JS.
Code Below
document.addEventListener("mousemove", function() {
myFunction(event);
});
var mouse;
var cursor = document.getElementById("cursor");
function myFunction(e) {
mouseX = e.clientX;
mouseY = e.clientY;
cursor.style.left = (mouseX - 55) + "px";
cursor.style.top = (mouseY - 55) + "px";
}
body {
background: #FFFDFA;
}
#cursor {
height: 100px;
width: 100px;
position: absolute;
backface-visibility: hidden;
z-index: 9999999;
cursor: none;
}
div {
background: black;
width: 200px;
height: 100px;
margin: 30px;
cursor: none;
}
<img src="https://www.figurefoundry.xyz/metal-cursor.svg" id="cursor"></img>
<div>
</div>
You can simply add the event listener to the div element. You also need to disable pointerEvents on the cursor element so that the mouse doesn't register as on top of the cursor rather than the div.
document.getElementById("div").addEventListener("mousemove", function() {
myFunction(event);
});
var mouse;
var cursor = document.getElementById("cursor");
function myFunction(e) {
mouseX = e.clientX;
mouseY = e.clientY;
cursor.style.left = (mouseX - 55) + "px";
cursor.style.top = (mouseY - 55) + "px";
}
body {
background: #FFFDFA;
}
#cursor {
height: 100px;
width: 100px;
position: absolute;
backface-visibility: hidden;
z-index: 9999999;
pointer-events: none; /* pointer-events: none is needed */
cursor: none;
}
div {
background: black;
width: 200px;
height: 100px;
margin: 30px;
cursor: none;
}
<img src="https://www.figurefoundry.xyz/metal-cursor.svg" id="cursor"></img>
<div id="div"></div> <!--add id-->
EDIT: If you want the cursor to disappear on mouseout:
document.getElementById("div").addEventListener("mousemove", function() {
myFunction(event);
});
var mouse;
var cursor = document.getElementById("cursor");
function myFunction(e) {
mouseX = e.clientX;
mouseY = e.clientY;
cursor.style.left = (mouseX - 55) + "px";
cursor.style.top = (mouseY - 55) + "px";
}
body {
background: #FFFDFA;
}
#cursor {
height: 100px;
width: 100px;
position: absolute;
backface-visibility: hidden;
z-index: 9999999;
pointer-events: none; /* pointer-events: none is needed */
cursor: none;
}
div {
background: black;
width: 200px;
height: 100px;
margin: 30px;
cursor: none;
}
<img src="https://www.figurefoundry.xyz/metal-cursor.svg" id="cursor" hidden></img>
<div id="div" onmouseenter="cursor.hidden = false" onmouseleave="cursor.hidden=true"></div> <!--make cursor invisible on leave and visible on enter-->
Related
I am having trouble changing my custom cursor width and height when I hover on the img element.
I tried using both css and javascript for the effect to work but it won't. When I change my function from "onmouseover" to "onclick" it works perfectly fine.
const cursor = document.querySelector('#cursor');
document.addEventListener('mousemove', e => {
cursor.setAttribute("style", "top: " + (e.clientY - 10) + "px; left: " + (e.clientX - 10) + "px;")
})
/*
/////Second way with javascript/////
var cursor = document.getElementById('cursor');
document.addEventListener('mousemove', function(e){
var x = e.clientX;
var y = e.clientY;
cursor.style.left= x + "px";
cursor.style.top= y + "px";
});
*/
function myFunction() {
document.getElementById("cursor").style.width = "100px";
document.getElementById("cursor").style.height = "100px";
}
body {
margin: 0;
height: 100vh;
background: rgb(27, 27, 27);
}
#cursor {
width: 30px;
height: 30px;
border: 2px solid gray;
border-radius: 50%;
position: fixed;
transition-duration: 100ms;
transition-timing-function: ease-out;
}
img {
position: absolute;
top: 50%;
left: 50%;
}
img:hover #cursor {
width: 100px;
height: 100px;
}
<div id="cursor"></div>
<img onmouseover="myFunction()" src="navbar.svg" alt="navbar">
How about this class toggle. Works.
Always preferable to use addEventListener everywhere
const cursor = document.querySelector('#cursor');
document.addEventListener('mousemove', e => {
cursor.setAttribute("style", "top: " + (e.clientY - 10) + "px; left: " + (e.clientX - 10) + "px;")
})
const hoverIt = e => cursor.classList.toggle("hover");
document.getElementById("navbarimg").addEventListener("mouseover",hoverIt);
document.getElementById("navbarimg").addEventListener("mouseover",hoverIt);
#cursor {
width: 30px;
height: 30px;
border: 2px solid gray;
border-radius: 50%;
position: fixed;
transition-duration: 100ms;
transition-timing-function: ease-out;
}
#cursor.hover {
width: 100px;
height: 100px;
}
img {
position: absolute;
top: 50%;
left: 50%;
}
img:hover #cursor {
width: 100px;
height: 100px;
}
<div id="cursor"></div>
<img id="navbarimg" src="navbar.svg" alt="navbar">
So the css solution here will not work as the #cursor is not a child of the img. You could have it a child of the anchor but that is probably the wrong approach anyway as it is not extendable.
You should probably change the logic to use an eventListener for simplicity...
document.getElementById("testImg").addEventListener("mouseover", function( event ) {
alert("over"); // Do your resizing here and ensure the image has the matching id
})
I was creating a parallax effect in which the image and the text move in opposite direction to the movement of the mouse. That is happening inside an element called parallax-wrapper. But when I move out of the element I want the image and the text to return back to their original positions. I have tried to detect the mouse position outside the element but for some reason it not firing properly.
The codepen link is - https://codepen.io/rohitgd/pen/gRLNad?editors=1010
HTML
<div class="parallax-wrapper">
<div class="layer" data-mouse-parallax="0.1">
<img src="https://tympanus.net/Development/MorphingBackgroundShapes/img/1.jpg"/>
</div>
<div class="layer" data-mouse-parallax="0.3">REVERT</div>
</div>
CSS
body {
background-color:#fff;
padding: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.parallax-wrapper {
width: 500px;
height: 300px;
background-color:#0c0c0c;
position: relative;
overflow: hidden;
.layer {
width: 80%;
height: 80%;
position: absolute;
left: 30px;
text-align: center;
line-height: 300px;
font-size: 38px;
color:#FFF;
transition: all 200ms ease-out;
}
}
img {
width: 200px;
height: 200px;
position: relative;
top: 50px;
right: 70px;
}
Javascript
$(".parallax-wrapper").mousemove(function(e) {
var x = e.pageX - $(this).offset().left - $(this).width() / 2;
var y = e.pageY - $(this).offset().top - $(this).height() / 2;
$("*[data-mouse-parallax]").each(function() {
var factor = parseFloat($(this).data("mouse-parallax"));
x = -x * factor;
y = -y * factor;
$(this).css({ transform: "translate3d( " + x + "px, " + y + "px, 0 )" });
});
});
$(document).mouseleave(function(e) {
var target = $(e.target);
if( !target.is("div.layer")) {
alert('out of the element');
e.stopPropagation();
}
});
What I want is when the mouse is outside the parallax-wrapper the Image and the text return back to their original positions.
You're not resetting the transformations when your mouse leaves. You need to add this where you have the alert...
$(".parallax-wrapper").mouseleave(function(e) {
$("*[data-mouse-parallax]").each(function() {
$(this).css({ transform: "translate3d( 0, 0, 0 )" });
});
});
Note that the mouseleave event is triggered when the mouse leaves .parallax-wrapper, not document as you previously had it.
Here's a modified codepen...
https://codepen.io/anon/pen/ZyBgYJ
I think a selector was wrong. Here's a correct version or see code below.
To show better when you are inside/outside I change the background color, that's better than an alert. When you leave the wrapper (the black background) it flips correctly now.
Where RED is set you can reset the transform to the origin.
// Trying to replicate the effect here - https://tympanus.net/Development/MorphingBackgroundShapes/
$(".parallax-wrapper").mousemove(function(e) {
var x = e.pageX - $(this).offset().left - $(this).width() / 2;
var y = e.pageY - $(this).offset().top - $(this).height() / 2;
$(".parallax-wrapper").css("background-color", "#00ff00"); // <-- EXIT
// reset transform here
$("*[data-mouse-parallax]").each(function() {
var factor = parseFloat($(this).data("mouse-parallax"));
x = -x * factor;
y = -y * factor;
$(this).css({ transform: "translate3d( " + x + "px, " + y + "px, 0 )" });
});
});
// this is the selector I changed from "document" to ".parallax-wrapper"
$(".parallax-wrapper").mouseleave(function(e) {
var target = $(e.target);
if( !target.is("div.layer")) {
$(".parallax-wrapper").css("background-color", "#ff0000"); // <-- ENTER
e.stopPropagation();
}
});
body {
background-color:#fff;
padding: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.parallax-wrapper {
width: 500px;
height: 300px;
background-color:#0c0c0c;
position: relative;
overflow: hidden;
.layer {
width: 80%;
height: 80%;
position: absolute;
left: 30px;
text-align: center;
line-height: 300px;
font-size: 38px;
color:#FFF;
transition: all 200ms ease-out;
}
}
img {
width: 200px;
height: 200px;
position: relative;
top: 50px;
right: 70px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parallax-wrapper">
<div class="layer" data-mouse-parallax="0.1">
<img src="https://tympanus.net/Development/MorphingBackgroundShapes/img/1.jpg"/>
</div>
<div class="layer" data-mouse-parallax="0.3">REVERT</div>
</div>
Replace $(document).mouseleave with $(".parallax-wrapper").mouseleave.
$(".parallax-wrapper").mousemove(function(e) {
var x = e.pageX - $(this).offset().left - $(this).width() / 2;
var y = e.pageY - $(this).offset().top - $(this).height() / 2;
$("*[data-mouse-parallax]").each(function() {
var factor = parseFloat($(this).data("mouse-parallax"));
x = -x * factor;
y = -y * factor;
$(this).css({ transform: "translate3d( " + x + "px, " + y + "px, 0 )" });
});
});
$(".parallax-wrapper").mouseleave(function(e) {
alert('out of the element');
});
body {
background-color: #fff;
padding: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.parallax-wrapper {
width: 500px;
height: 300px;
background-color: #0c0c0c;
position: relative;
overflow: hidden;
}
.parallax-wrapper .layer {
width: 80%;
height: 80%;
position: absolute;
left: 30px;
text-align: center;
line-height: 300px;
font-size: 38px;
color: #FFF;
transition: all 200ms ease-out;
}
img {
width: 200px;
height: 200px;
position: relative;
top: 50px;
right: 70px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parallax-wrapper">
<div class="layer" data-mouse-parallax="0.1">
<img src="https://tympanus.net/Development/MorphingBackgroundShapes/img/1.jpg"/>
</div>
<div class="layer" data-mouse-parallax="0.3">REVERT</div>
</div>
At the top of my website you can see that I have an animation at the top, I'm having trouble getting it to show just one spotlight that is centred on the mouse along with having the text shadow effect being centred on the mouse also.
I have found that by zooming in on the browser the centring issue is fixed but if possible I would rather not set a fixed zoom level for visitors.
Below I have attached the CSS followed by the JavaScript that I have used:
The CSS:
#text-shadow-box {
position: relative;
width: 100%;
height: 350px;
background: #666;
overflow: hidden;
cursor: none;
border: 1px solid Black;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-select: none;
}
#text-shadow-box div.wall {
position: absolute;
top: 175px;
left: 0;
width: 100%;
}
#tsb-text {
margin: 0;
color: #999;
font-family: Helvetica, Arial, sans-serif;
font-size: 80px;
line-height: 1em;
height: 1px;
font-weight: bold;
text-align: center;
}
div.wall div {
position: absolute;
background: #999;
overflow: hidden;
top: 150px;
left: 0;
height: 300px;
width: 100%;
}
#tsb-spot {
position: absolute;
overflow: hidden;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(/spotlight.png) top center;
}
The JavaScript:
<script type="text/javascript" language="javascript" charset="utf-8">
var text;
var spot;
///window.onload = init;
init();
function init() {
text = document.getElementById('tsb-text');
spot = document.getElementById('tsb-spot');
document.getElementById('text-shadow-box').onmousemove = onMouseMove;
document.getElementById('text-shadow-box').ontouchmove = function (e) {e.preventDefault(); e.stopPropagation(); onMouseMove({clientX: e.touches[0].clientX, clientY: e.touches[0].clientY});};
onMouseMove({clientX: 300, clientY: 200});
}
function onMouseMove(e) {
var xm = e.clientX - 300;
var ym = e.clientY - 175;
var d = Math.sqrt(xm*xm + ym*ym);
text.style.textShadow = -xm + 'px ' + -ym + 'px ' + (d / 5 + 10) + 'px black';
xm = e.clientX - 600;
ym = e.clientY - 450;
spot.style.backgroundPosition = xm + 'px ' + ym + 'px';
}
</script>
With your current implementation, you are using an image for the spotlight, found on this line:
background: url(http://www.zachstronaut.com/lab/text-shadow-box/spotlight.png) top center;
A much better implementation would be to add a <canvas> element instead where your title is currently on your website. You can use CanvasRenderingContext2D.createRadialGradient() to create a spotlight effect: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createRadialGradient.
You can also see some similar implementations of what I am recommending here:
https://jsfiddle.net/4Ezkg/
http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/
Im trying to move the #frame-slider-thumb across the image. I had it working by just keeping track of the diff in mouseX position. But the problem was that if the thumb wasn't at 0 to begin with it would jump back to 0. Thus I added the curr variable in the logic to add the diff from its current position. Now it moves much to quickly though. I'm not sure why. Any help much appreciated.
Heres a codepen.
HTML
<div id="frame-slider">
<img id="frame-slider-background" src="http://imagej.1557.x6.nabble.com/file/n5009735/OCT_pre_segmented.png" alt="" />
<div id="frame-slider-track">
<div id="frame-slider-thumb">
<div class="top-half"></div>
<div class="bottom-half"></div>
</div>
</div>
</div>
JS
var mouseStartPosition = {};
var thumb = document.getElementById('frame-slider-thumb');
window.addEventListener("mousedown", mousedownThumb);
function mousedownThumb(e) {
mouseStartPosition.x = e.pageX;
// add listeners for mousemove, mouseup
window.addEventListener("mousemove", mousemoveThumb);
window.addEventListener("mouseup", mouseupThumb);
}
function mousemoveThumb(e) {
var curr = isNaN(parseFloat(thumb.style.left)) ? 0 : parseFloat(thumb.style.left);
var diff = -1 * (mouseStartPosition.x - e.pageX);
var newLeft = curr + diff;
thumb.style.left = newLeft + 'px';
}
function mouseupThumb(e) {
window.removeEventListener("mousemove", mousemoveThumb);
window.removeEventListener("mouseup", mouseupThumb);
}
CSS
html,
body {
width: 100%;
height: 100%;
}
#frame-slider {
height: 150px;
width: 50%;
position: relative;
}
#frame-slider-background {
width: 100%;
max-height: 100%;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-user-drag: none;
user-drag: none;
-webkit-touch-callout: none;
}
#frame-slider-track {
height: 100%;
width: 100%;
position: absolute;
top: 0;
}
#frame-slider-thumb {
position: absolute;
left: 0;
margin-left: -4px;
width: 8px;
height: 100%;
cursor: pointer;
}
#frame-slider-thumb .top-half {
background-color: rgba(0, 0, 255, 0.7);
height: 50%;
}
#frame-slider-thumb .bottom-half {
background-color: rgba(255, 0, 0, 0.7);
height: 50%;
}
Fixed by adding a thumbStart position to mousedownThumb. Basically diff isn't the difference in position from the last mousemove event, its the difference from the last mousemove event and the mousedown event.
var mouseStartPosition = {};
var thumbStart;
var thumb = document.getElementById('frame-slider-thumb');
window.addEventListener("mousedown", mousedownThumb);
function mousedownThumb(e) {
mouseStartPosition.x = e.pageX;
thumbStart = isNaN(parseFloat(thumb.style.left)) ? 0 : parseFloat(thumb.style.left);
// add listeners for mousemove, mouseup
window.addEventListener("mousemove", mousemoveThumb);
window.addEventListener("mouseup", mouseupThumb);
}
function mousemoveThumb(e) {
var diff = -1 * (mouseStartPosition.x - e.pageX);
var newLeft = thumbStart + diff;
thumb.style.left = newLeft + 'px';
}
function mouseupThumb(e) {
window.removeEventListener("mousemove", mousemoveThumb);
window.removeEventListener("mouseup", mouseupThumb);
}
http://codepen.io/kunokdev/pen/YXNrPx?editors=110
<div id="container">
<div class="item-2"></div>
<div class="item-2"></div>
<div class="item-2"></div>
<div class="item-2"></div>
</div>
body {
background: #222;
}
#container {
width: 300px;
height: 300px;
border-radius: 300px;
background: #666;
overflow: hidden;
}
.item-2 {
float: left;
background: blue;
width: 50%;
height: 150px;
}
.item-2:nth-child(2){
background: green;
}
.item-2:nth-child(3){
background: yellow;
}
.item-2:nth-child(4){
background: red;
}
Check link first. So let's say I have that circle div. Now what I want is a simple function that will rotate it. If we drag-pull it to the right, it should rotate clockwise. And vice verse.
I'm not sure if this solution would work on mobile or not, but this works for browsers: http://codepen.io/anon/pen/LVxzLj
var mouseX;
var currAngle = 0;
var container = document.getElementById("container");
container.addEventListener("mousedown",function(e){
mouseX = e.pageX;
window.addEventListener("mouseup",mouseup,false);
window.addEventListener("mousemove",mousemove,false);
},false);
function mouseup(){
currAngle = currAngle + e.pageX - mouseX;
window.removeEventListener("mouseup",mouseup,false);
window.removeEventListener("mousemove",mousemove,false);
}
function mousemove(e){
var result = currAngle + e.pageX - mouseX;
container.style['transform'] = 'rotate(' + result + 'deg)';
container.style['-webkit-transform'] = 'rotate(' + result + 'deg)';
container.style['-moz-transform'] = 'rotate(' + result + 'deg)';
}
Also, I added this css, because there were some odd behaviors with user selection
#container {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}