Develop Reference

the parallax layers are split and you see the layers between the parallax section and the next content section

I am trying to create a website inspired by the page: https://www.firewatchgame.com/ the issue is that when I make the screen smaller, it happens what happens here
document.querySelectorAll(".scene").forEach((elem) => {
const modifier = elem.getAttribute("data-modifier");
basicScroll
.create({
elem: elem,
from: 0,
to: 519,
direct: true,
props: {
"--translateY": {
from: "0",
to: `${10 * modifier}px`,
},
},
})
.start();
});
body {
height: 2000px;
background: black;
}
.scene {
position: absolute;
width: 100%;
transform: translateY(var(--translateY));
will-change: transform;
}
<div id="parallax">
<img class="scene" data-modifier="30" src="https://s.electerious.com/parallaxscene/p0.png">
<img class="scene" data-modifier="18" src="https://s.electerious.com/parallaxscene/p1.png">
<img class="scene" data-modifier="12" src="https://s.electerious.com/parallaxscene/p2.png">
<img class="scene" data-modifier="8" src="https://s.electerious.com/parallaxscene/p3.png">
<img class="scene" data-modifier="6" src="https://s.electerious.com/parallaxscene/p4.png">
<img class="scene" data-modifier="0" src="https://s.electerious.com/parallaxscene/p6.png">
</div>
<div id="test">
<font color="red">This is some text!asdfasd</font>
</div>
<script src="https://s.electerious.com/basicScroll/dist/basicScroll.min.js"></script>
https://jsfiddle.net/ufcqw2xh/
That it opens a section between the parallax layers and the next section, and the parallax layers are looked at.
my question is: how could I fix it or also how could I make the screen smaller, the parallax layers do what fire watch does that the image is shortened horizontally only. thank you very much for your answers.

The requirement is to keep the vertical size of the image, altering its width as necessary. There is also a problem with a 'gap' showing on certain viewport sizes between the scene and the background (a lower scene shows through as a sort of yellow).
If we change the width: 100% setting of the scenes to min-width: 100% the height remains constant and the width gets shortened as the viewport changes. The 'gap' problem disappears.
This is not an absolutely complete answer because the shortening is from the right (which actually suits the given scene because the wolf is towards the left) but for a more general solution you'd probably want to investigate further, perhaps using object-fit in some way.
Note also that the documentation says that calculate should be run on any resizing. This didn't seem to effect this change, but might be important for other changes.
document.querySelectorAll(".scene").forEach((elem) => {
const modifier = elem.getAttribute("data-modifier");
basicScroll
.create({
elem: elem,
from: 0,
to: 519,
direct: true,
props: {
"--translateY": {
from: "0",
to: `${10 * modifier}px`,
},
},
})
.start();
});
body {
height: 2000px;
background: black;
}
.scene {
position: absolute;
min-width: 100%;
transform: translateY(var(--translateY));
will-change: transform;
}
<div id="parallax">
<img class="scene" data-modifier="30" src="https://s.electerious.com/parallaxscene/p0.png">
<img class="scene" data-modifier="18" src="https://s.electerious.com/parallaxscene/p1.png">
<img class="scene" data-modifier="12" src="https://s.electerious.com/parallaxscene/p2.png">
<img class="scene" data-modifier="8" src="https://s.electerious.com/parallaxscene/p3.png">
<img class="scene" data-modifier="6" src="https://s.electerious.com/parallaxscene/p4.png">
<img class="scene" data-modifier="0" src="https://s.electerious.com/parallaxscene/p6.png">
</div>
<div id="test">
<font color="red">This is some text!asdfasd</font>
</div>
<script src="https://s.electerious.com/basicScroll/dist/basicScroll.min.js"></script>

How to set a column and container a max height so the image fits the whole page in bootstrap 4?

I have two columns in a row with bootstrap 4. I want to use the whole screen to show the image. This is my code:
<div class="container-fluid" style="padding-left:0px;">
<div class="row">
<div class="col-md-6 ">
<img class="img-fluid" src="jumbo_background.jpg" />
</div>
<div class="col-md-6">
<div class="contact-wrapper">
<p>Test</p>
</div>
</div>
</div>
</div>
Everything is working good and responsive but this is the result I get from this code:
The preferred result I want is this:
The picture I use the dimension are 6000 X 4000
The solutions I have tried:
html, body {
height: 100%;
}
I have inspected the browser with the Google dev tool and I can see the the body is 100% but still not the result I want.
I have used h-100 from bootstrap and still get the same result.
I have used height: 100vh; but on smaller devices it's not responsive
I have checked this link:
Height not 100% on Container Fluid even though html and body are
Still don't get the result I want.
How can I give the image a full height in bootstrap 4?
UPDATE:
After nikolay solution on resolution: 1156 x 1013

You seem to want to use the image as a background. So my suggestion would be to do just that, as the cross-browser support is better (I'm not saying it can't be done with <img> alone, only that it's easier with background-image). Do note I'm leaving the <img> tag in for two reasons:
SEO indexing (if you need it)
sizing the column properly on mobile devices.
However, the <img> is not rendered. You're always looking at the background image of the <div>.
Here's a solution which grabs the src attribute of the first <img> element in each .column-image and uses it as <div>s backgroundImage. For it to work, make sure the <div> has the image-column class:
$(function() {
$('.image-column').each(function() {
const src = $('img', this).eq(0).attr('src');
if (src) {
$(this).css({ backgroundImage: `url(${src})` })
}
})
});
.image-column {
min-height: 100vh;
background: transparent no-repeat center /cover;
}
.image-column .img-responsive {
visibility: hidden;
}
#media(max-width: 767px) {
.image-column {
min-height: 0;
}
.image-column .img-responsive {
width: 100%;
height: auto;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 image-column">
<img src="https://i.picsum.photos/id/237/600/400.jpg" class="img-responsive">
</div>
<div class="col-md-6">
<div class="contact-wrapper">
<p>Test</p>
</div>
</div>
</div>
</div>
Note: even though it's used as both src of the <img> and background-image of the <div>, the resource (image) is only loaded once.

Here's a solution:
html, body,
.container-fluid .row,
.container-fluid .row .col-md-6,
.container-fluid .row .col-md-6 img {
height: 100vh !important;
}
Add example for the responsive mobile view as you made above, so I can write a solution.

Positioning Parallax Hover Layers

I'm teaching myself how to create a parallax hover image using 5 layers, which is working perfectly, and I am able to resize the layers alright, but I'm having trouble with the positioning.
When resized to 150vw/vh the layers spill over the bottom and right side. I've tried a few things but not sure if I'm putting the css properties in the right place. 100vh/vw positions in the center but is too small for my header.
Should I be positioning in #scene or .img? And whats best practice for this kind of thing?
Heres what I have so far anyway:
<div class="section--parallax">
<div id="scene">
<div data-depth="0.2">
<img src="resources/img/layer1.png">
</div>
<div data-depth="0.6">
<img src="resources/img/layer2.png">
</div>
<div data-depth="0.3">
<img src="resources/img/layer3.png">
</div>
<div data-depth="0.6">
<img src="resources/img/layer4.png">
</div>
<div data-depth="0.2">
<img src="resources/img/layer5.png">
</div>
</div>
</div>
CSS
header {
background-size: cover;
background-position: center;
height: 100vh;
background-attachment: fixed;
}
#scene {
}
.section--parallax img {
width: 150vw;
height: 150vh;
}
JS
var scene = document.getElementById('scene');
var parallaxInstance = new Parallax(scene);

jQuery panzoom scale all elements

I'm using jQuery panzoom to zoom an image and some div elements. This works generally but the elements positioned on top of the image don't stay in their original locations. Is there anyway to keep the div elements where they were whilst being scaled?
JSFiddle: https://jsfiddle.net/828wu2dy/
HTML:
<section id="inverted-contain">
<div class="panzoom-elements">
<div class="item item1">ITEM 1</div>
<div class="item item2">ITEM 2</div>
<div class="panzoom">
<img src="http://www.hdwallpapers.in/walls/enchanted_forest-wide.jpg">
</div>
</div>
<div class="buttons">
<button class="zoom-in">Zoom In</button>
<button class="zoom-out">Zoom Out</button>
<input type="range" class="zoom-range">
<button class="reset">Reset</button>
</div>
</section>
JS:
(function() {
var $section = $('#inverted-contain');
$section.find('.panzoom').panzoom({
$zoomIn: $section.find(".zoom-in"),
$zoomOut: $section.find(".zoom-out"),
$zoomRange: $section.find(".zoom-range"),
$reset: $section.find(".reset"),
$set: $section.find('.panzoom-elements > div'),
startTransform: 'scale(0)',
increment: 0.1,
minScale: 1,
maxScale: 2,
contain: 'invert'
}).panzoom('zoom');
})();
CSS:
.panzoom-elements {
width: 50%;
height: 400px;
}
.item {
position: absolute;
z-index: 10;
}
.item.item1 {
color: white;
background: black;
width:50px;
height:50px;
top: 300px;
left: 100px;
}
.item.item2 {
color: white;
background: black;
width:50px;
height:50px;
top: 200px;
left: 150px;
}
The other problem is that it also doesn't drag horizontally.
I've tried everything I can think of.

Part 1:
To fix your 'item' problem - try putting 'item' elements on one level with 'img' - I mean put them inside div class='panzoom'.
Works for me. ^ ^
<section id="inverted-contain">
<div class="panzoom-elements">
<div class="panzoom">
<div class="item item1">ITEM 1</div>
<div class="item item2">ITEM 2</div>
<img src="http://www.hdwallpapers.in/walls/enchanted_forest-wide.jpg">
</div>
</div>
<div class="buttons">
<button class="zoom-in">Zoom In</button>
<button class="zoom-out">Zoom Out</button>
<input type="range" class="zoom-range">
<button class="reset">Reset</button>
</div>
</section>
The method of thought that led me to this answer: while learning panzoom documentation for API, and examining your fiddle, I found that 'img' or anything that could be seen as direct selector to it (I mean like $('.panzoom').child().first() is nowhere mentioned in your script. That means that most probably img is zooming in/out not by itself. What I thought next - it seem that it's parent is changing. That would mean that you need to put your items inside of that changing space - it is the most logical way to handle it... I tried to test that idea - and it worked.
Part 2:
The other problem is that it also doesn't drag horizontally.
Add this to your CSS
.panzoom{ width: 1920px;}
This is the size of the image. Works for me.
Perhaps you also could add to .panzoom height of image. It is not required in your case where image is horisontal but it could matter when image is vertical.

Floating divs glitch on resize in Chrome and Edge

Does anyone know how to fix this problem. The only browser that works correctly is Firefox; in Chrome and Edge it doesn't work. When I resize the screen the box changes the position. Is there some solution?
Screenshot
HTML
<div class="box" style="background:#F00; height:200px;"></div>
<div class="box" style="background:#F0F; width:25%"></div>
<div class="box" style="background:#FF0; width:25%"></div>
<div class="box" style="background:#00F; width:25%"></div>
<div class="box" style="background:#55F; width:25%"></div>
CSS
.box {
width: 50%;
height: 100px;
float: left
}
JavaScript
$(window).resize(resize)
function resize() {
$(".box").each(function() {
$(this).height( $(this).width() * 0.5)
});
}
Here's the Codepen link:
http://codepen.io/Tufik/pen/rxyQmV
UPDATE---------
I modified the CodePen to show a more complex structure. The problem is when you resize the screen browser, the divs don't respect the correct position, some divs jump to the next line.
This is an old problem. I think it's because HTML is not pixel perfect. But I want to know if there is some easy solution different to use masonry.js or any plugins. Firefox work great, but Chrome or Edge not.

Problem: Unpredictable browser rounding of integers
Each browser calculates numbers differently. For widths and heights, the browser also rounds to the nearest integer for layout. So, the computed pixel-width of each floated box may have a different initial value after converting from percentage and filling out the container. Calculating on these numbers can lead to unpredictable results.
Here is an example of how the values are being calculated in your setup (resize the browser and watch the values change):
function resize() {
$(".box").each(function() {
var height = $(this).width() * 0.5;
$(this)
.height(height)
.html("<code>height: " + $(this).height() + "px (rounded from " + height + ")</code>");
});
}
$(window).resize(resize);
resize();
.box { float: left; }
.box-large {
width: 50%;
height: 200px;
}
.box-small {
width: 25%;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box box-large" style="background:#F00;"></div>
<div class="box box-small" style="background:#F0F;"></div>
<div class="box box-small" style="background:#FF0;"></div>
<div class="box box-small" style="background:#00F;"></div>
<div class="box box-small" style="background:#55F;"></div>
Solution: uniformly apply your own rounded integer
One way to solve this is to create your own new height value, round it to a whole integer and apply it uniformly to each box instead of applying the decimal value and relying on the browser to do the rounding. The best way to do this is to calculate the new height value from one box and apply it to the others, instead of doing a calculation on each.
Because you have two different sized boxes, we do this calculation twice: once for the large box and once for the small box. The calculated large height value gets applied to all large boxes (only one in this case) and the calculated small height value gets applied to all small boxes.
Example:
function resize() {
var $larges = $('.box-large'), // Get all large boxes
$lgFirst = $($larges.get(0)), // Get first large box
lgHeight = Math.floor( // Round down before the browser screws it up
$lgFirst.width() / 2 // Calculate new height
),
$smalls = $('.box-small'), // Get all small boxes
$smFirst = $($smalls.get(0)), // Get first small box
smHeight = Math.floor( // Round down before the browser screws it up
$smFirst.width() / 2 // Calculate new height
),
// Function returns a function to keep things DRY
setHeight = function(height) {
// This function is returned to the .each() call later
return function () {
$(this)
.height(height)
.html("<code>height: " + height + "px</code>");
}
};
// Set height of all large boxes to new large height
$larges.each(setHeight(lgHeight));
// Set height of all small boxes to new small height
$smalls.each(setHeight(smHeight));
}
$(window).resize(resize);
resize();
.box { float: left; }
.box-large {
width: 50%;
height: 200px;
}
.box-small {
width: 25%;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box box-large" style="background:#F00;"></div>
<div class="box box-small" style="background:#F0F;"></div>
<div class="box box-small" style="background:#FF0;"></div>
<div class="box box-small" style="background:#00F;"></div>
<div class="box box-small" style="background:#55F;"></div>

I'm not sure whether this answers your question, but I think css flex box is what you are looking for. you don't need javascript to do this.
The below code will align your divs all in one line and also provides responsiveness using flex box(Not exact layout you are looking but im sure you will be able to figure it out)
For more info please refer this article
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-direction: row;
height: 200px;
flex-grow: 1
}
.column {
display: flex;
flex-direction: column;
flex-grow: 1
}
.big {
flex-grow: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="column">
<div class="big" style="background:#F00;">
1
</div>
</div>
<div class="column">
<div class="big" style="background:#F0F;">
2
</div>
<div class="big" style="background:#00F;">
3
</div>
</div>
<div class="column">
<div class="big " style="background:#FF0; ">
4
</div>
<div class="big" style="background:#55F;">
5
</div>
</div>
</div>
</body>
</html>