Page elements shaking due to CSS effect - javascript

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

Related

How to move custom cursor over a text

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>

Staggered movement of Custom Cursor and another problem

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.

Translate on scroll in jquery

I need help regarding the translate-animate property.
There's an image I want to translate in the upward direction when I scroll down on the page.
Now I know I can use the property translateY(px) to move it but then I don't know how to translateY while scrolling.
I want to make my webpage look like this
https://www.apple.com/uk/iphone/
As you can see when you scroll down the image translates upwards with a smooth flow.
I need a code such that I can translate my image upward smoothly on scrolling down.
P.s- This is my first question, sorry if I am not clear.
This is rather cheap parallax effect that I made myself but does not require any special magic to work... Link to my original demo page
let $scrollPrev = 0;
const $viewBottom = () => $(window).scrollTop() + $(window).innerHeight(),
$parallaxIllusion = () => {
const $pxTop = $(".parallaxTop"),
$pxMid = $(".parallaxMiddle"),
$pxBottom = $(".parallaxBottom"),
$scrollCurr = $viewBottom(),
$bodyTop = $("body").offset().top,
$bodyBottom = $bodyTop + $("body").outerHeight(true),
$pxspeed = $scrollCurr - $bodyTop;
if ($bodyTop > 0 && $viewBottom() > $bodyTop && $(window).scrollTop() <= $bodyBottom) {
$pxTop.css({
"top": 40 + -$pxspeed / 4
});
$pxMid.css({
"top": $pxspeed / 2
});
$pxBottom.css({
"top": ($pxspeed / 4)
});
$scrollPrev = $scrollCurr;
};
};
$(document).ready(() => {
$(window).scroll(() => {
$parallaxIllusion();
});
});
body{
height:700px;
}
.parallaxTop {
background: url('https://raw.githubusercontent.com/NightKn8/pure/master/img/demo1/pxHand.png') center center / cover no-repeat;
position: absolute;
left: 50%;
-ms-transform: translate(-100%, 0);
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0);
width: 403px;
height: 298px;
z-index: 2;
}
.parallaxMiddle {
background: url('https://raw.githubusercontent.com/NightKn8/pure/master/img/demo1/pxCaps.png') center center / cover no-repeat;
position: absolute;
right: 50%;
-ms-transform: translate(50%, 0);
-webkit-transform: translate(50%, 0);
transform: translate(50%, 0);
width: 109px;
height: 117px;
z-index: 4;
}
.parallaxBottom {
background: url('https://raw.githubusercontent.com/NightKn8/pure/master/img/demo1/pxBeer.png') center center / cover no-repeat;
position: absolute;
right: 50%;
-ms-transform: translate(100%, 0);
-webkit-transform: translate(100%, 0);
transform: translate(100%, 0);
width: 406px;
height: 443px;
z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="parallaxTop"></div>
<div class="parallaxMiddle"></div>
<div class="parallaxBottom"></div>
</body>
Note that you can edit the code to peak 1 image. Speed or direction is controlled at if level.

Transform - origin of image on mouse move on parent

I am trying to add smooth move effect on img when user do a mousemove on image parent element (here .carousel-img) but I can't run it properly.
What am I doing wrong?
$('.carousel-img').on('mousemove', function(e){
$('.carousel-img img').css({'transform-origin': ((e.pageX - $('.carousel-img img').offset().left) / $('.carousel-img img').width()) * 100 + '% ' + ((e.pageY - $('.carousel-img img').offset().top) / $('.carousel-img img').height()) * 100 +'%'});
})
html, body{height:100%; width:100%;}
.box{position: relative; height:100%; width:100%;}
.carousel-img {
position: absolute;
right:0;
bottom:0;
left: 0;
top:0;
padding:100px;
}
.carousel-img img {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<img src="http://placehold.it/1920x600/fff/fff">
<div class="carousel-img">
<img src="http://placehold.it/200x150/ff0000/ff0000" >
</div>
</div>
You're changing the transform-origin property instead of the transform property. You want to use the translate(x,y) to define the movement you're looking for.
You also should include a transition to your img selector, so that the movement is smooth. I also added some other attributes that may be useful when adding more complex animations such as translate3D types.
Check the updated snippet below.
$('.carousel-img').on('mousemove', function(e) {
var translateX = ((e.pageX - $('.carousel-img img').offset().left) / $('.carousel-img img').width()) * 100;
var translateY = ((e.pageY - $('.carousel-img img').offset().top) / $('.carousel-img img').height()) * 100;
var translateProperty = 'translate(' + translateX + '%, ' + translateY + '%)';
$('.carousel-img img').css({
'-webkit-transform': translateProperty,
'-moz-transform': translateProperty,
'-ms-transform': translateProperty,
'-o-transform': translateProperty,
'transform': translateProperty
});
});
html,
body {
height: 100%;
width: 100%;
}
.box {
position: relative;
height: 100%;
width: 100%;
}
.carousel-img {
position: absolute;
right: 0;
bottom: 0;
left: 0;
top: 0;
padding: 100px;
}
.carousel-img img {
position: relative;
/* Add transition */
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
/* Default values for transition to be possible */
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<img src="http://placehold.it/1920x600/fff/fff">
<div class="carousel-img">
<img src="http://placehold.it/200x150/ff0000/ff0000" >
</div>
</div>

How to make div disappear when image is placed over it?

In a previous question, I asked how to make a "cursor mirror," meaning if your cursor were to move around in the top portion of a site, a separate inversed image of a cursor would move in the inverse direction in the bottom portion of a site. Link to question here.
Continuing with this code, if the actual cursor in the top half hovered over a div to make it disappear (using CSS hover states), how would the mirror-image cursor achieve the same effect using Javascript without using the .mouseover event (since it's not mouse but a placed image)? Sorry if the title is vague, but the problem is hard to describe!
var $img = $('#mirror-image');
var imgHeight = $img.height() / 2;
function placeCursor(x, y){
$img.css({top: y + 'px', left: x+ 'px', position:'absolute'});
}
$(".top-half-black").mousemove(function(event){
var newY = $(this).height() - event.pageY - imgHeight;
placeCursor(event.pageX, newY);
});
body{
margin:0px 0px 0px 0px;
}
.top-half-black{
background-color:black;
width:100%;
height:50%;
}
.bottom-half-white{
position: relative;
}
#mirror-image{
left: 0;
top: 0;
position: absolute;
width: 17px;
height: 25px;
}
.rightside-up{
font-family:Arial;
font-size:36px;
color:white;
}
.rightside-up:hover{
opacity:0;
}
.upside-down{
font-family:Arial;
font-size:36px;
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-ms-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
}
<div class="top-half-black">
<div class="rightside-up">Blah blah blah</div>
</div>
<div class="bottom-half-white">
<img id="mirror-image" src="http://i.imgur.com/cjjNbk1.png" />
<div class="upside-down"> Blah blah blah</div>
</div>
You can do it like this:
function hideDiv() {
$(".upside-down").hide();
}
function showDiv() {
$(".upside-down").show();
}
$(".rightside-up").hover(hideDiv, showDiv);
You could use the onmousemove event on the whole document, and then check if the inverse cursor is over the element in question. Lets say you want to simulate a mouse move event for the inverse cursor over an element with ID hover.
//Save a reference to the element for speed.
var hover = $("#hover");
//When the mouse moves anywhere.
$(document).mousemove(function() {
//I assume you have the position of the inverse cursor in variables x and y.
//I guesse the solution to your previous question should give you that.
//Save the distance between the inverse cursor and the top left corner of #hover.
var diffX = hover.offset().left - x;
var diffY = hover.offset().top - y;
//Check if the shadow cursor is inside #hover.
if(diffX >= 0 && diffX <= hover.width() && diffY >= 0 && diffY <= hover.height()) {
//Things here will run if the inverse curser is inside hover.
}
else {
//Thigs here will run if the inverse cursor is not inside hover.
}
}
The code would be neater if you could use .elementFromPoint(), but Mozilla advises against using it as it is "experimental technology".
One option would be to use the adjacent sibling selector ~ to allow you to control the style of .upside-down when hovering over top-half-black. E.G:
.top-half-black:hover .rightside-up,
.top-half-black:hover ~ .bottom-half-white .upside-down {
opacity:0
}
var $img = $('#mirror-image');
var imgHeight = $img.height() / 2;
function placeCursor(x, y){
$img.css({top: y + 'px', left: x+ 'px', position:'absolute'});
}
$(".top-half-black").mousemove(function(event){
var newY = $(this).height() - event.pageY - imgHeight;
placeCursor(event.pageX, newY);
});
body{
margin:0px 0px 0px 0px;
}
.top-half-black{
background-color:black;
width:100%;
height:50%;
}
.bottom-half-white{
position: relative;
}
#mirror-image{
left: 0;
top: 0;
position: absolute;
width: 17px;
height: 25px;
}
.rightside-up{
font-family:Arial;
font-size:36px;
color:white;
}
/*.rightside-up:hover{
opacity:0;
}*/
.top-half-black:hover .rightside-up,
.top-half-black:hover ~ .bottom-half-white .upside-down {
opacity:0
}
.upside-down{
font-family:Arial;
font-size:36px;
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-ms-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
}
<div class="top-half-black">
<div class="rightside-up">Blah blah blah</div>
</div>
<div class="bottom-half-white">
<img id="mirror-image" src="http://i.imgur.com/cjjNbk1.png" />
<div class="upside-down"> Blah blah blah</div>
</div>
UPDATE...
Further to your comment, you could use document.elementFromPoint(x, y) to find the element under the mirrored cursor image and toggle its class name:
var $img = $('#mirror-image');
var imgHeight = $img.height() / 2;
function placeCursor(x, y){
$img.css({top: y + 'px', left: x+ 'px', position:'absolute'});
}
$(".top-half-black").mousemove(function(event){
var newY = $(this).height() - event.pageY - imgHeight;
var x = event.pageX,
y = $(this).height() + event.pageY;
$(".upside-down .hovered").removeClass("hovered");
placeCursor(x, newY);
var mirrorEl = document.elementFromPoint(x, y);
$(mirrorEl).addClass("hovered");
});
body{
margin:0px 0px 0px 0px;
}
.top-half-black{
background-color:black;
width:100%;
height:50%;
}
.bottom-half-white{
position: relative;
}
#mirror-image{
left: 0;
top: 0;
position: absolute;
width: 17px;
height: 25px;
}
.rightside-up{
font-family:Arial;
font-size:36px;
color:white;
}
.rightside-up span:hover{
opacity:0;
}
.upside-down span.hovered{
opacity:0;
}
.upside-down{
font-family:Arial;
font-size:36px;
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-ms-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top-half-black">
<div class="rightside-up"><span>Blah</span> <span>blah</span> <span>blah</span></div>
</div>
<div class="bottom-half-white">
<img id="mirror-image" src="http://i.imgur.com/cjjNbk1.png" />
<div class="upside-down"><span>Blah</span> <span>blah</span> <span>blah</span></div>
</div>

Categories

Resources