I have made a custom cursor but it is not working properly over text(p, h1, button, span). Here is the code
html:
<!-- custom cursor -->
<div class="cursor"></div>
js:
const cursor = document.querySelector(".cursor");
document.addEventListener("mouseover", (e) => {
cursor.style.left = e.pageX + "px";
cursor.style.top = e.pageY + "px";
console.log(e.pageX, e.pageY); // i checked pageX and pageY values also not change when cursor moves over a text or button
})
css:
.cursor{
position: fixed;
width: 13px;
height: 13px;
border-radius: 50%;
background-color: #ffffff38;
transition-duration: 0.16s;
-o-transition-duration: 0.16s;
-moz-transition-duration: 0.16s;
-webkit-transition-duration: 0.16s;
transition-timing-function:ease;
-o-transition-timing-function:ease;
-moz-transition-timing-function:ease;
-webkit-transition-timing-function:ease;
transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
pointer-events: none;
mix-blend-mode: difference;
/* display: none; */
z-index: 10000;
}
It is working fine over links. Can you tell me how can i make the cursor to move smoothly(over all text and buttons)
The mouseover event triggers when you move your mouse over an element - but it doesn't keep triggering when you move the mouse inside that element.
Have you tried mousemove instead?
I think below code will help you. There are some mistakes in your code like background color of cursor background-color: #ffffff38;, this is white which can't be seen in white page. And also I hide the original cursor.
In JavaScript code you have used mouseover which will trigger every time when your mouse enter the specific area, you should use mousemove, it will trigger everytime when you move your mouse.
const cursor = document.querySelector(".cursor");
document.addEventListener("mousemove", (e) => {
cursor.style.left = e.pageX + "px";
cursor.style.top = e.pageY + "px";
console.log(e.pageX, e.pageY);
// i checked pageX and pageY values also not change when cursor moves over a text or button
})
html{
cursor: none;
}
.cursor {
position: absolute;
width: 13px;
height: 13px;
border-radius: 50%;
border: 1px solid black;
z-index: 10000;
}
<!-- custom cursor -->
<div class="cursor"></div>
Related
Looking to use just Javascript without any libraries to start and stop audio on mouse enter and mouse leave. Also want the audio to loop while the div is being hovered. Right now I have two divs because I'm unsure of how to add multiple onmouseenter events and if this is even possible. Is all of this possible? Dropping my code snippet 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";
}
function play() {
var audio = new Audio('https://www.figurefoundry.xyz/metal/metaldrums.mp3');
audio.play();
}
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;
animation: spincursor infinite 1.5s steps(1, end);
}
div {
background: black;
width: 200px;
height: 100px;
margin: 30px;
cursor: none;
}
#keyframes spincursor {
0% {
transform: rotate(0deg);
}
12.5% {
transform: rotate(45deg);
}
25% {
transform: rotate(90deg);
}
37.5% {
transform: rotate(135deg);
}
50% {
transform: rotate(180deg);
}
62.5% {
transform: rotate(225deg);
}
75% {
transform: rotate(270deg);
}
87.5% {
transform: rotate(315deg);
}
100% {
transform: rotate(360deg);
}
}
<img src="https://www.figurefoundry.xyz/metal-cursor.svg" id="cursor" hidden></img>
<div onmouseenter="play()">
<div onmouseenter="cursor.hidden = false" onmouseleave="cursor.hidden=true">
</div> <!--make cursor invisible on leave and visible on enter-->
</div>
I think you're going to get an error in console if you do this in Chrome: Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first You need to interact ( click) something for audio to be played .
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
I have a custom cursor implemented for my website, but I want to add a delay to the bigger cursor. Therefore I added a transition property to it, but it seems very staggered.
Also, I have an animation on hover which doesn't seem to work properly. When I refresh my page and hover over a link, the first time it does nothing, but the second time I hover over it the animation works.
This is the CSS code:
.cursor{
width: 1rem;
height: 1rem;
border-radius: 100%;
background: rgba(255, 255, 255, 0.5);
position: absolute;
transform: translate(-50%, -50%);
z-index: 1000;
pointer-events: none;
transition: all 0.5s ease;
transition-property: width, height;
transform-origin: 100% 100%;
}
.cursor2{
width: 4rem;
height: 4rem;
border-radius: 100%;
border: 2px solid rgba(255, 255, 255, 0.7);
position: absolute;
transform: translate(-50%, -50%);
z-index: 1000;
pointer-events: none;
transition: all 1ms linear;
transition-property: width, height;
transform-origin: 100% 100%;
}
This is the JS:
let hover = document.querySelectorAll(".project-link");
let mouseCursor = document.querySelector(".cursor");
let mouseCursor2 = document.querySelector(".cursor2");
hover.forEach(el => {
$(el).hover(function() {
el.addEventListener("mouseover", function(){
mouseCursor.classList.add("hover"),
mouseCursor2.classList.add("hide");
});
el.addEventListener("mouseleave", function(){
mouseCursor.classList.remove("hover"),
mouseCursor2.classList.remove("hide");
});
});
})
window.addEventListener("mousemove", cursor);
function cursor(e){
mouseCursor.style.top = e.pageY + "px",
mouseCursor.style.left = e.pageX + "px";
mouseCursor2.style.top = e.pageY + "px",
mouseCursor2.style.left = e.pageX + "px";
}
This is the CSS and the JS code I have got to make my custom cursor. This is all I have got but seems like Stack Overflow is making me write more so let me explain it further.
So when I hover over a link after refreshing the page the cursor doesn't animate. Basically, it doesn't add the required class, but if I hover over it the second time not refreshing at the same point of time the animation works and it adds the required class to the cursor div.
I write a mini project at html,css,js.
I have an 20% width image that moves with an infinite animation left to right.
for example:
.img {
width: 20%,
animation: move infinite;
}
#keyframes move {
from {
left: 100%;
}
to {
left: -50%;
}
}
I want, when I press the image to come to the center of the screen with its actual width.
My problem is when I remove the animation class (cause it needs to stop moving), I lose the left & top attributes of the image and also the transition from 20% width to full-width does not work smoothly. Any ideas on how this can be implemented?
Thanks
You basically wrote the requirements correctly in the question. The problem is, you did not code step by step what you want. Read again your requirements like so:
1. I have an 20% width image that moves with an infinite animation left to right
2. I want, when I press the image to come to the center of the screen with its actual width.
3. My problem is when I remove the animation class (cause it needs to stop moving)
So basically there are 3 states:
the image with what ever styles, image class => .img
animation the image has some sort of animation, animation class => .animate
finished at some stage we have a "finished" animation state, finished class => .finish
Like so you have defined three states in CSS where you can later just add/remove properties for any given state and you can add/remove the classes to the element (in this case the image).
(Cause it is really hard to click on a moving element, I've created a wrapper with a click-area. Obviously you can change the click event listener back to the image and try, it's really hard to click it...)
var image = document.querySelector('img');
var clickArea = document.querySelector('.click-area');
clickArea.addEventListener('click', function(){
image.classList.add('finish');
image.classList.remove('animate');
});
.wrapper {
position: relative;
width: 100%;
height: 300px;
border: solid 2px orange;
}
.img {
position: absolute;
}
.finish {
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%); /* Safari and Chrome */
-moz-transform: translate(-50%, -50%); /* Firefox */
-ms-transform: translate(-50%, -50%); /* IE 9 */
-o-transform: translate(-50%, -50%); /* Opera */
}
.animate {
width: 20%;
animation: move infinite 2s;
}
#keyframes move {
from { left: 100%; }
to { left: -50%; }
}
<div class="wrapper click-area">
<img class="img animate" src="https://picsum.photos/200/300" />
</div>
If there are multiple of those images on the same page it's almost the same! Figure out the differences for yourself.
var clickAreas = document.querySelectorAll('.click-area');
[...clickAreas].forEach(function(clickArea){
var image = clickArea.querySelector('img'); // find only the image inside the click-area
clickArea.addEventListener('click', function(){
image.classList.add('finish');
image.classList.remove('animate');
});
});
.wrapper {
position: relative;
width: 100%;
height: 100px; /* tweaked the height so we can see more the just one */
border: solid 2px orange;
}
.img {
position: absolute;
width: auto; /* tweaked the height so we can see more the just one */
height: 100px; /* tweaked the height so we can see more the just one */
}
.finish {
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%); /* Safari and Chrome */
-moz-transform: translate(-50%, -50%); /* Firefox */
-ms-transform: translate(-50%, -50%); /* IE 9 */
-o-transform: translate(-50%, -50%); /* Opera */
}
.animate {
width: 20%;
animation: move infinite 2s;
}
#keyframes move {
from { left: 100%; }
to { left: -50%; }
}
<div class="wrapper click-area">
<img class="img animate" src="https://picsum.photos/200/300" />
</div>
<div class="wrapper click-area">
<img class="img animate" src="https://picsum.photos/200/300" />
</div>
<div class="wrapper click-area">
<img class="img animate" src="https://picsum.photos/200/300" />
</div>
I added a ripple effect to happen when the user clicks anywhere on a div. It works well except that when the page is full screen, the element shake and go blurry for until the ripple disappears.
Here's the JS for the effect:
$("div").click(function(e) {
// Remove any old ripples
$(".ripple").remove();
// Setup
var posX = $(this).offset().left,
posY = $(this).offset().top,
buttonWidth = $(this).width(),
buttonHeight = $(this).height();
// Add the element
$(this).prepend("<span class='ripple'></span>");
// Make it round
if(buttonWidth >= buttonHeight) {
buttonHeight = buttonWidth;
} else {
buttonWidth = buttonHeight;
}
// Get the center of the element
var x = e.pageX - posX - buttonWidth / 2;
var y = e.pageY - posY - buttonHeight / 2;
// Add the ripples CSS and start the animation
$(".ripple").css({
width: buttonWidth,
height: buttonHeight,
top: y + 'px',
left: x + 'px'
}).addClass("rippleEffect");
});
And the CSS:
.ripple {
width: 0;
height: 0;
border-radius: 50%;
background: rgba(249, 107, 107, 0.8);
transform: scale(0);
position: absolute;
opacity: 1;
z-index: 100;
}
.rippleEffect {
animation: rippleDrop .4s linear;
}
#keyframes rippleDrop {
100% {
transform: scale(0.1);
opacity: 0;
}
}
Here's the fiddle but you can't see the issue as it's a minimized preview, so here's another link where you can see it.
Thank you for any help!
Change your code
FIRST:
<div style="visibility: visible; position: fixed;" id="choose" class="centered">
<div style="position: fixed; transform: translate(-50%, -50%); width: 100%; left: 50%; top: 50%;" id="choose-cont">
<h3>You are X, the computer is O.</h3>
<button id="okay">OK</button>
<button id="surprise">No</button>
</div>
</div>
2.
<div style="position: fixed; transform: translate(-50%, -50%); width: 100%; left: 50%; top: 50%;" id="choose-cont">
<h3>You are X, the computer is O.</h3>
<button id="okay">OK</button>
<button id="surprise">No</button>
</div>
You can also add that in your CSS i just paste to you that you can see cahanges!
NOTE - You need chack you YQ code, i can overwrite circle
picture:http://prntscr.com/clwp72
The problem is with this class:
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Cancel it and you will not have flickering.
I'm guessing that the problem is with the transform attribute. You insert and remove items into the DOM and it has to recalculate the position.
When I clear all styles from the class- flickering is gone:
Fiddle
I need to rotate an image with javascript in 90-degree intervals. I have tried a few libraries like jQuery rotate and Raphaël, but they have the same problem - The image is rotated around its center. I have a bunch of content on all sides of the image, and if the image isn't perfectly square, parts of it will end up on top of that content. I want the image to stay inside its parent div, which has max-with and max-height set.
Using jQuery rotate like this (http://jsfiddle.net/s6zSn/1073/):
var angle = 0;
$('#button').on('click', function() {
angle += 90;
$("#image").rotate(angle);
});
Results in this:
And this is the result i would like instead:
Anyone have an idea on how to accomplish this?
You use a combination of CSS's transform (with vendor prefixes as necessary) and transform-origin, like this: (also on jsFiddle)
var angle = 0,
img = document.getElementById('container');
document.getElementById('button').onclick = function() {
angle = (angle + 90) % 360;
img.className = "rotate" + angle;
}
#container {
width: 820px;
height: 100px;
overflow: hidden;
}
#container.rotate90,
#container.rotate270 {
width: 100px;
height: 820px
}
#image {
transform-origin: top left;
/* IE 10+, Firefox, etc. */
-webkit-transform-origin: top left;
/* Chrome */
-ms-transform-origin: top left;
/* IE 9 */
}
#container.rotate90 #image {
transform: rotate(90deg) translateY(-100%);
-webkit-transform: rotate(90deg) translateY(-100%);
-ms-transform: rotate(90deg) translateY(-100%);
}
#container.rotate180 #image {
transform: rotate(180deg) translate(-100%, -100%);
-webkit-transform: rotate(180deg) translate(-100%, -100%);
-ms-transform: rotate(180deg) translateX(-100%, -100%);
}
#container.rotate270 #image {
transform: rotate(270deg) translateX(-100%);
-webkit-transform: rotate(270deg) translateX(-100%);
-ms-transform: rotate(270deg) translateX(-100%);
}
<button id="button">Click me!</button>
<div id="container">
<img src="http://i.stack.imgur.com/zbLrE.png" id="image" />
</div>
var angle = 0;
$('#button').on('click', function() {
angle += 90;
$('#image').css('transform','rotate(' + angle + 'deg)');
});
Try this code.
No need for jQuery and lot's of CSS anymore (Note that some browsers need extra CSS)
Kind of what #Abinthaha posted, but pure JS, without the need of jQuery.
let rotateAngle = 90;
function rotate(image) {
image.setAttribute("style", "transform: rotate(" + rotateAngle + "deg)");
rotateAngle = rotateAngle + 90;
}
#rotater {
transition: all 0.3s ease;
border: 0.0625em solid black;
border-radius: 3.75em;
}
<img id="rotater" onclick="rotate(this)" src="https://upload.wikimedia.org/wikipedia/en/e/e0/Iron_Man_bleeding_edge.jpg"/>
CSS can be applied and you will have to set transform-origin correctly to get the applied transformation in the way you want
See the fiddle:
http://jsfiddle.net/OMS_/gkrsz/
Main code:
/* assuming that the image's height is 70px */
img.rotated {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform-origin: 35px 35px;
-webkit-transform-origin: 35px 35px;
-moz-transform-origin: 35px 35px;
-ms-transform-origin: 35px 35px;
}
jQuery and JS:
$(img)
.css('transform-origin-x', imgWidth / 2)
.css('transform-origin-y', imgHeight / 2);
// By calculating the height and width of the image in the load function
// $(img).css('transform-origin', (imgWidth / 2) + ' ' + (imgHeight / 2) );
Logic:
Divide the image's height by 2. The transform-x and transform-y values should be this value
Link:
transform-origin at CSS | MDN
Hope this can help you!
<input type="button" id="left" value="left" />
<input type="button" id="right" value="right" />
<img src="https://www.google.com/images/srpr/logo3w.png" id="image">
<script>
var angle = 0;
$('#left').on('click', function () {
angle -= 90;
$("#image").rotate(angle);
});
$('#right').on('click', function () {
angle += 90;
$("#image").rotate(angle);
});
</script>
Try it
i have seen your running code .There is one line correction in your code.
Write:
$("#wrapper").rotate(angle);
instead of:
$("#image").rotate(angle);
and you will get your desired output,hope this is what you want.
I think this will work.
document.getElementById('#image').style.transform = "rotate(90deg)";
Hope this helps. It's work with me.
You can always apply CCS class with rotate property - http://css-tricks.com/snippets/css/text-rotation/
To keep rotated image within your div dimensions you need to adjust CSS as well, there is no needs to use JavaScript except of adding class.
Based on Anuga answer I have extended it to multiple images.
Keep track of the rotation angle of the image as an attribute of the image.
function rotate(image) {
let rotateAngle = Number(image.getAttribute("rotangle")) + 90;
image.setAttribute("style", "transform: rotate(" + rotateAngle + "deg)");
image.setAttribute("rotangle", "" + rotateAngle);
}
.rotater {
transition: all 0.3s ease;
border: 0.0625em solid black;
border-radius: 3.75em;
}
<img class="rotater" onclick="rotate(this)" src="https://upload.wikimedia.org/wikipedia/en/e/e0/Iron_Man_bleeding_edge.jpg"/>
<img class="rotater" onclick="rotate(this)" src="https://upload.wikimedia.org/wikipedia/en/e/e0/Iron_Man_bleeding_edge.jpg"/>
<img class="rotater" onclick="rotate(this)" src="https://upload.wikimedia.org/wikipedia/en/e/e0/Iron_Man_bleeding_edge.jpg"/>
Edit
Removed the modulo, looks strange.