Move image inside div text using hover - javascript

I'm trying to imitate this project in jsfiddle and how do I do this hover effect inside my React project without using jquery. Here's my current script tag : <script src="/umi.js"></script> in index.html. Is there any way to implement this effect without having to include <script>?
Here's my css code:
.bigTitle{
font-weight: 800;
color: transparent;
font-size:120px;
background: url("https://phandroid.s3.amazonaws.com/wp-content/uploads/2014/05/rainbow-nebula.jpg") repeat;
background-position: 40% 50%;
-webkit-background-clip: text;
position:relative;
text-align:center;
line-height:90px;
letter-spacing: -8px;
}
I would want the image inside the text to react according to my mouse position.

const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
const mouseMove = (e) => {
let mouseX, mouseY;
let traX, traY;
mouseX = e.pageX;
mouseY = e.pageY;
traX = ((4 * mouseX) / 570) + 40;
traY = ((4 * mouseY) / 570) + 50;
document.getElementById('bigTitle').style.backgroundPosition = traX + "%" + traY + "%";
}
#bigTitle{
font-weight: 800;
color: transparent;
font-size:120px;
background: url("https://phandroid.s3.amazonaws.com/wp-content/uploads/2014/05/rainbow-nebula.jpg") repeat;
background-position: 40% 50%;
-webkit-background-clip: text;
position:relative;
text-align:center;
line-height:90px;
letter-spacing: -8px;
}
<div id="bigTitle" onmousemove="mouseMove(event)">It works?</div>
This should do it, I just translated whatever it was in the example you provided in javascript.

Related

Mouse following issue when using jquery fadeIn

I am trying to have this circle follow the cursor. However I need the cursor to fade in after the user clicks a button, when this happens though the circle won't be centered on the cursor.
The first code snippet shows the desired result in terms of the circle following the cursor correctly and being centered.The second snippet shows the desired fade in on button click but as you can see the circle won't be centered on the cursor
First code snippet:
const cursor = document.querySelector('.test');
const {
width,
height
} = cursor.getBoundingClientRect();
document.addEventListener('mousemove', e => {
cursor.style.top = e.y - height / 2 + 'px';
cursor.style.left = e.x - width / 2 + 'px';
});
.test {
position: absolute;
width: 25rem;
height: 25rem;
border-radius: 50%;
background-color: red;
z-index: 200;
}
<div class="test"></div>
Second code snippet:
$("#myBtn").click(function(){
$('.test').fadeIn();
});
const cursor = document.querySelector('.test');
const {
width,
height
} = cursor.getBoundingClientRect();
document.addEventListener('mousemove', e => {
cursor.style.top = e.y - height / 2 + 'px';
cursor.style.left = e.x - width / 2 + 'px';
});
.test {
position: absolute;
width: 25rem;
height: 25rem;
border-radius: 50%;
background-color: blue;
z-index: 200;
display: none;
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<button id="myBtn">show</button>
<div class="test"></div>
In the second example, on page init the .test div has display: none, so its height and width are 0. You must calculate them after the fadeIn to get the correct result.
You can also add the mousemove listener after fadeIn:
$("#myBtn").click(function() {
$('.test').fadeIn('slow', function() {
const cursor = document.querySelector('.test')
, { width, height } = cursor.getBoundingClientRect();
document.addEventListener('mousemove', e => {
cursor.style.top = e.y - height / 2 + 'px';
cursor.style.left = e.x - width / 2 + 'px';
});
});
});
.test {
position: absolute;
width: 25rem;
height: 25rem;
border-radius: 50%;
background-color: blue;
z-index: 200;
display: none;
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<button id="myBtn">show</button>
<div class="test"></div>
Another, perhaps simpler, alternative is just to call fadeOut() (with a duration of 0) on the .test div on page load, instead of using display:none
$("#myBtn").click(function(){
$('.test').fadeIn();
});
const cursor = document.querySelector('.test');
const {
width,
height
} = cursor.getBoundingClientRect();
$('.test').fadeOut(0);
document.addEventListener('mousemove', e => {
cursor.style.top = e.y - height / 2 + 'px';
cursor.style.left = e.x - width / 2 + 'px';
});
.test {
position: absolute;
width: 25rem;
height: 25rem;
border-radius: 50%;
background-color: blue;
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<button id="myBtn">show</button>
<div class="test"></div>

Use an image as a mask for another image

I'm making a website that I wanted to be a white page that you could stamp to make another image appear under. So when you click, you make a holepunch.
Like this exemple :
So I managed to have a randomized image in the background as I click which is fine for what I want, and to be able to .append() the holepunches.
But I don't know how to do the mask thing I've been digging online for a few things and help, and managed to make it work in certain cases but not that one...
It should be like that (I guess) :
image in the background
white shape in front
the star shape is making a holepunch in the white shape
For now, the only thing I managed to do is to have the picture besides a bigger holepunch (which is my original img) but when I click it doesn't make any holepunch, it justs add the stamp.
Here is the code :
var images = ["https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png", "https://ichef.bbci.co.uk/news/1024/cpsprodpb/151AB/production/_111434468_gettyimages-1143489763.jpg"];
$(document.body).click(function(c) {
var tw = 100 / 2;
var th = 30 / 2;
var x = Math.floor((Math.random() * images.length));
document.getElementById('random').src = images[x];
$("#random").css({
position: 'absolute',
display: "block",
left: 0,
top: 0
});
var tw = 50 / 2;
var th = tw;
$('#holepunch:last').clone().appendTo(this).css({
position: 'absolute',
display: "block",
left: c.pageX - tw - $(this).position().left,
top: c.pageY - th + $(this).scrollTop()
});
});
body{
background: lightgrey;
width: 100vw;
height: 100vh;
z-index: 1;
opacity: 1;
}
.fauxbody{
z-index: 100;
position: fixed;
width: 100vw;
height: 100vh;
background-color: white;
top: 0;
left: 0;
-webkit-mask:
-moz-element(#holepunch) 1vw 1vh no-repeat,
linear-gradient(#fff 0 0);
mask-composite:exclude;
}
#random{
z-index: -100;
width: 100vw;
height: auto;
}
#holepunch{
width: 50px;
height: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<img id="random">
<div class ="fauxbody">
<img id="holepunch" src="https://oshi.at/iimtXg/Jqtz.png">
</div>
</body>
Here is an idea using multiple mask and CSS variables. The trick is to add an extra layer on each click. I removed the code related to background generation since it's irrelevant and quite easy to be added
var mask = "";
w = 60;
h = 60;
document.documentElement.addEventListener("click", function (c) {
mask+="url(https://i.ibb.co/FzmCjLL/Jqtz.png)"+(c.pageX-w/2)+"px "+(c.pageY-h/2)+"px/"+w+"px "+h+"px no-repeat,";
document.documentElement.style.setProperty("--mask", mask)
});
html {
background:url(https://picsum.photos/800/800) center/cover;
}
html::before {
content:"";
position: fixed;
background-color: #f3f3f3;
inset: 0;
-webkit-mask:
var(--mask)
linear-gradient(#fff 0 0);
-webkit-mask-reepat: no-repeat;
-webkit-mask-composite: destination-out;
mask-composite: exclude;
}
Also like below without mask-composite:
var mask = "";
w = 60;
h = 60;
document.documentElement.addEventListener("click", function(c) {
if (mask != "")
mask += ",";
mask += "url(https://i.ibb.co/FzmCjLL/Jqtz.png)" + (c.pageX - w / 2) + "px " + (c.pageY - h / 2) + "px/" + w + "px " + h + "px no-repeat";
document.documentElement.style.setProperty("--mask", mask)
});
html::before {
content: "";
position: fixed;
background: url(https://picsum.photos/800/800) center/cover;
inset: 0;
-webkit-mask: var(--mask, linear-gradient(#0000 0 0));
}
I would try to use canvas with white background and add a mouseclick event listener, which cuts out the canvas. I found another question on stack overflow what may can help you:
HTML5 Cut out circle from previous drawn strokes

div's have margins when i set margin to 0 for div, and body

Im trying to get a div called touch-container to hold a canvas with 3 div's on top. I'm sizing them using javascript as well.
The problem is that each of the 3 div's have a margin which takes up the rest of the space in the container even though i specifically state 0 margin.
Here is a jsFiddle, if you inspect, you can see the margin Jsfiddle
HTML:
<div id = "touch-container">
<div id = "touch-left" class = "touch-control"></div>
<div id = "touch-middle" class = "touch-control"></div>
<div id = "touch-right" class = "touch-control"></div>
<canvas id = "canvas" width = "960" height = "560"></canvas>
</div>
CSS:
body {
margin: 0;
}
#touch-container{
width: 964px;
height: 560px;
display: inline-block;
margin: 0;
}
.touch-control{
position: relative;
margin: 0;
}
#touch-left{
background-color: red;
}
#touch-middle{
background-color: green;
}
#touch-right{
background-color: blue;
}
JS:
var leftTouch = document.getElementById('touch-left');
var upTouch = document.getElementById('touch-middle');
var rightTouch = document.getElementById('touch-right');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
var width = (canvas.width > canvas.height ? canvas.width : canvas.height);
var height = (canvas.height > canvas.width ? canvas.width : canvas.height);
leftTouch.style.width = (width/ 4) + 'px';
leftTouch.style.height = height + 'px';
upTouch.style.width = (width/ 2) + 'px';
upTouch.style.height = height + 'px';
rightTouch.style.width = (width/ 4) + 'px';
rightTouch.style.height = height + 'px';
ctx.fillRect(0,0,canvas.width, canvas.height);
I've colored them in so it should be a black square on the bottom, then from left to right, a red, green and blue square that takes up 25%, 50% 25% of the container respectively so you wont even be able to see the black canvas.
You didn't add any float in your elements(squares) so the squares don't know how they should be located, You most use float:left; to force squares to be in a same line and display:inline-block; wont works in your case (it just works for text only):
Jsfiddle
css:
#touch-container{
width: 964px;
height: 560px;
display: block;/* new update */
margin: 0;
}
#touch-left{
background-color: red;
float:left;/* new update from here to below */
display:block;
}
#touch-middle{
background-color: green;
float:left;/* new update from here to below */
display:block;
}
#touch-right{
background-color: blue;
float:left;/* new update from here to below */
display:block;
}
Margin refers to the spacing between block and inline-block level elements. Since divs are block elements, they stack on top of each other, and margin: 0 removes any space between them.
If you are looking to place the divs on top of the canvas element, you can achieve that with absolute positioning.
.touch-control {
position: absolute;
top: 0;
}
Then you can use your javascript to set the 'left' property of each div to where you want it, or positioning them individually with the css.

Image angle changes depending position of mouse

Im trying to build a game where enemies jump out of the water and you fire water at them...
When the user clicks to fire I want the img src to point in the direction of the click, to achieve what I have so far I have css and js script (code below) however it looks to static, I feel having the water point in the direction of the users input would help a lot however Im not sure how to achieve this?
//bind to gun events
this.playfield.on('gun:out_of_ammo',_.bind(function(){this.outOfAmmo();},this));
this.playfield.on('gun:fire',_.bind(function(){
this.flashScreen();
},this));
...
flashScreen : function(){
$(".theFlash").css("display","block");
setTimeout(function(){
$('.theFlash').css("display","none");
},400);
}
CSS
.theFlash{
background-color : transparent;
width:900px;
height:500px;
position:relative;
margin:0 auto;
z-index:10;
display:none;
}
I put together an example below that will hopefully help you out.
You just have to specify the source from where the shoot is fired (sourceX,sourceY), calculate the angle to where the mouse is clicked (done below, so should just be to copy/paste) and adjust the transform: rotate(Xdeg); to the new angle.
Make sure to set the orgin in css with transform-origin, so that the flame rotates around the source and not the flame itself.
Try it out at the bottom.
var game,
flame,
sourceX = 310,
sourceY = 110;
window.onload = function() {
game = document.getElementById('game');
flame = document.getElementById('flame');
game.addEventListener('click', function(e) {
var targetX = e.pageX,
targetY = e.pageY,
deltaX = targetX - sourceX,
deltaY = targetY - sourceY,
rad = Math.atan2(deltaY, deltaX),
deg = rad * (180 / Math.PI),
length = Math.sqrt(deltaX*deltaX+deltaY*deltaY);
fire(deg,length);
}, false);
};
function fire(deg,length) {
flame.style.opacity = 1;
flame.style.transform = 'rotate(' + deg + 'deg)'
flame.style.width = length + 'px';
setTimeout(function() {
flame.style.opacity = 0;
},300);
};
#game {
position: relative;
width: 400px;
height: 200px;
background-color: #666;
overflow: hidden;
}
#source {
border-radius: 50%;
z-index: 101;
width: 20px;
height: 20px;
background-color: #ff0000;
position: absolute;
left: 300px;
top: 100px;
}
#flame {
width: 300px;
height: 3px;
background-color: #00ff00;
position: absolute;
left: 310px;
top: 110px;
opacity: 0;
transform-origin: 0px 0px;
transform: rotate(180deg);
transition: opacity .2s;
}
<div id="game">
<div id="source">
</div>
<div id="flame">
</div>
</div>
I would not recommend building games in this manner, Canvas and SVG are the preferred methods of building browser games, with that said it can be done.
Try this
https://jsfiddle.net/b77x4rq4/
$(document).ready(function(){
var middleOfElementTop = 250; // margin from top + half of height
var middleOfElementLeft = 125; // margin from left + half of width
$("#main").mousemove(function(e){
var mouseX = e.offsetX;
var mouseY = e.offsetY;
var angle = Math.atan2(mouseY - middleOfElementTop, mouseX - middleOfElementLeft) * 180 / Math.PI;
$(".box").css({"transform": "rotate(" + angle + "deg)"})
})
});

multiple canvas as buttons with onclick event

I'm having really big problems with canvas code that I'm using only 1 time in the page (in logo) working fine, and that I'm trying to use it as buttons for menu and here is the problem, I don't know really what's im doing wrong, hope some of u help me.
it's the code that I'm using for the logo and is working fine:
HTML CODE:
<html>
<head>
<title>canvas</title>
</head>
<body>
<div id="container">
<div id="logo">
<canvas style="" width="800" id="broken-glass"></canvas>
<h1 style="color: rgba(250, 250, 250, 0.95);" id="logo-title">Canvas</h1>
</div>
<script type="text/javascript">
(function() {
var isCanvasSupported = function () {
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
};
if( isCanvasSupported() ) {
var canvas = document.getElementById('broken-glass'),
context = canvas.getContext('2d'),
width = canvas.width = Math.min(800, window.innerWidth),
height = canvas.height,
numTriangles = 100,
rand = function(min, max){
return Math.floor( (Math.random() * (max - min + 1) ) + min);
};
window.drawTriangles = function(){
context.clearRect(0, 0, width, height);
var hue = rand(0,360);
var increment = 80 / numTriangles;
for(var i = 0; i < numTriangles; i++) {
context.beginPath();
context.moveTo(rand(0,width), rand(0,height) );
context.lineTo(rand(0,width), rand(0,height) );
context.lineTo(rand(0,width), rand(0,height) );
context.globalAlpha = 0.5;
context.fillStyle = 'hsl('+Math.round(hue)+', '+rand(15,60)+'%, '+ rand(10, 60) +'%)';
context.closePath();
context.fill();
hue+=increment;
if(hue > 360) hue = 0;
}
canvas.style.cssText = '-webkit-filter: contrast(115%);';
};
document.getElementById('logo-title').style.color = 'rgba(250, 250, 250, 0.95)';
drawTriangles();
var el = document.getElementById('logo');
el.onclick = function() {
drawTriangles();
};
}
})();
</script>
</div>
</body>
</html>
and it's CSS CODE:
#broken-glass
{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
}
#logo h1
{
text-align: center;
font-weight: 700;
width: 100%;
color: #000;
position: absolute;
left: 0px;
-moz-user-select: none;
cursor: pointer;
margin-top: 27px;
font-size: 63px;
line-height: 1.4;
top: 0px;
margin-bottom: 5px;
text-rendering: optimizelegibility;
font-family: Calibri,"PT Sans","Trebuchet MS","Helvetica Neue",Arial;
}
the big problem comes when i change the id's (#) to classes (.) and the "id" tag to "class" tag in the html, the canvas is overlapped... the text of h1 tag is out of the canvas... and just the hell of problems, can someone tell me what I'm doing wrong?, how to fix it, I'm trying it during hours...
too much thanks in advance!.
you may try putting an !important in every code in your css.
example:
text-align: center !important;
font-weight: 700 !important;
this fixed my problem before, hopefully it will fix yours also.

Categories

Resources