Changing background in CSS and JS

Question

Where I can find some tutorials on how to make something similar to this? I tried to inspect the source code but the content changes fast to another ad.

Shutterstock ad on WeTransfer

check this question out, there's lots of options with just css: https://stackoverflow.com/questions/7318462/changing-background-image-with-css3-animations — CamiEQ, Sep 01 '20 at 20:21
Check out this link https://codepen.io/michiel-huiskens/pen/bGdoEXR — Farid Vatani, Sep 01 '20 at 20:29

score 1 · Answer 1 · answered Sep 02 '20 at 00:10

After a few hours of playing around I came up with a solution to this using CSS grid and jQuery. I have some ideas on how to achieve this using only CSS.

Here is my solution

https://codepen.io/sbp/full/gOrGaLZ

      $(".grid_item_1").hover(function () {
        $(".wrapper").addClass("wrapper_bg_1");
        $(".wrapper").removeClass(
          "wrapper_bg_2 wrapper_bg_3 wrapper_bg_4 wrapper_bg_5"
        );
      });
      $(".grid_item_2").hover(function () {
        $(".wrapper").addClass("wrapper_bg_2");
        $(".wrapper").removeClass(
          "wrapper_bg_1 wrapper_bg_3 wrapper_bg_4 wrapper_bg_5"
        );
      });
      $(".grid_item_3").hover(function () {
        $(".wrapper").addClass("wrapper_bg_3");
        $(".wrapper").removeClass(
          "wrapper_bg_1 wrapper_bg_2 wrapper_bg_4 wrapper_bg_5"
        );
      });
      $(".grid_item_4").hover(function () {
        $(".wrapper").addClass("wrapper_bg_4");
        $(".wrapper").removeClass(
          "wrapper_bg_1 wrapper_bg_2 wrapper_bg_3 wrapper_bg_5"
        );
      });
      $(".grid_item_5").hover(function () {
        $(".wrapper").addClass("wrapper_bg_5");
        $(".wrapper").removeClass(
          "wrapper_bg_1 wrapper_bg_2 wrapper_bg_3 wrapper_bg_4"
        );
      });

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  width: 100%;
  height: 100%;
}
:root {
  --image-1: url(https://source.unsplash.com/ldMfU7XzWlU/1920x1080);
  --image-2: url(https://source.unsplash.com/bE4LIoM9MvM/1920x1080);
  --image-3: url(https://source.unsplash.com/syhd5N6nceM/1920x1080);
  --image-4: url(https://source.unsplash.com/e6O3tSO1zH8/1920x1080);
  --image-5: url(https://source.unsplash.com/d2YMQ-hZ3og/1920x1080);
}
.wrapper {
  position: absolute;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-attachment: fixed;
  transition: all 0.25s;
}
.wrapper_bg_1 {
  background-image: var(--image-1);
}
.wrapper_bg_2 {
  background-image: var(--image-2);
}
.wrapper_bg_3 {
  background-image: var(--image-3);
}
.wrapper_bg_4 {
  background-image: var(--image-4);
}
.wrapper_bg_5 {
  background-image: var(--image-5);
}
.grid {
  width: calc(100vw - 50vw);
  margin-top: calc(100vh - 70vh);
  margin-left: calc(100vw - 60vw);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas:
    "img1 img2 img3"
    "img4 img2 img3"
    "img5 img5 img3";
}
.grid_item {
  margin: 10px;
  border: #fff 0.4rem solid;
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.02),
    0 6.7px 5.3px rgba(0, 0, 0, 0.028), 0 12.5px 10px rgba(0, 0, 0, 0.035),
    0 22.3px 17.9px rgba(0, 0, 0, 0.042), 0 41.8px 33.4px rgba(0, 0, 0, 0.05),
    0 100px 80px rgba(0, 0, 0, 0.07);
  background-size: cover;
  background-attachment: fixed;
  min-height: calc(100vh - 80vh);
}
.grid_item_1 {
  grid-area: img1;
  background-image: var(--image-1);
}
.grid_item_2 {
  grid-area: img2;
  background-image: var(--image-2);
}
.grid_item_3 {
  grid-area: img3;
  background-image: var(--image-3);
}
.grid_item_4 {
  grid-area: img4;
  background-image: var(--image-4);
}
.grid_item_5 {
  grid-area: img5;
  background-image: var(--image-5);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="wrapper wrapper_bg_1" id="bg">
      <div class="grid">
        <div class="grid_item grid_item_1"></div>
        <div class="grid_item grid_item_2"></div>
        <div class="grid_item grid_item_3"></div>
        <div class="grid_item grid_item_4"></div>
        <div class="grid_item grid_item_5"></div>
      </div>
    </div>
  </body>
</html>

score 0 · Answer 2 · answered Sep 01 '20 at 20:19

0

You would need to have an array of picture urls, and you would need to implement setTimeout callback that would change your html page body background image in an interval that you will pass to setTimeout function as a second parameter. Now you have the whole picture of processes that you will need to implement. Please try to google the rest.

answered Sep 01 '20 at 20:19

JSEvgeny

2,550
1
24
38

The image changes on mouse movement. Obviously I tried to google it before I asked the question here! – SBP Sep 01 '20 at 20:29
This is the place where you ask for correction to your own solution that you have already implemented or at least tried to implement. All the abstract things you can find in Google if you are keen enough – JSEvgeny Sep 01 '20 at 20:45

Changing background in CSS and JS

2 Answers2