Html Question posted in
Some basic documentation can be found here.

Html – How do I make my image float left and text to the right?

I’m currently working on a project where I’ve set up a background image to move when the user scrolls, using positions move1, move2, and move3. However, I’m now trying to adjust the layout so that the text (topPanel) moves to the right instead of staying at the top, while also moving the background image to the left.

I am trying to achieve something similar to this – https://www.nytimes.com/interactive/2021/04/02/arts/design/shah-jahan-chitarman.html (It says subscription required, but you should be able to browse without subscription.)
I attempted to achieve this using a grid layout, but it seems to have caused the background image to stop moving altogether. I’m unsure what steps I might be missing in order to resolve this issue. Can you provide some guidance? Thank you.

$(document).ready(function() {
  var winHeight = $(".topPanel").height(),
    topLimit = winHeight;

  $(".topPanel").on("scroll", function() {
    $(".feature").each(function() {
      var thisTop = $(this).offset().top - $(window).scrollTop();

      if (thisTop <= topLimit) {
        $(".feature").removeClass("highlight");
        $(this).addClass("highlight");

        if ($(this).hasClass("feature1")) {
          $("body").addClass("move1");
        }
        if ($(this).hasClass("feature2")) {
          $("body").addClass("move2");
        }
        if ($(this).hasClass("feature3")) {
          $("body").addClass("move3");
        }
      }
    });
  });
});
.topPanel {
  height: 50vh;
  overflow: auto;
  float: left;
  padding: 10px;
  position: relative;
  z-index: 1;
}

body:after {
  content: "";
  z-index: -1;
  position: fixed;
  float: right;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: url(http://www.reedyrace.com/images/b64d-chassis.jpg) no-repeat 50% 0%;
  transition: background 1s ease;
}

.inner {
  max-width: 1280px;
  margin: auto;
}

.highlight {
  background: red;
}

.move1:after {
  background-position: 0% 50%;
}

.move2:after {
  background-position: 0% 100%;
}

.move3:after {
  background-position: 100% 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="topPanel">
  <div class="inner">
    <p>Scroll to see feature titles</p>
    <p>Scroll to see feature titles</p>
    <p>Scroll to see feature titles</p>
    <p>Scroll to see feature titles</p>
    <p>Scroll to see feature titles</p>
    <p>Scroll to see feature titles</p>

    <h2 class="feature feature1" id="title1">Feature 1</h2>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
      et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
      sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>

    <h2 class="feature feature2" id="myDiv">Feature 2</h2>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

    <h2 class="feature feature3" id="title3">Feature 3</h2>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>
</div>
Tags:

2

Answers


  1. 0

    Try the edits below:

    if ($(this).hasClass("feature1")) {
  $("body").removeClass("move2 move3").addClass("move1");
} else if ($(this).hasClass("feature2")) {
  $("body").removeClass("move1 move3").addClass("move2");
} else if ($(this).hasClass("feature3")) {
  $("body").removeClass("move1 move2").addClass("move3");
}

    .topPanel {
  float: right; /* Adjusted to move text to the right */
}

.move2:after {
  background-position: 0% 0%; /* Adjusted to move background image to the left */
}

    Let me know if that works 🙂

    Login or Signup to reply.
  2. 0

    If you give .topPanel display: flex; flex-direction: column; you’ll be able to easily position the .inner div inside of it. You can change the width of .inner to whatever size you want it to be, and then adjust where it sits to left/center/right with adding align-items: flex-start/center/flex-end to .topPanel

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search