overflow auto hover issue

overflow auto hover issue - css

I have a issue with overflow: auto; on child element. When i hover .wrapper class for divs its ruin divs' position. Check this out:
How can I deal with that? It will be great if the divs element would stay at the same place before hovering.
[http://codepen.io/anon/pen/WQQLMJ?editors=110][1]
<div class="parent">
<span class="close"></span>
<div class="wrapper">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti consequatur ipsum at temporibus veritatis soluta perspiciatis quisquam fugiat odit quibusdam nihil sapiente vero, reiciendis adipisci non reprehenderit aut similique deleniti repellendus doloremque esse. Officia, quam ullam atque iusto lorem80 accusantium vitae cumque earum incidunt quos voluptatum maxime ut, sunt mollitia. Sit impedit porro sunt beatae quae at, cupiditate ut, ipsa placeat maiores! Doloremque perspiciatis saepe animi iste numquam, consectetur rerum tempora minima, placeat asperiores harum explicabo necessitatibus delectus dolorem sit quidem.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium esse ab nesciunt ipsa, vitae repellendus consectetur aperiam illum. Consequatur, dicta officiis adipisci minus, et tenetur assumenda repudiandae id, possimus, blanditiis mollitia repellendus. Nihil id doloribus culpa consectetur molestias voluptates iure blanditiis, at iusto cupiditate natus voluptatibus deleniti ab reprehenderit cumque eveniet soluta dolor officia incidunt recusandae, omnis. Quam facilis ducimus fugiat, nemo magni fuga, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae minima facilis, placeat, rerum quidem, possimus maxime accusantium beatae explicabo incidunt quasi rem atque tempora adipisci! Cumque sit ut iure suscipit. dolorum, perferendis tempore quod tenetur sequi aut eveniet. In, eius nam consequatur ipsam consequuntur fugiat a.</div>
</div>
</div>

If you add width it works.
.wrapper {
overflow: hidden;
height: 100%;
width:465px;
&:hover {
overflow: auto;
width:482px;
}

Related

How to make image responsive in columns grid with TailwindCSS

I have an 8 columns grid, in which I want to distribute content, text and an image, as follows:
<div className="grid grid-cols-8 gap-4">
<div className="col-start-2 col-end-5">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad
tempora perferendis tenetur quia vitae blanditiis, excepturi quo
inventore. Molestias cum eaque natus sequi nisi ea, dolor atque
at? Fuga ipsa unde consectetur nobis consequatur tempore
asperiores, quos alias similique, rerum nemo illo qui quidem
accusantium molestiae voluptates deleniti praesentium sint?
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum
obcaecati accusamus quam eius doloremque. Error dignissimos modi
eveniet at. Voluptate, sed ea. Eius veniam odit voluptatem error
commodi amet repudiandae ut ab quos. Reiciendis officia placeat
harum nulla obcaecati magni accusantium dolorem architecto ullam,
ratione cumque distinctio consectetur esse deleniti.
</p>
</div>
<div className="col-start-6 col-end-8">
<img alt="dummy" src="https://via.placeholder.com/300x500" />
</div>
</div>
The code above produces this result on a 1200px screen:
And this one on an 800px screen:
How can I have the image responsive, and get its height adapt to the text content on the left, so the vertical side of the image always takes the height of the text regardless of screen-size?
Tailwind-play

If you can use flex this would be simplest of all in my opinion:
<div class="flex">
<div class="mr-8 w-8/12">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad tempora perferendis tenetur quia vitae blanditiis, excepturi quo inventore. Molestias cum eaque natus sequi nisi ea, dolor atque at? Fuga ipsa unde consectetur nobis consequatur tempore asperiores, quos alias similique, rerum nemo illo qui quidem accusantium molestiae voluptates deleniti praesentium sint?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum obcaecati accusamus quam eius doloremque. Error dignissimos modi eveniet at. Voluptate, sed ea. Eius veniam odit voluptatem error commodi amet repudiandae ut ab quos. Reiciendis officia placeat harum nulla obcaecati magni accusantium dolorem architecto ullam, ratione cumque distinctio consectetur esse deleniti.</p>
</div>
<div class="w-4/12 bg-cover bg-center" style="background-image:url(https://via.placeholder.com/300x500)"></div>
</div>
tailwind play
Note: Width uses standard 2, 3, 4, 5, 6, 12 columns there is no 8 columns

The easiest(I think) would just be to set the second column to have a background image instead of an image inside, such as:
<div class="grid grid-cols-8 gap-4">
<div class="col-start-2 col-end-5">
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad tempora perferendis tenetur quia vitae blanditiis,
excepturi quo inventore. Molestias cum eaque natus sequi nisi ea, dolor atque at? Fuga ipsa unde consectetur nobis
consequatur tempore asperiores, quos alias similique, rerum nemo illo qui quidem accusantium molestiae voluptates
deleniti praesentium sint? </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum obcaecati accusamus quam eius doloremque. Error
dignissimos modi eveniet at. Voluptate, sed ea. Eius veniam odit voluptatem error commodi amet repudiandae ut ab
quos. Reiciendis officia placeat harum nulla obcaecati magni accusantium dolorem architecto ullam, ratione cumque
distinctio consectetur esse deleniti. </p>
</div>
<div class="col-start-6 col-end-8 bg-center bg-cover" style="background-image:url(https://via.placeholder.com/300x500)"></div>
</div>

If you don't care about the aspect-ratio of the image then you can always use flex.
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
<div class="grid grid-cols-8 gap-4">
<div class="col-start-2 col-end-5">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad tempora perferendis tenetur quia vitae blanditiis, excepturi quo inventore. Molestias cum eaque natus sequi nisi ea, dolor atque at? Fuga ipsa unde consectetur nobis consequatur tempore asperiores, quos alias similique, rerum nemo illo qui quidem accusantium molestiae voluptates deleniti praesentium sint?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum obcaecati accusamus quam eius doloremque. Error dignissimos modi eveniet at. Voluptate, sed ea. Eius veniam odit voluptatem error commodi amet repudiandae ut ab quos. Reiciendis officia placeat harum nulla obcaecati magni accusantium dolorem architecto ullam, ratione cumque distinctio consectetur esse deleniti.</p>
</div>
<div class="flex col-start-6 col-end-8">
<img alt="dummy" className="" src="https://via.placeholder.com/300x500" />
</div>
</div>
Or if you do care about the aspect-ratio and don't care if the image gets cropped then you can set it as a background in the second div.
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
<div class="grid grid-cols-8 gap-4">
<div class="col-start-2 col-end-5">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad tempora perferendis tenetur quia vitae blanditiis, excepturi quo inventore. Molestias cum eaque natus sequi nisi ea, dolor atque at? Fuga ipsa unde consectetur nobis consequatur tempore asperiores, quos alias similique, rerum nemo illo qui quidem accusantium molestiae voluptates deleniti praesentium sint?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum obcaecati accusamus quam eius doloremque. Error dignissimos modi eveniet at. Voluptate, sed ea. Eius veniam odit voluptatem error commodi amet repudiandae ut ab quos. Reiciendis officia placeat harum nulla obcaecati magni accusantium dolorem architecto ullam, ratione cumque distinctio consectetur esse deleniti.</p>
</div>
<div class="flex col-start-6 col-end-8" style="background: url(https://via.placeholder.com/300x500)">
</div>
</div>

You can stretch the image to cover whole parent and then use object-fit to adjust clipping:
<img class="h-full w-full object-cover">
This will crop sides and show largest possible area, object-contain will show full image. No object-* or object-fill will deform it.
<script src="https://cdn.tailwindcss.com/"></script>
<div class="grid grid-cols-8 gap-4">
<div class="col-start-2 col-end-5">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad tempora perferendis tenetur quia vitae blanditiis, excepturi quo inventore. Molestias cum eaque natus sequi nisi ea, dolor atque at? Fuga ipsa unde consectetur nobis consequatur tempore asperiores,
quos alias similique, rerum nemo illo qui quidem accusantium molestiae voluptates deleniti praesentium sint?
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum obcaecati accusamus quam eius doloremque. Error dignissimos modi eveniet at. Voluptate, sed ea. Eius veniam odit voluptatem error commodi amet repudiandae ut ab quos. Reiciendis officia
placeat harum nulla obcaecati magni accusantium dolorem architecto ullam, ratione cumque distinctio consectetur esse deleniti.
</p>
</div>
<div class="relative col-start-6 col-end-8">
<img class="absolute h-full w-full object-cover" alt="dummy" src="https://via.placeholder.com/300x500" />
</div>
</div>

How to control the height of the parent box to apply transition?

I would like you to support me by guiding me with the possible solution to the following problem:
I require that the video when I scroll-And the video goes from 0% to 100% as the scroll is made, my problem is that when I do it the parent box is made to the size of the video, completely disappearing the content, here the example:
function scrollShowPic() {
const elementPic = document.getElementById("animationVideo")
document.addEventListener("scroll", e => {
if (scrollY <= "300") {
elementPic.style.width = "0%"
}
if (scrollY >= "400") {
elementPic.style.width = "10%"
}
if (scrollY >= "500") {
elementPic.style.width = "20%"
}
if (scrollY >= "600") {
elementPic.style.width = "30%"
}
if (scrollY >= "700") {
elementPic.style.width = "50%"
}
if (scrollY >= "800") {
elementPic.style.width = "70%"
}
if (scrollY >= "900") {
elementPic.style.width = "80%"
}
if (scrollY >= "1000") {
elementPic.style.width = "90%"
}
if (scrollY >= "1100") {
elementPic.style.width = "100%"
}
})
}
scrollShowPic()
.about-us {
height: 500px;
padding-top: 20px;
position: relative;
color: black;
border: 5px solid;
height: 100%;
}
.center {
padding: 15px 30px;
max-width: 1500px;
margin: auto;
border: 1px solid green;
}
video {
height: 100%;
width: 100%;
transition: all .5s ease-in;
border-top-right-radius: 88px;
}
.video {
border: 1px solid red;
overflow: hidden;
display: flex;
justify-content: flex-end;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dudas y prácticas</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat
consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam
obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed
commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis
molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet
at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum!
Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem
ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem
earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis
porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae
officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat
mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium
quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam,
maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque
cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus
aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam.
Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum
expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias
ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore,
nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae
voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus
alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam
aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae
vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente
quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt
ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae
hic sed commodi ducimus
</p>
<section class="about-us">
<div class="center">
<div class="video">
<video id="animationVideo" width="100%" height="100%" autoplay="autoplay" muted="muted" loop="loop" class="swipeleft" style="clip-path: polygon(0% 0px, 100% 0px, 100% 100%, 0% 100%);">
<source src="https://dev.jankelley.com/app/uploads/2022/01/JK_Homepage_2_675 x 546-1.mp4" type="video/mp4">
<source src="https://dev.jankelley.com/app/uploads/2022/01/JK_Homepage_2_675 x 546.ogv" type="video/webm">
<source src="https://dev.jankelley.com/app/uploads/2022/01/JK_Homepage_2_675 x 546.webm" type="video/ogv">
Sorry, your browser doesn't support embedded videos.
</video>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat
consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam
obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed
commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis
molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet
at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum!
Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem
ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem
earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis
porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae
officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat
mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium
quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam,
maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque
cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus
aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam.
Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum
expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias
ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimusLorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore,
nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae
voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus
alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam
aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae
vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente
quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt
ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae
hic sed commodi ducimus
</section>
<script src="js.js"></script>
</body>
</html>
Now I wanted to place the father with a certain height but at the high resolution, I don't like how it looks so I have to find a solution on how to make the video not have that behavior I really hope you can guide me thank you very much.
here I leave the page that I want to clone enter link description here

Actually, they are using polygon instead of width, and check the element in view instead of scroll position
function getViewPercentage(element) {
const viewport = {
top: window.pageYOffset,
bottom: window.pageYOffset + window.innerHeight
};
const elementBoundingRect = element.getBoundingClientRect();
const elementPos = {
top: elementBoundingRect.y + window.pageYOffset,
bottom: elementBoundingRect.y + elementBoundingRect.height + window.pageYOffset
};
if (viewport.top > elementPos.bottom || viewport.bottom < elementPos.top) {
return 0;
}
// Element is fully within viewport
if (viewport.top < elementPos.top && viewport.bottom > elementPos.bottom) {
return 100;
}
// Element is bigger than the viewport
if (elementPos.top < viewport.top && elementPos.bottom > viewport.bottom) {
return 100;
}
const elementHeight = elementBoundingRect.height;
let elementHeightInView = elementHeight;
if (elementPos.top < viewport.top) {
elementHeightInView = elementHeight - (window.pageYOffset - elementPos.top);
}
if (elementPos.bottom > viewport.bottom) {
elementHeightInView = elementHeightInView - (elementPos.bottom - viewport.bottom);
}
const percentageInView = (elementHeightInView / window.innerHeight) * 100;
return Math.round(percentageInView);
}
function scrollShowPic(){
const elementPic= document.getElementById("animationVideo")
document.addEventListener("scroll", e=>{
const percent = getViewPercentage(elementPic)
const polygonPercent = 100 - percent > 0 ? 100 - percent : 0
console.log(polygonPercent)
elementPic.style.clipPath= `polygon(${polygonPercent}% 0px, 100% 0px, 100% 100%, ${polygonPercent}% 100%)`
})
}
scrollShowPic()
.about-us {
height: 500px;
padding-top: 20px;
position: relative;
color: black;
border: 5px solid;
height: 100%;
}
.center {
padding: 15px 30px;
max-width: 1500px;
margin: auto;
border: 1px solid green;
}
video {
height: 100%;
width: 100%;
transition: all .5s ease-in;
border-top-right-radius: 88px;
}
.video {
border: 1px solid red;
overflow: hidden;
display: flex;
justify-content: flex-end;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dudas y prácticas</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat
consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam
obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed
commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis
molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet
at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum!
Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem
ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem
earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis
porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae
officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat
mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium
quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam,
maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque
cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus
aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam.
Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum
expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias
ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore,
nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae
voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus
alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam
aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae
vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente
quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt
ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae
hic sed commodi ducimus
</p>
<section class="about-us">
<div class="center">
<div class="video">
<video id="animationVideo" width="100%" height="100%" autoplay="autoplay" muted="muted" loop="loop" class="swipeleft" style="clip-path: polygon(0% 0px, 100% 0px, 100% 100%, 0% 100%);">
<source src="https://dev.jankelley.com/app/uploads/2022/01/JK_Homepage_2_675 x 546-1.mp4" type="video/mp4">
<source src="https://dev.jankelley.com/app/uploads/2022/01/JK_Homepage_2_675 x 546.ogv" type="video/webm">
<source src="https://dev.jankelley.com/app/uploads/2022/01/JK_Homepage_2_675 x 546.webm" type="video/ogv">
Sorry, your browser doesn't support embedded videos.
</video>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat
consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam
obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed
commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis
molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet
at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum!
Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem
ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem
earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis
porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit.
</section>
<script src="js.js"></script>
</body>
</html>

how to use css flex box and css grid instead of float and absolute positions as described?

This code below is using float to adjust image beside content.
how could i have the same result not using float or positions but only css grid or/and flex-box?(aiming to implement the picture below which red section is just one div and yellow could be an image beside the red not over-lapping it)
img {
float: left;
}
span {
background-color: tomato;
}
<div>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos excepturi in modi nam nesciunt omnis quisquam, sed voluptates. Aspernatur at ea, explicabo facere illo iusto maiores nisi optio placeat quaerat quas quia ullam velit. Consequuntur culpa inventore saepe unde. Adipisci alias aspernatur blanditiis commodi consequuntur debitis dolorum ea eaque eos, est fugit ipsam iure, laudantium magni minima minus molestias mollitia neque officia pariatur perferendis quam quia quis reprehenderit sint tempore temporibus voluptatibus. Eos expedita nisi nobis quos reiciendis saepe tempora vero voluptas. Consequatur deleniti ea error Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet ex incidunt maiores molestiae nulla optio ratione rerum, sed voluptatem. Dolorum, earum, ipsa? Animi dolore doloremque eos, inventore ipsum itaque nobis nulla porro, qui rem repellendus reprehenderit saepe sapiente tenetur totam vel, velit voluptatibus. Amet ducimus earum fuga fugit labore, magnam nemo optio praesentium quidem repellendus sit veniam veritatis. Ab accusamus culpa cum cumque, dicta dolore doloremque earum esse eveniet facilis iure iusto laboriosam maxime nihil possimus provident quaerat, quam quas quia quod repellat, repellendus repudiandae rerum Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab alias asperiores consectetur consequatur debitis dolore esse est eveniet illum laboriosam libero magni, molestias mollitia nemo nulla numquam odio perspiciatis quis similique temporibus vero vitae voluptates? Aliquid aperiam aut deleniti dignissimos incidunt necessitatibus perferendis velit. Accusantium animi aperiam architecto aspernatur atque consequuntur distinctio dolor dolorem ea eius esse et harum illum impedit in incidunt ipsam ipsum iste libero magnam neque perspiciatis porro qui, reprehenderit soluta tempore veniam vitae. Cupiditate ea eligendi fugiat officiis perferendis provident repellendus sit, sunt velit voluptatem! Asperiores consequatur deserunt inventore, minus molestias neque similique velit voluptates?sapiente sit tempore tenetur ullam ut vel voluptate. Doloribus eveniet facilis ipsam tenetur voluptatem. eum ipsum maxime minus, officia omnis optio praesentium quisquam ratione, recusandae rerum sunt tempore!</span>
</div>
Visual example of the question

You could do something like this. I've used approximations for the size of the div's just from what I see in your problem. But the end result is the same I suppose
.main{
display:flex;
background-color : red;
height:100vh;
}
.main div{
display:flex;
align-items: center;
}
p, span{
padding: 10px;
}
.main div:nth-child(1){
flex: 1;
height:50%;
background-color: yellow;
}
.main div:nth-child(2){
flex: 2;
height:50%;
}
<div class="main">
<div>
<p>Section 1</p>
</div>
<div>
<span>Section 2</span>
</div>
</div>

Hope this answer will helpful for you.
.flex_box {
display: flex;
justify-content: space-between;
}
.flex_box img {
width: 50%;
object-fit: contain;
}
.flex_box p {
width: 50%;
background-color: tomato;
color: #ffffff;
padding: 20px;
text-align: justify;
}
<div class="flex_box">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos excepturi in modi nam nesciunt omnis quisquam, sed voluptates. Aspernatur at ea, explicabo facere illo iusto maiores nisi optio placeat quaerat quas quia ullam velit. Consequuntur culpa inventore saepe unde. Adipisci alias aspernatur blanditiis commodi consequuntur debitis dolorum ea eaque eos, est fugit ipsam iure, laudantium magni minima minus molestias mollitia neque officia pariatur perferendis quam quia quis reprehenderit sint tempore temporibus voluptatibus. Eos expedita nisi nobis quos reiciendis saepe tempora vero voluptas. Consequatur deleniti ea error Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet ex incidunt maiores molestiae nulla optio ratione rerum, sed voluptatem. Dolorum, earum, ipsa? Animi dolore doloremque eos, inventore ipsum itaque nobis nulla porro, qui rem repellendus reprehenderit saepe sapiente tenetur totam vel, velit voluptatibus. Amet ducimus earum fuga fugit labore, magnam nemo optio praesentium quidem repellendus sit veniam veritatis. Ab accusamus culpa cum cumque, dicta dolore doloremque earum esse eveniet facilis iure iusto laboriosam maxime nihil possimus provident quaerat, quam quas quia quod repellat, repellendus repudiandae rerum Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab alias asperiores consectetur consequatur debitis dolore esse est eveniet illum laboriosam libero magni, molestias mollitia nemo nulla numquam odio perspiciatis quis similique temporibus vero vitae voluptates? Aliquid aperiam aut deleniti dignissimos incidunt necessitatibus perferendis velit. Accusantium animi aperiam architecto aspernatur atque consequuntur distinctio dolor dolorem ea eius esse et harum illum impedit in incidunt ipsam ipsum iste libero magnam neque perspiciatis porro qui, reprehenderit soluta tempore veniam vitae. Cupiditate ea eligendi fugiat officiis perferendis provident repellendus sit, sunt velit voluptatem! Asperiores consequatur deserunt inventore, minus molestias neque similique velit voluptates? sapiente sit tempore tenetur ullam ut vel voluptate. Doloribus eveniet facilis ipsam tenetur voluptatem. eum ipsum maxime minus, officia omnis optio praesentium quisquam ratione, recusandae rerum sunt tempore!</p>
</div>

How can I scale down the image through css?

I would like to show every part of the sculpture. I'm trying to add a Parallax effect on the page.
body,
html {
height: 100%;
margin: 0;
font-size: 16px;
font-family: "Lato", sans-serif;
font-weight: 1.8em;
color: #666;
}
.fox {
background-image: url('https://images.squarespace-cdn.com/content/v1/533b3eaae4b0ac273368560e/1593808903170-L72NFRC5HVJ7ZV4YPSKN/ke17ZwdGBToddI8pDm48kHUZU1VQuKQ0i9seXnqxeZ17gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0luj0xCD0oh5KMc0gpox0u97MBNGrB-WlK2RJDlX919z6LRrKc4j6gnP5EoAvI0pyA/scu_010_Untitled%28Fox%29.jpg?format=1000w');
min-height: 100%;
background-size: cover;
position: relative;
background-position: center;
background-repeat: repeat;
background-attachment: fixed;
}
<body>
<div class="fox">
<div class="text-fox">
</div>
</div>
<section class="section section-light">
<h2>Section one</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus corporis, porro amet animi incidunt id provident deserunt fuga iure soluta sed quisquam molestiae quae ea, doloribus, ut distinctio, voluptates. Aut molestiae magnam, rerum quos deleniti
laboriosam, autem natus nulla ab at dolores. Ullam molestias et libero excepturi ratione, amet itaque aliquid aut architecto dolores unde, vitae porro voluptatem laudantium reiciendis nostrum maiores nesciunt neque beatae. Adipisci amet consectetur,
sed nam totam omnis, dignissimos ipsam dolorum, odit pariatur eaque aliquid veniam saepe numquam molestiae! Fuga asperiores, omnis, esse distinctio laborum nisi exercitationem incidunt nostrum, suscipit nesciunt pariatur ullam corporis, reprehenderit
mollitia.
</p>
</section>
<section class="section section-light">
<h2>Section one</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus corporis, porro amet animi incidunt id provident deserunt fuga iure soluta sed quisquam molestiae quae ea, doloribus, ut distinctio, voluptates. Aut molestiae magnam, rerum quos deleniti
laboriosam, autem natus nulla ab at dolores. Ullam molestias et libero excepturi ratione, amet itaque aliquid aut architecto dolores unde, vitae porro voluptatem laudantium reiciendis nostrum maiores nesciunt neque beatae. Adipisci amet consectetur,
sed nam totam omnis, dignissimos ipsam dolorum, odit pariatur eaque aliquid veniam saepe numquam molestiae! Fuga asperiores, omnis, esse distinctio laborum nisi exercitationem incidunt nostrum, suscipit nesciunt pariatur ullam corporis, reprehenderit
mollitia.
</p>
</section>
<section class="section section-light">
<h2>Section one</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus corporis, porro amet animi incidunt id provident deserunt fuga iure soluta sed quisquam molestiae quae ea, doloribus, ut distinctio, voluptates. Aut molestiae magnam, rerum quos deleniti
laboriosam, autem natus nulla ab at dolores. Ullam molestias et libero excepturi ratione, amet itaque aliquid aut architecto dolores unde, vitae porro voluptatem laudantium reiciendis nostrum maiores nesciunt neque beatae. Adipisci amet consectetur,
sed nam totam omnis, dignissimos ipsam dolorum, odit pariatur eaque aliquid veniam saepe numquam molestiae! Fuga asperiores, omnis, esse distinctio laborum nisi exercitationem incidunt nostrum, suscipit nesciunt pariatur ullam corporis, reprehenderit
mollitia.
</p>
</section>

Use background-size:auto 100%
body,
html {
height: 100%;
margin: 0;
font-size: 16px;
font-family: "Lato", sans-serif;
font-weight: 1.8em;
color: #666;
}
.fox {
background-image: url('https://images.squarespace-cdn.com/content/v1/533b3eaae4b0ac273368560e/1593808903170-L72NFRC5HVJ7ZV4YPSKN/ke17ZwdGBToddI8pDm48kHUZU1VQuKQ0i9seXnqxeZ17gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0luj0xCD0oh5KMc0gpox0u97MBNGrB-WlK2RJDlX919z6LRrKc4j6gnP5EoAvI0pyA/scu_010_Untitled%28Fox%29.jpg?format=1000w');
min-height: 100%;
background-size: auto 100%;
position: relative;
background-position: center;
background-repeat: repeat;
background-attachment: fixed;
}
<body>
<div class="fox">
<div class="text-fox">
</div>
</div>
<section class="section section-light">
<h2>Section one</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus corporis, porro amet animi incidunt id provident deserunt fuga iure soluta sed quisquam molestiae quae ea, doloribus, ut distinctio, voluptates. Aut molestiae magnam, rerum quos deleniti
laboriosam, autem natus nulla ab at dolores. Ullam molestias et libero excepturi ratione, amet itaque aliquid aut architecto dolores unde, vitae porro voluptatem laudantium reiciendis nostrum maiores nesciunt neque beatae. Adipisci amet consectetur,
sed nam totam omnis, dignissimos ipsam dolorum, odit pariatur eaque aliquid veniam saepe numquam molestiae! Fuga asperiores, omnis, esse distinctio laborum nisi exercitationem incidunt nostrum, suscipit nesciunt pariatur ullam corporis, reprehenderit
mollitia.
</p>
</section>
<section class="section section-light">
<h2>Section one</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus corporis, porro amet animi incidunt id provident deserunt fuga iure soluta sed quisquam molestiae quae ea, doloribus, ut distinctio, voluptates. Aut molestiae magnam, rerum quos deleniti
laboriosam, autem natus nulla ab at dolores. Ullam molestias et libero excepturi ratione, amet itaque aliquid aut architecto dolores unde, vitae porro voluptatem laudantium reiciendis nostrum maiores nesciunt neque beatae. Adipisci amet consectetur,
sed nam totam omnis, dignissimos ipsam dolorum, odit pariatur eaque aliquid veniam saepe numquam molestiae! Fuga asperiores, omnis, esse distinctio laborum nisi exercitationem incidunt nostrum, suscipit nesciunt pariatur ullam corporis, reprehenderit
mollitia.
</p>
</section>
<section class="section section-light">
<h2>Section one</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus corporis, porro amet animi incidunt id provident deserunt fuga iure soluta sed quisquam molestiae quae ea, doloribus, ut distinctio, voluptates. Aut molestiae magnam, rerum quos deleniti
laboriosam, autem natus nulla ab at dolores. Ullam molestias et libero excepturi ratione, amet itaque aliquid aut architecto dolores unde, vitae porro voluptatem laudantium reiciendis nostrum maiores nesciunt neque beatae. Adipisci amet consectetur,
sed nam totam omnis, dignissimos ipsam dolorum, odit pariatur eaque aliquid veniam saepe numquam molestiae! Fuga asperiores, omnis, esse distinctio laborum nisi exercitationem incidunt nostrum, suscipit nesciunt pariatur ullam corporis, reprehenderit
mollitia.
</p>
</section>
or contain
body,
html {
height: 100%;
margin: 0;
font-size: 16px;
font-family: "Lato", sans-serif;
font-weight: 1.8em;
color: #666;
}
.fox {
background-image: url('https://images.squarespace-cdn.com/content/v1/533b3eaae4b0ac273368560e/1593808903170-L72NFRC5HVJ7ZV4YPSKN/ke17ZwdGBToddI8pDm48kHUZU1VQuKQ0i9seXnqxeZ17gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0luj0xCD0oh5KMc0gpox0u97MBNGrB-WlK2RJDlX919z6LRrKc4j6gnP5EoAvI0pyA/scu_010_Untitled%28Fox%29.jpg?format=1000w');
min-height: 100%;
background-size: contain;
position: relative;
background-position: center;
background-repeat: repeat;
background-attachment: fixed;
}
<body>
<div class="fox">
<div class="text-fox">
</div>
</div>
<section class="section section-light">
<h2>Section one</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus corporis, porro amet animi incidunt id provident deserunt fuga iure soluta sed quisquam molestiae quae ea, doloribus, ut distinctio, voluptates. Aut molestiae magnam, rerum quos deleniti
laboriosam, autem natus nulla ab at dolores. Ullam molestias et libero excepturi ratione, amet itaque aliquid aut architecto dolores unde, vitae porro voluptatem laudantium reiciendis nostrum maiores nesciunt neque beatae. Adipisci amet consectetur,
sed nam totam omnis, dignissimos ipsam dolorum, odit pariatur eaque aliquid veniam saepe numquam molestiae! Fuga asperiores, omnis, esse distinctio laborum nisi exercitationem incidunt nostrum, suscipit nesciunt pariatur ullam corporis, reprehenderit
mollitia.
</p>
</section>
<section class="section section-light">
<h2>Section one</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus corporis, porro amet animi incidunt id provident deserunt fuga iure soluta sed quisquam molestiae quae ea, doloribus, ut distinctio, voluptates. Aut molestiae magnam, rerum quos deleniti
laboriosam, autem natus nulla ab at dolores. Ullam molestias et libero excepturi ratione, amet itaque aliquid aut architecto dolores unde, vitae porro voluptatem laudantium reiciendis nostrum maiores nesciunt neque beatae. Adipisci amet consectetur,
sed nam totam omnis, dignissimos ipsam dolorum, odit pariatur eaque aliquid veniam saepe numquam molestiae! Fuga asperiores, omnis, esse distinctio laborum nisi exercitationem incidunt nostrum, suscipit nesciunt pariatur ullam corporis, reprehenderit
mollitia.
</p>
</section>
<section class="section section-light">
<h2>Section one</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus corporis, porro amet animi incidunt id provident deserunt fuga iure soluta sed quisquam molestiae quae ea, doloribus, ut distinctio, voluptates. Aut molestiae magnam, rerum quos deleniti
laboriosam, autem natus nulla ab at dolores. Ullam molestias et libero excepturi ratione, amet itaque aliquid aut architecto dolores unde, vitae porro voluptatem laudantium reiciendis nostrum maiores nesciunt neque beatae. Adipisci amet consectetur,
sed nam totam omnis, dignissimos ipsam dolorum, odit pariatur eaque aliquid veniam saepe numquam molestiae! Fuga asperiores, omnis, esse distinctio laborum nisi exercitationem incidunt nostrum, suscipit nesciunt pariatur ullam corporis, reprehenderit
mollitia.
</p>
</section>

https://redstapler.co/css-parallax-scrolling-effect/
found this that does pretty much what your asking to do?
you can simply change height like that
.parallax-wrapper {
width: 100vw;
height:100vh;

css columns content cut off bug in chrome

When using css columns in Chrome (version 66 on mac), a bit of the content at the bottom of the previous column is cut off and shown at the top of the next column.
It only happens when line-height is set to a number lower than the default. It's the bottom parts (descender) of letters such as p and g.
It's hard to see with default browser fonts, but with some other fonts it becomes more visible and more of a problem.
Here's an image illustrating the problem:
.columns {
column-count: 2;
line-height: 1;
}
<div class="columns">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod optio magnam adipisci perspiciatis amet reiciendis? Velit harum nemo voluptatem sint saepe necessitatibus obcaecati vel eos in fugit hic ipsa accusamus assumenda qui illum, soluta consectetur
sequi iusto non consequatur doloremque repellendus optio alias. Ea quasi, temporibus architecto rem doloremque unde.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, quisquam id eum, earum vel fugit harum ad commodi tenetur tempore unde accusantium reprehenderit qui fuga sint libero dolorum hic dolore sit quaerat quasi ducimus nam laborum optio. Distinctio
magni beatae ipsum, corporis, sapiente porro quia quibusdam debitis libero at alias nihil eligendi.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nobis dolor quae obcaecati adipisci doloremque officiis debitis unde laudantium ipsum provident, odit excepturi quaerat aperiam dicta aliquid voluptas! Laboriosam, quia facere voluptatum beatae
enim cum ipsa nam, harum eligendi obcaecati optio nostrum architecto, minima quod ducimus consequatur ea voluptate soluta. Repellat.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Itaque velit modi doloribus aut, ipsum assumenda autem ex vel deserunt odio enim nam quasi! Itaque totam ab dignissimos, perferendis sint est repellendus debitis animi sunt odit nesciunt soluta
deserunt labore quidem perspiciatis a culpa nemo exercitationem repudiandae, commodi maxime. Sapiente, perspiciatis ad?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem architecto itaque deserunt in ipsa veniam minima et aliquam, veritatis laboriosam, qui exercitationem eos earum dolorum. Voluptatem maxime possimus architecto non id impedit rem eius
autem nulla illum ut ex doloremque deleniti suscipit nisi natus, culpa quis laboriosam. Repellat odio sit quaerat eligendi.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error aperiam repellat eligendi consequuntur temporibus, ipsum quidem animi officiis similique deleniti aut sapiente, blanditiis officia, exercitationem odio laboriosam cumque explicabo facere
voluptates. Facere nam accusamus maxime maiores voluptatum, est debitis error architecto nobis id ipsa? Nisi aspernatur itaque corrupti qui esse.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam, ratione consequatur laborum libero sapiente minus eaque nisi molestiae! Voluptate quas tenetur illum aut explicabo. Harum repudiandae, doloribus voluptatum consectetur numquam mollitia
placeat sed, assumenda repellat velit non maxime eos ipsum nam ratione. Amet tempora similique odit iusto, facere deserunt eius recusandae officiis impedit explicabo et?</p>
</div>

Develop Reference

r css asp.net wordpress firebase qt symfony nginx http apache-flex