CODEWITHSUNDEEP
javascripthtmlcss
AxiomOfTruth
AxiomOfTruth

Reputation: 315

Stop Paragraph from Passing A Certain Point in CSS

Currently, I am working on a website which includes JavaScript Animations . The image in the first part of the page should be responsive, which currently works as intended, but I want to keep the paragraph of the next section to stay in a certain place/not pass a certain place.

I have tried to use the overflow function in CSS, but it lets the text of the paragraph to pass the point.

enter image description here

The above image shows the paragraph text. I do not want it to pass into the black. How would I go about doing this (new to html,css and js). Note the JavaScript is using TweenMax.

Demo here: https://jsfiddle.net/AshS123/w0k8mjys/2/

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <link rel="stylesheet" href="css/styles.css" />
        <link href="https://fonts.googleapis.com/css2?family=Lora&display=swap" rel="stylesheet">
        <title>Homepage</title>
    </head>
<body>
    
        
    <header>
        <nav>
            
         
        </nav>
        <div id="container">
            
         
        <section>
            <div class="backgroundimage">
                <img src="https://images.unsplash.com/photo-1483651842966-0a111943c528?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="background">
                <h1 class="headline">Lorem Ipsum</h1>
            </div>
         </section>

        </header>
        
        <div class="slider"></div>
        <div class="about">
            <h2 class="aboutme"> ABOUT</h2>
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        </div>
        
        
         </div>
        
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js" integrity="sha512-8Wy4KH0O+AuzjMm1w5QfZ5j5/y8Q/kcUktK9mPUVaUoBvh3QPUZB822W/vy7ULqri3yR8daH3F58+Y8Z08qzeg==" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineMax.min.js" integrity="sha512-lJDBw/vKlGO8aIZB8/6CY4lV+EMAL3qzViHid6wXjH/uDrqUl+uvfCROHXAEL0T/bgdAQHSuE68vRlcFHUdrUw==" crossorigin="anonymous"></script>
    <script src="js/app.js"></script>
    
    </body>




</html>

CSS:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
   
    
}

.slider{
    flex: 0 1 auto;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background:black;
    z-index: -1;
    max-width: 100%;
    min-width: 350px;
    min-height: 900px;    
    }

nav {
    display: grid;
    grid-template-columns: 10% 1fr 1fr 10%;
    min-height: 10vh;
    color: white;
    max-width: 100vw;
    
}
#Logo{
grid-column: 2/3;
    font-size: 14px;
}


section {
    display: flex;
    height: auto;
    width: auto;
    max-height: 80vh;
    max-width: 80vw;
    min-height: 75vh;
    min-width: 75vw;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
     
}
.backgroundimage {
    height: 80%;
    width:100%;
    position:relative;
    min-width: 200px;
    
}  
.backgroundimage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-width: 200px;

    
    
}
.headline {
    position:absolute;
    top: 80%;
    left:10%;
    font-size: 7vw;
    transform: translate(-20%, -70%);
    color: pink;
    z-index:5;
    
    

}
.backgroundimage::after{
    content: "";
    background: black;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    opacity: 0.6;
    top: 0;
}

#container {
    max-height: 95vh;
    max-width: 100%;
    
    
    }
.about.lead{
    text-align: center;
    padding-left: 13rem;
    padding-left: 11rem;
    padding-left: 10vw;
    padding-right: 10vw;
    z-index: -2;

}
p.lead {
    font-family: "Lora", serif;
    font-size:calc(10px + 1.2vw);
    line-height: 1.8;
    color: #888888;
    text-align: center;
    margin-left: 25vw;
   margin-right: 25vw;
  
   overflow:hidden;
   z-index: -2;
   

   
}
.about {
    height: 100%;
    
    margin-top: 30vh;
    max-height: 80vh;
    max-width: 100%;
    text-align: center;
    overflow:hidden;
    width: auto;
    height: 500px;
    z-index: -10;

}

h2 {
    font-family: "Lora", serif; 
    text-decoration: bold;
    color: rgb(255, 42, 95);
    margin-right: -30px;
    margin-left: -30px;
}
.lead {
    min-height: 150px;
    font-size: min(1em, 12px);
}

JavaScript:

const backgroundimage = document.querySelector(".backgroundimage");
const slider = document.querySelector(".slider");
const headline = document.querySelector(".headline");

const tl = new TimelineMax();

tl.fromTo
(backgroundimage, 
0.8, {height: "0%"},
{ height: "80%", ease: Power2.easeInOut})

.fromTo
(backgroundimage,
0.8, {width: '100%'}, {width: '80%', ease: Power2.easeInOut})

.fromTo(
    slider,
    0.8,
    { x: "-100%" },
    { x: "0%", ease:Power2.easeInOut },
    "=0.8"
);

Upvotes: 1

Views: 737

Answers (1)

Miloš Miljković
Miloš Miljković

Reputation: 497

You should remove the min-height: 900px rule from the .slider element, since on smaller heights it forces the height of the slider (which is the black background) to be bigger that the height of the header container, so it overlaps with the paragraph below.

Upvotes: 2

Related Questions