Mouse hover moving image position - javascript

I am trying to move an image when my mouse is over it.
Here's an exemple. When moving hover pictures, the text is smoothly following your mouse and this is what I'm looking for.
Do you have any idea ?
The problem with what I tried is that the image keeps moving when I get out of the violet box. (I would prefer to avoid having to create a box and recognize when I am over the image).
$("#containerScaled").on('mousemove', '.box', function (e) {
$("#followC").css("top", e.clientY)
.css("left", e.clientX);
});
<style>
#containerScaled, #followC {
transition: all 0.9s ease-out;
transform-origin: center;
transform: scale(1, 1);
}
.box {
height:50px;
width:50px;
left: 500px;
top: 50px;
background-color: blueviolet;
position: absolute;
}
.mouseFollow {
position: fixed;
width:70px;
height:20px;
font-size:12px;
pointer-events:none;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="containerScaled" class="container">
<div class="box">test</div>
</div>
<div id="followC" class="mouseFollow"><img src=" image "/></div>

I think you should begin with altering your position based on where your mose is positioned inside your rectangel like so:
if (e.clientX > width/2){
addX = 20;
}
if(e.clientX < width/2){
addX = -20;
}
if(e.clientY > height/2){
addY = 20;
}
if(e.clientY < height/2){
addY = -20;
}
This is the first step, that actually makes something "follow" your mouse.
I think you could do some optimization, so that the animation is more crispy, but basically thats the way to go.
I also added
$("#containerScaled").on('mouseleave', '.box', function(e) {
$("#followC").css("top", "50%").css("left", "50%");
});
so that your element will get back to its original position once you leave the :hover area
Because of this I also made you hover area transparent, any lay over the moving element, so that when you hover over the moving element, you wont leave the hover area, and trigger mouseleave
.box{
background-color: transparent;
}
.boxcolored{
position: absolute;
height: 100px;
width: 100px;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
background-color: green;
}
$("#containerScaled").on('mousemove', '.box', function(e) {
var left = parseFloat($(".box").css("left"));
var right = parseFloat($(".box").css("top"));
var width = parseFloat($(".box").css("widht"));
var height = parseFloat($(".box").css("height"));
var addX = 0;
var addY = 0;
if (e.clientX > width/2){
addX = 20;
}
if(e.clientX < width/2){
addX = -20;
}
if(e.clientY > height/2){
addY = 20;
}
if(e.clientY < height/2){
addY = -20;
}
$("#followC").css("top", e.clientY + addY)
.css("left", e.clientX + addX);
});
$("#containerScaled").on('mouseleave', '.box', function(e) {
$("#followC").css("top", "50%").css("left", "50%");
});
#containerScaled {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background-color: red;
}
#followC {
transition: all 0.9s ease-out;
transform-origin: center;
}
.box {
position: absolute;
height: 100px;
width: 100px;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
background-color: transparent;
}
.boxcolored{
position: absolute;
height: 100px;
width: 100px;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
background-color: green;
}
.mouseFollow {
position: relative;
height: 20px;
width: 75px;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="containerScaled" class="container">
<div class="boxcolored"></div>
<div id="followC" class="mouseFollow">HALLO</div>
<div class="box">mouse me</div>
</div>

The box outlined in a red dashed line is the hover area. The yellow box is the visual area which is the approximation of the limits to which the letters can move within.
There is a lag and an offset. The lag is due to transition: 0.9s and the offset is left and top. The lag can be decreased but at the cost of the smooth movement, There are four letters at varying transition times for comparison. Notice that they all stop at the same position (when the mouse is no longer moving within the dashed box), it just that the slower the transition the more movement occurs after the mouse has left the dashed box.
The offset is tougher since there is only two positions that will work: x: right or left and y: top or bottom. If keeping the letters within a box is a concern, then keep the hover area border and background to none and show the offset (visual area) instead.
Note: Do not review this demo in compact mode, view it in full page mode (normal dimensions)
$(".target").on('mousemove', function(e) {
$(".text").css({
"top": e.clientY,
"left": e.clientX
});
});
main {
position:relative;
font: 400 16px/1.2 Arial;
}
.zone {
position: absolute;
z-index: 1;
height: 120px;
width: 110px;
margin: 90px 0 0 90px;
background: gold;
color:white;
text-align:right;
}
.target {
position: absolute;
z-index: 2;
height: 100px;
width: 100px;
margin: 75px;
outline: 3px dashed red;
color:red
}
.text {
position: absolute;
z-index: 3;
top: 90px;
left: 90px;
font-size: 32px;
color:black
}
.A {
transition: all 0.9s ease-out;
}
.B {
transition: all 0.6s ease-out;
}
.C {
transition: all 0.3s ease-out;
}
<main>
<section class="target">Hover Area</section>
<aside class="text A">A</aside>
<aside class="text B">B</aside>
<aside class="text C">C</aside>
<aside class="text D">D</aside>
<section class='zone'><b>Visual Area</b></section>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Related

Animate a div to increase width and height, expanding outwards in all directions

I have a circle div, and I want to make it so when it is clicked it expands outwards in all directions and then comes back in. The trouble is, because position is defined by the top-left corner, the circle gets bigger, but expands only down and to the right, which creates a weird looking effect.
document.getElementById("circle").onclick = function(e){
document.getElementById("circle").classList.add("animate")
document.addEventListener("animationend", function(){
document.getElementById("circle").classList.remove("animate")
});
};
#circle{
width: 20px;
height: 20px;
background-color: black;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
}
.animate{
animation-name: expand;
animation-fill-mode: forwards;
animation-duration: 1s;
}
#keyframes expand{
0%{width: 20px; height: 20px;}
50%{width: 50px; height: 50px;}
100%{width: 20px; height: 20px;}
}
<div id = "circle"><div>
I would really prefer it it would expand at all sides, like if position were defined from the center and you just increased the radius. Is there any way to get this effect?
Use clip-path
document.getElementById("circle").onclick = function(e){
document.getElementById("circle").classList.add("animate")
document.addEventListener("transitionend", function(){
document.getElementById("circle").classList.remove("animate")
});
};
#circle{
width: 100px;
height: 100px;
background-color: black;
position: absolute;
inset:0;
margin: auto;
border-radius: 50%;
clip-path: circle(20%);
transition: .5s;
}
#circle.animate{
clip-path: circle(50%)
}
<div id = "circle"><div>

Comparison slider – How do I make the mouse position operate the opposite way?

I'm trying to make a landing page comparison slider that reacts on the mouseX position,
but I want the slider to move the opposite direction of the mouse position.
Any suggestions on how I can make that happen?
Demo:
https://jsfiddle.net/uw5v94qf/
So basically, like the demo shows, in my case the slider follows the mouse position.
But I want it to kind of do the opposite(?), that is revealing the current slide that the mouse is hovering. The more the mouse moves towards the edge, the more it shows that particular slide.
(function($){
$(function(){
$('.before-wrapper').on( "mousemove", function(e) {
var offsets = $(this).offset();
var fullWidth = $(this).width();
var mouseX = e.pageX - offsets.left;
if (mouseX < 0) { mouseX = 0; }
else if (mouseX > fullWidth) { mouseX = fullWidth }
$(this).parent().find('.comparison-slider').css({
left: mouseX,
transition: 'ease-out'
});
$(this).find('.after-wrapper').css({
transform: 'translateX(' + (mouseX) + 'px)',
transition: 'all 1s'
});
$(this).find('.after-image').css({
transform: 'translateX(' + (-1*mouseX) + 'px)',
transition: 'all 1s'
});
});
$('.slider-wrapper').on( "mouseleave", function() {
$(this).parent().find('.comparison-slider').css({
left: '50%',
transition: 'all .3s'
});
$(this).find('.after-wrapper').css({
transform: 'translateX(50%)',
transition: 'all .3s'
});
$(this).find('.after-image').css({
transform: 'translateX(-50%)',
transition: 'all .3s'
});
});
});
})(jQuery);
body{
margin:0;
font-family: open sans;
}
.slider-wrapper {
width: 100%;
height: 100vh;
position: relative;
}
.slider-wrapper:hover { cursor: crosshair;; }
.comparison-slider {
}
.before-wrapper {
display: block;
overflow: hidden;
width: auto;
height: 100%;
position: relative;
background: url("#") no-repeat center center #111111;
background-size: cover;
}
.before-wrapper:before {
display: block;
content: '';
width: 100%;
height:100%;
}
.after-wrapper, .after-image {
}
.after-wrapper {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transform: translateX(50%);
transform: translateX(50%);
}
.after-image {
display: block;
width: auto;
height: 100%;
position: relative;
-webkit-transform: translateX(-50%);
61
transform: translateX(-50%);
background: url("#") no-repeat center center #efefef;
background-size: cover;
}
.past, .future{
padding: 40px;
color:#fff;
text-transform:uppercase;
font-size:20px;
/* text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7); */
font-weight:800;
z-index:10;
}
.past {
position: absolute;
display: block;
bottom: 0px;
left:0px;
color:#111;
}
.you {
width: 200px;
height: 200px;
position: absolute;
display: block;
right:0px;
left: 0px;
z-index:999;
background: red;
}
.future {
position: absolute;
display: block;
bottom: 0px;
right:0px;
}
<body>
<!-- partial:index.partial.html -->
<div class="slider-wrapper">
<div class="past">Interior</div>
<div class="future">3D</div>
<div class="before-wrapper">
<div class="after-wrapper">
<div class="after-image"></div>
</div>
</div>
<div class="comparison-slider"></div>
</div>
<!-- partial -->
<script src='https://code.jquery.com/jquery-2.1.4.min.js'></script><script src="./script.js"></script>
</body>
</html>
Actually this small adjustment does the trick
var mouseX = $(window).width() - e.pageX ;
You're assigning the mouseX to be it's normal value (e.pageX) subtracted from the window's width
https://jsfiddle.net/kinglish/fb28Lmzg/5/

Why "div" with "position: absolute" overflows screen

I watched a tutorial on how to make custom cursor in CSS and JavaScript. I did it, but when I move it down to the bottom of the screen, it overflows and expands unnecessarily website like this:
(this dark circle is the cursor)
I don't know what to do. It works, when I change overflow-y to hidden, but this is not what I want because then every other element on the website is also hidden.
CSS:
html {
font-size: 10px;
overflow-x: hidden;
cursor: none;
}
.cursor {
display: none;
z-index: 10;
position: absolute;
width: 5rem;
height: 5rem;
border-radius: 5rem;
background-color: #000000;
opacity: .4;
transform: translate(-50%, -50%);
pointer-events: none;
transition: all .3s ease;
transition-property: opacity, transform;
transform-origin: 100% 100%;
}
JS:
window.onload = () => {
cursor.style.display = 'inline';
}
const changeCursorPosition = e => {
cursor.style.left = e.pageX + 'px';
cursor.style.top = e.pageY + 'px';
}
window.addEventListener('mouseover', changeCursorPosition);
window.addEventListener('mousemove', changeCursorPosition);
You can always just use an image as the cursor.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property
* {
cursor: url(data:image/png;base64,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) -10 -10, auto;
}

TranslateX to appear as animating

I am trying to use more css and less Javascript for animation. I am running into an issue animating three different boxes. I have the boxes fade in with opacity by adding the fadeShow class to bring the opacity to 1. However, I am wanting the boxes to appear as if they are animating from the left side of the page to the right.
Here is a fiddle that shows it in action:
Click here to see
.info-box {
border: 1px solid black;
padding: 50px;
background: #00f;
color: #fff;
display: inline;
margin: 0 100px;
transition: 1s;
opacity: 0;
}
.info-box.fadeShow {
opacity: 1;
transform: translateX(150px);
}
I am trying to make the boxes animate over 150px OR if there is a better way to do this to put the boxes into their perminent state. What I mean by this is, if the boxes are supposed to be at left: 25%;, left: 45%; and left: 65%;, then I would want the boxes to be 150px to the left of that and then transition into place.
Firstly, to have the boxes slide over from the left, you should apply the negative transformation to the .info-box class:
transform:translatex(-150px);
And then reset it in the .fadeShow class:
transform:initial;
Secondly, you have the display property of the .info-box class set to inline, you'll need to change that as transformations can't be applied to inline elements.
Finally, for performance purposes, it's best to explicitly state which properties you want to apply transitions to:
transition:opacity 1s,transform 1s;
Or:
transition-duration:1s;
transition-property:opacity,transform;
Without CSS animations and calc function:
window.addEventListener("scroll", function(event) {
var top, green, red, yellow;
top = this.scrollY;
green = document.querySelector("#green"),
red = document.querySelector("#red"),
yellow= document.querySelector("#yellow");
if(top > 100){
green.classList.add("green", "active");
red.classList.add("red", "active");
yellow.classList.add("yellow", "active");
}
}, false);
*{box-sizing:border-box; height: 400vh}
body{margin: 0; padding-top: 200px}
.box{
width: 150px;
height: 150px;
opacity:0;
position: absolute;
transform: translateX(-150px);
opacity:0
}
#green{
background: green;
left: 25%;
}
#red{
background: red;
left: 45%;
}
#yellow{
background: yellow;
left: 65%;
}
#green.green{transition: all .3s ease}
#red.red{transition: all .6s ease}
#yellow.yellow{transition: all .9s ease}
#green.active,
#red.active,
#yellow.active{opacity: 1;transform: translateX(0);}
<section>
<article>
<div id=green class=box></div>
<div id=red class=box></div>
<div id=yellow class=box></div>
</article>
</section>
With CSS animations and calc function:
*{box-sizing:border-box}
body{margin: 0; padding-top: 20px}
.box{
width: 150px;
height: 150px;
position: absolute
}
#green{
background: green;
left: 25%;
animation:slideinGreen .3s ease
}
#red{
background: red;
left: 45%;
animation:slideinRed .6s ease
}
#yellow{
background: yellow;
left: 65%;
animation:slideinYellow .9s ease
}
#keyframes slideinGreen {
from {
left: calc(25% - 150px); opacity: 0
}
}
#keyframes slideinRed{
from {
left: calc(45% - 150px); opacity: 0
}
}
#keyframes slideinYellow {
from {
left: calc(65% - 150px); opacity: 0
}
}
<section>
<article>
<div id=green class=box></div>
<div id=red class=box></div>
<div id=yellow class=box></div>
</article>
</section>
Now you can add EventTarget.addEventListener() and Element.classList
window.addEventListener("scroll", function(event) {
var top, green, red, yellow;
top = this.scrollY;
green = document.querySelector("#green"),
red = document.querySelector("#red"),
yellow= document.querySelector("#yellow");
if(top > 100){
green.classList.add("green", "active");
red.classList.add("red", "active");
yellow.classList.add("yellow", "active");
}
}, false);
*{box-sizing:border-box; height: 400vh}
body{margin: 0; padding-top: 200px}
.box{
width: 150px;
height: 150px;
opacity:0;
position: absolute
}
#green{
background: green;
left: 25%;
}
#red{
background: red;
left: 45%;
}
#yellow{
background: yellow;
left: 65%;
}
#green.green{animation:slideinGreen .3s ease}
#red.red{animation:slideinRed .6s ease}
#yellow.yellow{animation:slideinYellow .9s ease}
#green.active,#red.active,#yellow.active{opacity: 1}
#keyframes slideinGreen {
from {
left: calc(25% - 150px);opacity:0
}
}
#keyframes slideinRed{
from {
left: calc(45% - 150px);opacity:0
}
}
#keyframes slideinYellow {
from {
left: calc(65% - 150px);opacity:0
}
}
<section>
<article>
<div id=green class=box></div>
<div id=red class=box></div>
<div id=yellow class=box></div>
</article>
</section>
you need to set css transition to: transition: all 1s;
since you need to tell what properties you need to animate.
and using all means animate all css properties. also you need to set display: inline-block
.info-box {
border: 1px solid black;
padding: 50px;
background: #00f;
color: #fff;
display: inline-block;
margin: 0 100px;
transition:all 1s;
opacity: 0;
}
The transform isn't working because the child divs are set to display:inline.
Change that to inline-block.
JSfiddle Demo

Keep element in original position after scaling from center

So i want to know how to calculate translate css property value for element that is scaled from center (css: transform-origin: 50% 50% 0).
Here is my HTML and CSS (FIDDLE: http://jsfiddle.net/rPNyM/)
HTML:
<div id="holder">
<div id="dot"></div>
<div id="box"></div>
</div>
CSS:
#holder {
position: absolute;
width: 500px;
height: 500px;
background: #226699;
}
#dot {
position: absolute;
left: 100px;
top: 100px;
width: 5px;
height: 5px;
background: #ff0000;
z-index: 20;
}
#box {
position: absolute;
left: 100px;
top: 100px;
width: 100px;
height: 100px;
background: #000;
transform: translate(-25px, -25px) scale(0.2,0.2);
transform-origin: 50% 50% 0;
-moz-transform: translate(-25px, -25px) scale(0.2,0.2);
-moz-transform-origin: 50% 50% 0;
}
The black box should be in same (left top) position as red box even when scale value is changed.
Found the answer by my self (tested some calculations).
Just calculate like this (Javascript):
var pad_x = ((elem_width * scale) - elem_width) / 2;
var pad_y = ((elem_height * scale) - elem_height) / 2;

Categories