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>
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>
I am using float to make text wrapped image. However, there is an unexpected margin at the bottom of the floated images. Is there any solution to fix the situation?
p{
font-size: 16px;
}
img{
float: left;
margin: 18px 18px 18px 0;
}
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur suscipit debitis labore illo quod aut itaque id laudantium. Amet, magnam aliquam recusandae fugit sint quidem eveniet tenetur quasi voluptatum? Debitis officia dolores exercitationem, consequuntur quia ipsum obcaecati praesentium! Sit totam ipsam culpa, ipsa odit officiis voluptates dolorem asperiores veritatis quibusdam, libero voluptas modi provident dignissimos necessitatibus eum quaerat temporibus reiciendis expedita aliquid recusandae fugit. Esse sunt, nulla sint exercitationem quae, ad magnam laudantium quibusdam voluptatibus quia, voluptas corporis! Ab ad amet at corrupti atque voluptatum omnis cumque iure consequatur quia quaerat nemo, impedit, provident distinctio blanditiis quo exercitationem dolorum eos!
<img src="https://placeimg.com/420/320/any">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Distinctio cupiditate iusto molestiae expedita nesciunt? Ducimus earum perspiciatis quam a incidunt nemo exercitationem id itaque reiciendis? Error tempore eligendi, voluptatem incidunt perspiciatis aspernatur, unde cupiditate in, enim ullam culpa? Et debitis ipsa nobis amet ea perspiciatis temporibus qui quos dolores totam, voluptatem impedit fugiat facere accusamus illo, voluptatibus inventore autem, libero provident enim eius. Expedita modi deleniti consequuntur deserunt quas praesentium incidunt doloremque quos voluptas accusamus nihil alias labore architecto cum, atque, dolores nisi dolorem perspiciatis quibusdam autem, neque magni quo! Maiores, nam, rerum ad ipsa libero consectetur quis reprehenderit facilis vel impedit optio rem cupiditate necessitatibus qui deserunt est repellendus molestiae nobis quisquam alias id!
</p>
Change you're margin to margin: 18px 18px 0px 0px;
It margins and paddings with 4 arguments go: top, right, bottom, left. so you were adding the 18px in the third argument
The margin is in fact an additional line of text.
You should change the line-height to fit the wanted margin. Try :
p{
line-height:18x;
font-size: 16px;
}
img{
float: left;
margin: 18px 18px 18px 0;
}
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur suscipit debitis labore illo quod aut itaque id laudantium. Amet, magnam aliquam recusandae fugit sint quidem eveniet tenetur quasi voluptatum? Debitis officia dolores exercitationem, consequuntur quia ipsum obcaecati praesentium! Sit totam ipsam culpa, ipsa odit officiis voluptates dolorem asperiores veritatis quibusdam, libero voluptas modi provident dignissimos necessitatibus eum quaerat temporibus reiciendis expedita aliquid recusandae fugit. Esse sunt, nulla sint exercitationem quae, ad magnam laudantium quibusdam voluptatibus quia, voluptas corporis! Ab ad amet at corrupti atque voluptatum omnis cumque iure consequatur quia quaerat nemo, impedit, provident distinctio blanditiis quo exercitationem dolorum eos!
<img src="https://placeimg.com/420/320/any">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Distinctio cupiditate iusto molestiae expedita nesciunt? Ducimus earum perspiciatis quam a incidunt nemo exercitationem id itaque reiciendis? Error tempore eligendi, voluptatem incidunt perspiciatis aspernatur, unde cupiditate in, enim ullam culpa? Et debitis ipsa nobis amet ea perspiciatis temporibus qui quos dolores totam, voluptatem impedit fugiat facere accusamus illo, voluptatibus inventore autem, libero provident enim eius. Expedita modi deleniti consequuntur deserunt quas praesentium incidunt doloremque quos voluptas accusamus nihil alias labore architecto cum, atque, dolores nisi dolorem perspiciatis quibusdam autem, neque magni quo! Maiores, nam, rerum ad ipsa libero consectetur quis reprehenderit facilis vel impedit optio rem cupiditate necessitatibus qui deserunt est repellendus molestiae nobis quisquam alias id!
</p>