The left side of the page is anchored with text content while an engaging carousel occupies the right half

Looking to create a section on the website that remains fixed while a carousel scrolls vertically. Once you reach the final slide, scrolling will continue on the page rather than changing the carousel slide.

Want it to function similarly to the Creative strategy page on this website:

Any advice on where to start and what to focus on? Using React, HTML, CSS

javascripthtmlcssreactjs

Answer №1

I previously revamped the website in question. This particular design can be achieved without the need for JavaScript, primarily utilizing clever position:sticky; div elements.
To illustrate, here is a quick image showcasing how to implement this: https://i.sstatic.net/8Lkvx.png

For further clarification, you will require <section> elements with their heights set to 100vh (for responsiveness). Within these sections, you can employ either flexbox or grid. The structure will resemble the following:

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

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

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

    <div class="bot_of_left-big-box" style="background:black; (to hide overlapped text)">
      <p>• asdasd<br> • asdasd <br> • asdasd</p>
    </div>

  </div>

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

</section>

Live Example (Non-Responsive / view as "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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I possess 9 captivating visuals that gracefully unveil their larger counterparts upon being clicked. Curiously, this enchanting feature seems to encounter a perplexing issue within the realm of web browsing

<style type="text/javascript" src="jquery-1.11.0.min.js"></style> <style type="text/javascript" src="myCode.js"></style> </body> //jquery is within my site directory on my desktop $(document).ready(function(){ //note: $("#ar ...

javascriptjqueryhtml

When using the Node JS driver to find elements by their class name and retrieve the text, an error is encountered

While working on Selenium tests, I am seeking feedback and the closest solution I have found is using: driver.findElement(By.className('classname')).getText(); However, in order to make it more efficient, I need to find all elements with the sa ...

javascriptnode.jsselenium

Creating custom ExpectedConditions with Protractor for detecting attribute changes

I've been working on creating a custom ExpectedConditions method that can wait for an element attribute to change. Here is the approach I came up with: const CustomExpectedCondition = function() { /** * Check if element's attribute matches ...

javascriptselenium-webdriverprotractorangularjs-1.7

Obtaining specific data from the forEach iteration, post-click event with JavaScript

Trying to access the value from a Tree-structured Array of Objects stored in Local Storage, https://i.sstatic.net/YJ1PI.png Created a function that retrieves values from local storage using forEach and displays them on the screen. https://i.sstatic.net/ ...

javascripthtml

Utilizing CSS for displaying and hiding content based on its unique identifier

Is it possible to show/hide a div using only CSS based on its ID? Showcasing this functionality in jQuery or vanilla JavaScript is straightforward, but can the same effect be achieved with pure CSS? The checkbox hack requires a specific structure to func ...

css

Leveraging jest.unmock for testing the functionality of a Promise

I've implemented Auth0 for managing authentication in my React App. Below is the code snippet I am trying to test: login(username: string, password: string) { return new Promise((resolve, reject) => { this.auth0.client.login({ ...

javascriptreactjsjestjses6-promise

Saving changes to mesh vertices in r67 of Three.js

I've encountered an issue with saving a mesh to a text file after manipulating vertices in my plane model. While the rendering on screen works as expected, the updates are not reflected in the saved file. Interestingly, if I move a vertex before the ...

javascriptthree.js

Remove all HTML tags except for those containing a specific class

Looking for a regex that removes all HTML tags except the "a" tags with the "classmark" class For example, given this HTML string: <b>this</b> <a href="#">not match</a> <a href="#" target="_blank" ...

javascripthtmltagsstrip

Can you explain the significance of this?

Some may find this question silly, but I'm curious about the meaning behind certain elements in an ASPX page. For example, when there is code like this: <%@ Page Title="[$TITLES_listevents{uneditable}]" Language="C#" MasterPageFile="~/sitebase ...

asp.nethtml

Unable to make calls to functions within my JQuery prototype class

When it comes to setting up the behavior for my content_item elements, I use the following approach: $.fn.createContentItem = function() { $(this).selectItem = function() { $(".content_item").removeClass("selected"); $ ...

javascriptjquery

Utilizing ThemeProvider in a Different Component in React

In my App.js file, I have a function that toggles between light and dark mode themes: import { createTheme, ThemeProvider } from '@mui/material/styles' import Button from '@mui/material/Button' import Header from './components/Head ...

javascriptreactjsmaterial-ui

Ways to test the initial launch of an Android application using Cordova

I am developing an Android application using Cordova. My app consists of multiple pages, with the main homepage being index.html. I need to determine if it is the first time a user lands on the homepage after opening the app, regardless of how many times ...

javascriptandroidangularjscordova

How can we dynamically resize page content to fit varying browser window sizes across different devices with the help of jQuery/JavaScript?

Looking for a solution involving an HTML form that includes a text field and a submit button. The text field is where the user enters a URL, and upon clicking the submit button, they are redirected to that URL. Seeking a way to adjust the size of the new ...

javascriptjqueryhtmlwindow-resizejquery-ui-resizable

Steps for Implementing an Event Listener in JavaScript

While working on a page in Chrome, I encountered an issue where I wanted a modal to show up when a user clicked on an image. However, the functionality was not working as expected on my localhost. Upon further inspection, I believe there might be a problem ...

javascriptjqueryhtmlcss

JWPlayer encounters an issue: "undefined" function is not defined

Can anyone lend a hand with this issue I'm facing? I'm attempting to upload a video using jwplayer but encountering errors. Here is the snippet of code I'm utilizing: <script type="text/javascript"> jwplayer("leg ...

javascriptjwplayer

Error message in Ionic 2: "Property is not found on type"

Currently, I am working on a project in Ionic 2 and have encountered a stumbling block with a seemingly simple task. My issue lies with a Textbox where I aim to input text that will then be displayed. I found some code on a website (http://www.tizag.com/j ...

javascripttypescriptionic-frameworkionic2

What is the best way to choose the right value based on parameters?

I am currently working on a solution using protractor where I have several options to consider. Specifically, I need to test timeslots between 1600 and 1900, along with an else statement. For instance, if the 1600 timeslot is selected, then the code shoul ...

javascriptseleniumif-statementparametersprotractor

Implementing the useCallback hook to retrieve information when a button is clicked

In my current scenario, I need to fetch data when a button is clicked and then store it in a context variable. Here is the code snippet for reference: const [products, setProducts] = useState([]); const handleButtonClick= useCallback(() => { if (c ...

reactjsreact-hooksfetch-apiusecallbackreact-usecallback

Guide on parsing a JavaScript file and converting the default export module to JSON with Node.js

What I'm trying to accomplish in my Node.js project is reading a sample.js file with ES Module syntax and extracting the default export from it. sample.js import foo from "foo"; const bar = [ { name: "Homer", }, { n ...

javascriptnode.jsjson

What is the best way to apply a :visited selector specifically to the most recently visited webpage?

I've noticed that all the pages I've visited on the site have now changed to the color I chose. However, my goal is for only the last page I viewed to be in the color I assigned. Thank you! ...

htmlcssdreamweaver