Fixed half of the page with text coming up and carousel on the other side

user_19403308 0
Viewed 32

I want to have a section of the website which is fixed while to slide kind of a carousel on scroll (vertically). Once you are at the last slide the scroll will let you continue on the page instead of changing the slide of the carousel.

Similar to the Creative strategy page on the following website: https://www.petitmoulinstudio.com/#comp-kmkqr752

Any pointer on where to start and what to look at? I am using React, HTML, CSS

reactjs css html javascript
1 Answers

I have recoded the exact website once before. This design can be done without any use of JavaScript. Mainly with clever position:sticky; div elements.
Here is a quick image to demonstrate how to achieve this: enter image description here

To elaborate more, you're going to need <section> elements that have their height set to 100vh (to be responsive). Inside those sections you can use either flex or grid. Structure will be something like this:

<section style="height:100vh position:sticky  top:0">

  <div class="left-big-box" style="flex direction-column">

    <div class="top_of_left-big-box">
      <h2 style="margin-top: x; (x = i*30px where i is the index of element starting from 0 for first elem)">Title to be overlapped</h2>
    </div>

    <div class="bot_of_left-big-box" style="background:black (so that the text overlapped will be not visible)">
      <p>• asdasd<br> • asdasd <br> • asdasd</p>
    </div>

  </div>

  <div class="right-img-box">
    <img>
  </div>

</section>

Working Example (Not-Responsive / see "full page")

html,body {margin:0;padding:0;}

#uv_home_services {background: linear-gradient(90deg, #000 50%, #252525 50%);position: relative;top: 0;z-index: 1;}
.service-card {display: grid;grid-template-columns: 1fr 1fr;height: 100vh;position: sticky;top: 0;}
.service-card .info {display: grid;grid-template-rows: 3fr 2fr;text-align: right;padding: 0 2.5rem;}
.service-card .info h3 {color: #fff;font-size: 3rem;margin:4rem 0 0;}
.service-card:nth-child(2) .info h3 {margin:8rem 0 0;}
.service-card:nth-child(3) .info h3 {margin:12rem 0 0;}
.service-card:nth-child(4) .info h3 {margin:16rem 0 0;}
.service-card:nth-child(5) .info h3 {margin:20rem 0 0;}
.service-card:nth-child(6) .info h3 {margin:24rem 0 0;}
.service-card .info .text {max-width: 500px;width: 100%;justify-self: end;display: grid;height: 100%;color: #fff;align-content: end;background: linear-gradient(0deg, #000 50%, #0000);}
.service-card .info .text p {font-size: 1.5rem;margin-bottom: 4rem;}
#uv_home_services .service-card .photo {background-size: cover;}
.service-card:nth-child(1) .photo, .service-card:nth-child(2) .photo,
.service-card:nth-child(3) .photo, .service-card:nth-child(4) .photo,
.service-card:nth-child(5) .photo, .service-card:nth-child(6) .photo {background: url('https://via.placeholder.com/150x150');}
<section id="uv_home_services">
  <div class="container vertical-bar">
    <div class="service-card">
      <div class="info">
        <h3>Branding &amp; Design</h3>
        <div class="text">
          <p>
            LOGO DESIGN<br> PACKAGE DESIGN<br> COMPANY PROFILE<br> AD &amp; BANNER DESIGN
          </p>
        </div>
      </div>
      <div class="photo"></div>
    </div>
    <div class="service-card">
      <div class="info">
        <h3>Web Design</h3>
        <div class="text">
          <p>
            HOSTING PLANS<br> CUSTOM DESIGNS<br> STATIC OR WORDPRESS<br> CORPORATE AND E-SHOPS
          </p>
        </div>
      </div>
      <div class="photo"></div>
    </div>
    <div class="service-card">
      <div class="info">
        <h3>Social media + SEO</h3>
        <div class="text">
          <p>
            GOOGLE ADWORDS<br> GOOGLE ANALYTICS<br> WEBSITE OPTIMIZATION<br> SOCIAL MEDIA MANAGEMENT
          </p>
        </div>
      </div>
      <div class="photo"></div>
    </div>
    <div class="service-card">
      <div class="info">
        <h3>Printing</h3>
        <div class="text">
          <p>
            SPECIAL FEATURES<br> TINY OR HUGE SIZE<br> CORPORATE OR PERSONAL<br> MATERIAL OF YOUR CHOICE
          </p>
        </div>
      </div>
      <div class="photo"></div>
    </div>
    <div class="service-card">
      <div class="info">
        <h3>Photoshooting &amp; Studio</h3>
        <div class="text">
          <p>
            PROFESSIONAL PRODUCT SHOOTING<br> CATALOGUE AND WEBSITE GALLERY<br> WORKPLACE &amp; INDUSTRY SHOOTING<br> SHOOTING FOR SOCIAL MEDIA
          </p>
        </div>
      </div>
      <div class="photo"></div>
    </div>
    <div class="service-card">
      <div class="info">
        <h3>Aerial Photography &amp; Video</h3>
        <div class="text">
          <p id="start-team">
            AERIAL PHOTOSHOOTING<br> AERIAL VIDEO PRODUCTION<br> HIGH-END DRONE FEATURES
          </p>
        </div>
      </div>
      <div class="photo"></div>
    </div>
  </div>
</section>

user_177306520
Related