sticky-adverts

by Richard Hunter

HTML

when you’re a woman in your thirties, people around you tend to assume that
    you will, at some point, have children. At weddings, people would smile at
    me while I held friend’s babies and say things like 'great practice for when
    you have your own!’ When my husband and I were first shown round our home in
    London, the estate agent kept pointing out the two small spare rooms that
    ‘would be great baby rooms’ while smiling at us. They would in fact be our
    offices for creative work. when you’re a woman in your thirties, people
    around you tend to assume that you will, at some point, have children. At
    weddings, people would smile at me while I held friend’s babies and say
    things like 'great practice for when you have your own!’ When my husband and
    I were first shown round our home in London, the estate agent kept pointing
    out the two small spare rooms that ‘would be great baby rooms’ while smiling
    at us. They would in fact be our offices for creative work. when you’re a
    woman in your thirties, people around you tend to assume that you will, at
    some point, have children. At weddings, people would smile at me while I
    held friend’s babies and say things like 'great practice for when you have
    your own!’ When my husband and I were first shown round our home in London,
    the estate agent kept pointing out the two small spare rooms that ‘would be
    great baby rooms’ while smiling at us. They would in fact be our offices for
    creative work. when you’re a woman in your thirties, people around you tend
    to assume that you will, at some point, have children. At weddings, people
    would smile at me while I held friend’s babies and say things like 'great
    practice for when you have your own!’ When my husband and I were first shown
    round our home in London, the estate agent kept pointing out the two small
    spare rooms that ‘would be great baby rooms’ while smiling at us. They would
    in fact be our...

CSS

body {
  font-size: 2em;
}

.container {
  position: relative;
  height: 400px;
  margin: 50px 10px;
  clip-path: inset(0);
}

img {
  object-fit: cover;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

body {
  min-height: 400px;
}

JavaScript

function createComponent(image, images, interval) {
  let i = 0;

  image.src = images[i];

  setInterval(() => {
    image.src = [images[i++ % images.length]];
  }, interval);
}

const images1 = [
  'https://hips.hearstapps.com/hmg-prod/images/gettyimages-685346346-1557742292.jpg?crop=1.00xw:0.752xh;0,0.207xh&resize=1120:*',
  'https://hips.hearstapps.com/hmg-prod/images/emma-gannon-childfree-non-maternity-leave-jpg-663a0e9e83a08.jpg?crop=1xw:1xh;center,top&resize=1200:*',
  'https://hips.hearstapps.com/hmg-prod/images/kendally-jenner-met-gala-2024-66397759e7a5d.jpg?crop=1.00xw:0.334xh;0,0.0630xh&resize=1200:*',
];
const image1 = document.getElementById('image-1');
createComponent(image1, images1, 3000);

const images2 = [
  'https://hips.hearstapps.com/hmg-prod/images/robert-wun-runway-2024-66336532d8095.jpg?crop=0.6666666666666666xw:1xh;center,top&resize=1200:*',
  'https://hips.hearstapps.com/hmg-prod/images/findikoglu-f24-040-66326113df3bf.jpg?resize=980:*',
  'https://hips.hearstapps.com/hmg-prod/images/ferretti-bks-f24-031-663259c3292bf.jpg?crop=1.00xw:0.753xh;0,0.0552xh&resize=1200:*',
];

const image2 = document.getElementById('image-2');
createComponent(image2, images2, 2500);