I'm very newbie to webdev, but I need to draft a landingpage with some trick effects.
I need to put a "stencil image" (png with transp) over a moving (mouse hover) background.
Basically, I managed to do that, but I having a big issue: If I resize browser, the background shows behind first plane image, (because I can't rezise background to browser size).
So, the main codes are:
html code:
<div id="bkg-image" class="blur"></div>
<div>
<img src="./imgs/stencil.png" class="firstPlane" />
</div>
CSS code:
#bkg-image {
background: url('./imgs/background.jpg') no-repeat center center fixed;
position: absolute;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 75%;
height: 75%;
z-index: 0;
-webkit-filter: brightness(1.7);
}
.firstPlane {
display: block;
position: absolute;
top: 0px;
left: 0px;
max-width: 100%;
height: auto;
width: auto;
z-index: 2;
}
JS code:
$(document).ready(function() {
var movementStrength = 75;
var height = movementStrength / $(window).height();
var width = movementStrength / $(window).width();
$(".firstPlane").mousemove(function(e) {
var pageX = e.pageX - ($(window).width() / 2);
var pageY = e.pageY - ($(window).height() / 2);
var newvalueX = width * pageX * -1;
var newvalueY = height * pageY * -1;
$('#bkg-image').css("background-position", newvalueX + "px " + newvalueY + "px");
});
});
Any idea how to crop the excess background or how to rescale it to fit behind firstplane image?
note: blur class is just for an animated blur effect, not relevant to this.
I took the java script from a net tutorial.
My first aproach was using webkit mask-image, but seens it don't works, now I'm trying this method.
Thanks a lot for any help
You are doing it upside down. This is how it should be.
$(document).ready(function() {
$("#bkg-image").mousemove(function(e) {
$('.firstPlane').css({left: e.pageX + "px", top: e.pageY + "px"});
});
});
I need invert the selection: I need read the mouse position on first plane and apply movement to the bkg image. (your script only works if I switch #bkg-image and .firstPlane). My issue isn't read the movement, but crop bkg-image to not show it bellow 1st plane when I have a small and tall browser window.
The solution would be a mask/clip image, but its not working for svg graphics or PNG for me, so I give up and tried with a big black PNG with transp on it to show background.
Something like this: (https://codepen.io/caraujo/pen/rVOZKJ) but with a logo (vector or png), but mask/image clip is not working for me :/
Related
I want my image to be clipped in the centre and be able to move around left right up down while being on cover to fit the whole screen
The user should be able to see only a certain portion of the image and be able to move around just like the link below but his viewpoint is the little rectangle in a fit to screen perspective
What i get so far is just the clipped upleft of my image
In case i am not clear what I am trying to achieve this effect but the user can't see move than the square
https://www.w3schools.com/howto/howto_js_image_zoom.asp
I will soon close this ticket if you happen to stumble on this check out this q I believe I am as as clear as I can here
How to clip your image freely
<style>
img {
background-position: cover;
position: absolute;
clip:rect(0px,500px,500px,0px);
}
.image1 {
background: url(images/bg.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>
<body>
<div class='clipper-div'>
<img class='image1' src='office.gif'/>
</div>
The kind you were looking for is an inset clipping:
clip-path: inset(top bottom left right);
You can listen to the mouse move event to update the clipping. In the example below, I used CSS custom properties I added to the clipper-element style definition.
These custom properties are used as CSS variables for the clipping definition.
// Globals variables (we could store them into an object,
// which would be a cleaner way
var clipperDiv = document.getElementById("clipper-div");
var hoveringClippedImg = document.getElementById("hovering-clipped");
var imgBoundingRect = hoveringClippedImg.getBoundingClientRect();
var clippingSize = 40;
// Surrouding DIV element mouse move event callback
clipperDiv.onmousemove = clipHoveredArea;
// Update image clipping
function clipHoveredArea(e) {
// First step: getting clipping coordinates from mouse position
var pos = getMousePos(e);
var top = (pos.y - clippingSize / 2);
var bottom = (imgBoundingRect.height - pos.y - (clippingSize / 2));
var left = (pos.x - clippingSize / 2);
var right = (imgBoundingRect.width - pos.x - clippingSize / 2);
// Second step: CSS custom properties
hoveringClippedImg.style.setProperty("--top", top + "px");
hoveringClippedImg.style.setProperty("--bottom", bottom + "px");
hoveringClippedImg.style.setProperty("--left", left + "px");
hoveringClippedImg.style.setProperty("--right", right + "px");
};
// Get mouse position relative to an element
// Source: //stackoverflow.com/a/42111623/4375327
function getMousePos(e) {
// e = Mouse click event.
var rect = e.currentTarget.getBoundingClientRect();
var x = e.clientX - Math.round(rect.left);
var y = e.clientY - Math.round(rect.top);
return {
x: x,
y: y
};
}
#clipper-div {
border: 2px solid black;
width: 200px;
height: 200px;
}
#hovering-clipped {
padding: 0;
margin: 0;
width: 200px;
height: 200px;
clip-path: inset(var(--top) var(--right) var(--bottom) var(--left));
--top: 0px;
--right: 0px;
--bottom: 0px;
--left: 0px;
cursor: crosshair;
}
<div id='clipper-div'>
<img id="hovering-clipped"
src="//placehold.it/200x200/d0d8f8/000000" />
</div>
Note: I used Clippy. It's a handy tool to design the clipping you want.
I have image with width: 100%; height: auto; and on this image are other elements with position: absolute; left: x; top: x; (it's a game).
When I was resizing the page, elements weren't moving (it was messing up), so I wrote this:
// on start
var img = document.getElementById('world_image');
startImageSize.w = img.clientWidth;
startImageSize.h = img.clientHeight;
actImageSize.w = startImageSize.w;
actImageSize.h = startImageSize.h;
// on resize
var img = document.getElementById('world_image');
actImageSize.w = img.clientWidth;
actImageSize.h = img.clientHeight;
// update (each tick)
$("#cr_" + this.ID).animate({
"left" : (this.x - ((startImageSize.w - actImageSize.w) / 2)) + "px",
"top" : (this.y - ((startImageSize.h - actImageSize.h) / 2)) + "px"
}, speed);
But it's not working corretly, here is short GIF representing what is happening:
A "red point" is moving faster than it shoud be.
// EDDIT! JSFiddle with whole project https://jsfiddle.net/BrunonDEV/18mqyd8r/1/
What am I doing wrong?
I wouldn't try to reposition those in JS - it's slow, makes resizing janky, and chews the javascript cycles you'll need for actually running your game, and it's not necessary anyway. Why not just set your dot's position in %, like this:
.map {
background: #68B1FF url('https://upload.wikimedia.org/wikipedia/commons/5/5e/BlankMap-World-Sovereign_Nations.svg') center top no-repeat;
background-size: contain;
position: relative;
height: 0;
padding-top: 51.2%; /* The original map image is 1104 x 566px. This is the aspect ratio as a percentage of height to width */
width: 100%;
}
.marker {
border-radius: 50%;
width: 1vw; /* These allow the markers to scale with the map */
height: 1vw;
background: red;
min-height: 8px;
max-height: 16px;
min-width: 8px;
max-width: 16px;
position: absolute;
}
<div class="map">
<div class="marker" style="top: 20%; left: 33%;"></div>
</div>
One of the important pieces here is fixed aspect ratio boxes in CSS - if you set height to 0, and padding-top (or bottom) to a percentage, the padding height is calculated as a percentage of the width, not the height as you might expect.
For bonus points, you should use an SVG map image - then it'll scale cleanly, too.
I'm developing a 2D game with javascript. I have to detect if a player is in a certain position (a door or a wall) in order to make some actions. The collisions work well on my desktop but if I change resolution all positions i checked before doesn't work anymore. Is there any way to improve a good collision detection system that works also if i change the desktop's resolution ?
What i'm doing right now is pretty like this :
Here is the html structure:
<div id="container">
<div id="main">
<img id="palyer" src="../img/sprites/pleyer.png">
</div>
Here is the css:
#container{
margin: auto;
width: 60%;
height: 80%;}
#main{
position: relative;
margin: auto;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: contain; }
#player{
position: relative;
top: 100px;
left: 400px;}
And the js:
var position = $("#player").position();
if((position.left<=55)&&(position.top>=183)&&(position.top<=215)){
changeRoom();}
It is hard to suggest without seeing the rest of the code, but one way around the problem is to have two variables to hold values for X and Y ratios. Then you multiply all your coordinates by these ratios every time you use it. The last piece needed is to update those ratios every time your game is resized, with something like this
window.onresize = function onResize(event) {
var canvas = document.getElementById('myGameScreen'); // reference to your html element
var newHeight = canvas.clientHeight;
var newWidth = canvas.clientWidth;
var ratioY = newHeight / oldHeight;
var ratioX = newWidth / oldWidth;
...
...
...
// save new dimensions for the next resize event
oldHeight = newHeight;
oldWidth = newWidth;
}
So I'm trying to get this exact effect: http://codepen.io/chrisboon27/pen/rEDIC
I can't get it to work in my code.
This is my css and the bit I want this effect applied to:
#header {
margin: -8px 0 0 0;
background-image:url(img/header_bg.jpg);
background-repeat:no-repeat;
background-position:center;
position:relative;
background-size: cover;
}
<div id="header"> </div>
Here's the JS:
$(document).ready(function() {
var movementStrength = 25;
var height = movementStrength / $(window).height();
var width = movementStrength / $(window).width();
$("#header").mousemove(function(e){
var pageX = e.pageX - ($(window).width() / 2);
var pageY = e.pageY - ($(window).height() / 2);
var newvalueX = width * pageX * -1 - 25;
var newvalueY = height * pageY * -1 - 50;
$('#header').css("background-position", newvalueX+"px "+newvalueY+"px");
});
});
My css is different to the person's codepen css - which is probably why it's not working, however when I change it, it screws up the background (it disappears). Any help would be much appreciated - I'm not very knowledgeable on js.
Thanks!
EDIT: NEVER MIND: FIXED IT. I moved the to the end of the - just above the tag - instead of having it up the top.
adding position:absolute or position:fixed will get it working. position:relative cannot calculate the height as it is.
I think it's because you forgot to set the width and height of your image in the CSS:
#header {
margin: -8px 0 0 0;
background-image:url(http://www.brandwatch.com/wp-content/uploads/2012/04/570x320xtrolls.jpg.pagespeed.ic.-hEjJryY-x.jpg);
background-repeat:no-repeat;
background-position:center;
position:relative;
background-size: cover;
height: 570px;
width: 320px;
}
Fiddle here
I'm desperately searching for solution for my client. I have graphic - something like that:
And I want to be able to take the line with circle in the center and drag it to right or left. And it will be hiding and unhiding my two full images. It's basically two images on the same place, just with another z-index I think.
I think it's possible to do it with JavaScript, but I don't know of any functions or methods for this option.
Here is my solution:
The HTML is pretty simple, just two divs for the images and one for the drag:
<div class="img" id="img1"></div>
<div class="img" id="img2"></div>
<div id="drag"></div>
For the CSS, the important part is to absolute position all the divs and give a background image.
As for the Javascript, with a little help from jQuery, we listen for the mouse events, make some calculations and adjust the CSS of the second image:
$('#drag').on('mousedown', function(e){
var $self = $(this),
dragPos = $self.position().left + $self.width()/2,
imgWidth = $('#img1').width();
$(document).on('mouseup', function(e){
$(document).off('mouseup').off('mousemove');
});
$(document).on('mousemove', function(me){
var mx = me.pageX - e.pageX + dragPos
$self.css({ left: mx });
$('#img2').css({
width: imgWidth - mx,
left: mx,
backgroundPosition: -mx + 'px 0px',
});
});
});
From there, I believe it's pretty easy to customize it and give it a unique look.
Hope this helps!
JsFiddle Demo
Something like this alphamask plugin may do the trick, though I'm not sure how simple it would be for you to implement in the manner of your slider example.
Actually quite simple. The first step is to make it work manually. I'd set it up as follows:
<div class="wrap" id="wrap1">
<div class="img-wrap img1"></div>
<div class="img-wrap img2"></div>
<div>
With CSS as follows:
.wrap {
position: relative;
width: 300px;
height: 300px;
}
.img-wrap {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
.img1 {
z-index: 1;
background: url(bg1.png) no-repeat 0px 0px;
}
.img2 {
z-index: 2;
background: url(bg1.png) no-repeat 0px 0px;
}
Now some JavaScript (with jQuery) to set a position (you can call this when you move a slider over the top later):
function setPosition(percentage){
// get the width of the container
var w = $('#wrap1').width();
// work out the width of left panel
var w1 = Math.floor(w * percentage);
// and the right panel
var w2 = w - w1;
// set the width of the right panel
// move it right by the width of the left panel
// and move the background back by the width of the left panel
$('#wrap1 .img2').css({
width: w2,
left: w1,
backgroundPosition: -w1 + 'px 0px',
});
}
You now just have to decide how to do the dragging. You could even just do it on mouseOver. Easy!