Home > Blockchain >  How to create a scrolling image collage with image bubbles?
How to create a scrolling image collage with image bubbles?

Time：10-20

I want to create a scrolling image collage with image bubbles.

I want Like This

I finished making the design, but I can't understand how can I slide those pictures continuously. I mean auto carousel slider. Please Help me.

var frst_Img = document.querySelector(".image1");
var scnd_Img = document.querySelector(".image2");
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: aliceblue;
}

div#container {
  width: 1150px;
  padding: 5px;
  margin: 15px auto;
  display: block;
  overflow: hidden;
  border: 2px solid black;
  background: white;
  box-shadow: rgb(0 0 0 / 20%) 0px 8px 24px;
}

.wrapper {
  width: 100%;
  box-shadow: rgb(50 50 93 / 7%) 0px 30px 60px -12px inset, rgb(0 0 0 / 6%) 0px 18px 36px -18px inset;
}

.images {
  width: 100%;
  height: 175px;
  position: relative;
}

.images2 {
  width: 100%;
  height: 175px;
  display: block;
  position: relative;
}

.images3 {
  width: 100%;
  display: block;
  height: 175px;
  position: relative;
}

.image1 {
  position: absolute;
  top: 0%;
  left: 16%;
  width: 125px;
  height: 125px;
  margin: 10px;
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.1),
    0 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  padding: 5px;
  border: 1px solid #cdcdcd;
  display: inline-block;
  background-image: url(pictures/1.jfif);
  background-size: cover;
  background-repeat: no-repeat;
  animation: upDown 5s infinite;
}

.image2 {
  position: absolute;
  top: 0%;
  left: 50%;
  width: 125px;
  height: 125px;
  margin: 10px;
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.1),
    0 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  padding: 5px;
  border: 1px solid #cdcdcd;
  display: inline-block;
  background-image: url(pictures/2.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  animation: upDown 5s infinite;
}

.image3 {
  position: absolute;
  top: 0%;
  left: 85%;
  width: 125px;
  height: 125px;
  margin: 10px;
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.1),
    0 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  padding: 5px;
  border: 1px solid #cdcdcd;
  display: inline-block;
  background-image: url(pictures/3.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  animation: upDown 5s infinite;
}

@keyframes upDown{
  0%{
      transform: translateY(0px);
  }
  50%{
      transform: translateY(8px);
  }
  100%{
      transform: translateY(0px);
  }
}



.image4 {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 150px;
  height: 150px;
  margin: 10px;
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.1),
    0 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  padding: 5px;
  border: 1px solid #cdcdcd;
  display: inline-block;
  background-image: url(pictures/4.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  animation: upDown2 6s infinite;
}

.image5 {
  position: absolute;
  top: 0%;
  left: 33%;
  width: 150px;
  height: 150px;
  margin: 10px;
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.1),
    0 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  padding: 5px;
  border: 1px solid #cdcdcd;
  display: inline-block;
  background-image: url(pictures/5.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  animation: upDown2 6s infinite;
}

.image6 {
  position: absolute;
  top: 0%;
  left: 70%;
  width: 150px;
  height: 150px;
  margin: 10px;
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.1),
    0 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  padding: 5px;
  border: 1px solid #cdcdcd;
  display: inline-block;
  background-image: url(pictures/6.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  animation: upDown2 5s infinite;
}


@keyframes upDown2{
  0%{
      transform: translateY(0px);
  }
  50%{
      transform: translateY(-8px);
  }
  100%{
      transform: translateY(0px);
  }
}



.image7 {
  position: absolute;
  top: 0%;
  left: 16%;
  width: 125px;
  height: 125px;
  margin: 10px;
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.1),
    0 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  padding: 5px;
  border: 1px solid #cdcdcd;
  display: inline-block;
  background-image: url(pictures/7.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  animation: upDown3 5s infinite;
}

.image8 {
  position: absolute;
  top: 0%;
  left: 54%;
  width: 125px;
  height: 125px;
  margin: 10px;
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.1),
    0 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  padding: 5px;
  border: 1px solid #cdcdcd;
  display: inline-block;
  background-image: url(pictures/8.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  animation: upDown3 5s infinite;
}

.image9 {
  position: absolute;
  top: 0%;
  left: 88%;
  width: 125px;
  height: 125px;
  margin: 10px;
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.1),
    0 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  padding: 5px;
  border: 1px solid #cdcdcd;
  display: inline-block;
  background-image: url(pictures/9.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  animation: upDown3 5s infinite;
}

@keyframes upDown3{
  0%{
      transform: translateY(0px);
  }
  50%{
      transform: translateY(8px);
  }
  100%{
      transform: translateY(0px);
  }
}
<div id="container">
        <div class="wrapper">
            <div class="images">
                <div class="image1"></div>
                <div class="image2"></div>
                <div class="image3"></div>
            </div>
            <div class="images2">
                <div class="image4"></div>
                <div class="image5"></div>
                <div class="image6"></div>
            </div>
            <div class="images3">
                <div class="image7"></div>
                <div class="image8"></div>
                <div class="image9"></div>
            </div>
        </div>
    </div>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Consider the following. This is not the only way to do this, yet it may help lead you to a solution.

$(function() {
  var speed = 1;
  var canvas = $(".wrapper");

  function float(el) {
    var left = $(el).position().left;
    var top = $(el).position().top;
    left -= (speed   Math.random());
    top = top   (Math.random() < 0.5 ? -1 : 1);
    if (left < (0 - $(el).width())) {
      // Element is offscreen
      $(el).css("left", "115%");
    } else {
      $(el).animate({
        left: left,
        top: top
      });
    }
  }

  var timer = setInterval(function() {
    $("[class^='image']").each(function() {
      float(this);
    });
  }, 600);
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: aliceblue;
}

div#container {
  width: 1150px;
  padding: 5px;
  margin: 15px auto;
  display: block;
  overflow: hidden;
  border: 2px solid black;
  background: white;
  box-shadow: rgb(0 0 0 / 20%) 0px 8px 24px;
}

.wrapper {
  width: 100%;
  box-shadow: rgb(50 50 93 / 7%) 0px 30px 60px -12px inset, rgb(0 0 0 / 6%) 0px 18px 36px -18px inset;
}

div[class^='row'] {
  width: 100%;
  height: 175px;
  position: relative;
}

div[class^='image'] {
  position: absolute;
  top: 0%;
  width: 125px;
  height: 125px;
  margin: 10px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  padding: 5px;
  border: 1px solid #cdcdcd;
  display: inline-block;
  background-size: cover;
  background-repeat: no-repeat;
}

div.large {
  width: 150px;
  height: 150px;
}

.image1 {
  left: 15%;
  background-image: url(https://dummyimage.com/175/ccc/000.png&text=1);
}

.image2 {
  left: 50%;
  background-image: url(https://dummyimage.com/175/ccc/000.png&text=2);
}

.image3 {
  left: 85%;
  background-image: url(https://dummyimage.com/175/ccc/000.png&text=3);
}

.image4 {
  left: 115%;
  background-image: url(https://dummyimage.com/175/ccc/000.png&text=4);
}

.image5 {
  left: 0%;
  background-image: url(https://dummyimage.com/175/ccc/000.png&text=5);
}

.image6 {
  left: 33%;
  background-image: url(https://dummyimage.com/175/ccc/000.png&text=6);
}

.image7 {
  left: 66%;
  background-image: url(https://dummyimage.com/175/ccc/000.png&text=7);
}

.image8 {
  left: 100%;
  background-image: url(https://dummyimage.com/175/ccc/000.png&text=8);
}

.image9 {
  left: 15%;
  background-image: url(https://dummyimage.com/175/ccc/000.png&text=9);
}

.image10 {
  left: 50%;
  background-image: url(https://dummyimage.com/175/ccc/000.png&text=10);
}

.image11 {
  left: 85%;
  background-image: url(https://dummyimage.com/175/ccc/000.png&text=11);
}

.image12 {
  left: 115%;
  background-image: url(https://dummyimage.com/175/ccc/000.png&text=12);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div class="wrapper">
    <div class="row-1">
      <div class="image1"></div>
      <div class="image2"></div>
      <div class="image3"></div>
      <div class="image4"></div>
    </div>
    <div class="row-2">
      <div class="image5 large"></div>
      <div class="image6 large"></div>
      <div class="image7 large"></div>
      <div class="image8 large"></div>
    </div>
    <div class="row-3">
      <div class="image9"></div>
      <div class="image10"></div>
      <div class="image11"></div>
      <div class="image12"></div>
    </div>
  </div>
</div>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Instead of using CSS to animate the movement, we use jQuery Animate.

CodePudding user response：

If you are able to set up the HTML you won't need to use Javascript.

A simple way is to make sure that you have enough copies of the material you want to scroll and that half of these will at least cover the largest screen size you need to support.

The built-in width of 1150 is too narrow for some common screens, so this snippet has 4 copies, moves them to the left by 50%, then back to the initial position, that way it looks continuous and you can leave CSS (and hopefully the device's GPU) to keep the animation going.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: aliceblue;
  overflow: hidden;
}

div#container {
  width: calc(1150px * 4);
  display: flex;
  overflow: hidden;
  border: 2px solid black;
  background: white;
  box-shadow: rgb(0 0 0 / 20%) 0px 8px 24px;
  animation: moveleft 60s infinite linear;
}

.block1,
.block2 {
  display: flex;
}

.wrapper {
  background: ;
  display: inline-block;
  rwidth: 100vw;
  width: 1150px;
  box-shadow: rgb(50 50 93 / 7%) 0px 30px 60px -12px inset, rgb(0 0 0 / 6%) 0px 18px 36px -18px inset;
}

@keyframes moveleft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.images {
  width: 100%;
  height: 175px;
  position: relative;
}

.images2 {
  width: 100%;
  height: 175px;
  display: block;
  position: relative;
}

.images3 {
  width: 100%;
  display: block;
  height: 175px;
  position: relative;
}

.image1 {
  position: absolute;
  top: 0%;
  left: 16%;
  width: 125px;
  height: 125px;
  margin: 10px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  padding: 5px;
  border: 1px solid #cdcdcd;
  display: inline-block;
  background-image: url(pictures/1.jfif);
  background-size: cover;
  background-repeat: no-repeat;
  animation: upDown 5s infinite;
}

.image2 {
  position: absolute;
  top: 0%;
  left: 50%;
  width: 125px;
  height: 125px;
  margin: 10px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  padding: 5px;
  border: 1px solid #cdcdcd;
  display: inline-block;
  background-image: url(pictures/2.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  animation: upDown 5s infinite;
}

.image3 {
  position: absolute;
  top: 0%;
  left: 85%;
  width: 125px;
  height: 125px;
  margin: 10px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  padding: 5px;
  border: 1px solid #cdcdcd;
  display: inline-block;
  background-image: url(pictures/3.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  animation: upDown 5s infinite;
}

@keyframes upDown {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(8px);
  }
  100% {
    transform: translateY(0px);
  }
}

.image4 {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 150px;
  height: 150px;
  margin: 10px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  padding: 5px;
  border: 1px solid #cdcdcd;
  display: inline-block;
  background-image: url(pictures/4.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  animation: upDown2 6s infinite;
}

.image5 {
  position: absolute;
  top: 0%;
  left: 33%;
  width: 150px;
  height: 150px;
  margin: 10px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  padding: 5px;
  border: 1px solid #cdcdcd;
  display: inline-block;
  background-image: url(pictures/5.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  animation: upDown2 6s infinite;
}

.image6 {
  position: absolute;
  top: 0%;
  left: 70%;
  width: 150px;
  height: 150px;
  margin: 10px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  padding: 5px;
  border: 1px solid #cdcdcd;
  display: inline-block;
  background-image: url(pictures/6.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  animation: upDown2 5s infinite;
}

@keyframes upDown2 {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0px);
  }
}

.image7 {
  position: absolute;
  top: 0%;
  left: 16%;
  width: 125px;
  height: 125px;
  margin: 10px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  padding: 5px;
  border: 1px solid #cdcdcd;
  display: inline-block;
  background-image: url(pictures/7.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  animation: upDown3 5s infinite;
}

.image8 {
  position: absolute;
  top: 0%;
  left: 54%;
  width: 125px;
  height: 125px;
  margin: 10px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  padding: 5px;
  border: 1px solid #cdcdcd;
  display: inline-block;
  background-image: url(pictures/8.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  animation: upDown3 5s infinite;
}

.image9 {
  position: absolute;
  top: 0%;
  left: 88%;
  width: 125px;
  height: 125px;
  margin: 10px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  padding: 5px;
  border: 1px solid #cdcdcd;
  display: inline-block;
  background-image: url(pictures/9.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  animation: upDown3 5s infinite;
}

@keyframes upDown3 {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(8px);
  }
  100% {
    transform: translateY(0px);
  }
}
<div id="container">
  <div class="block1">
    <div class="wrapper" style="/*background: cyan;*/">
      <div class="images">
        <div class="image1"></div>
        <div class="image2"></div>
        <div class="image3"></div>
      </div>
      <div class="images2">
        <div class="image4"></div>
        <div class="image5"></div>
        <div class="image6"></div>
      </div>
      <div class="images3">
        <div class="image7"></div>
        <div class="image8"></div>
        <div class="image9"></div>
      </div>
    </div>
    <div class="wrapper" style="/*background: lime;*/">
      <div class="images">
        <div class="image1"></div>
        <div class="image2"></div>
        <div class="image3"></div>
      </div>
      <div class="images2">
        <div class="image4"></div>
        <div class="image5"></div>
        <div class="image6"></div>
      </div>
      <div class="images3">
        <div class="image7"></div>
        <div class="image8"></div>
        <div class="image9"></div>
      </div>
    </div>
  </div>
  <div class="block2">
    <div class="wrapper" style="/*background: mauve;*/">
      <div class="images">
        <div class="image1"></div>
        <div class="image2"></div>
        <div class="image3"></div>
      </div>
      <div class="images2">
        <div class="image4"></div>
        <div class="image5"></div>
        <div class="image6"></div>
      </div>
      <div class="images3">
        <div class="image7"></div>
        <div class="image8"></div>
        <div class="image9"></div>
      </div>
    </div>
    <div class="wrapper" style="/*background: yellow;*/">
      <div class="images">
        <div class="image1"></div>
        <div class="image2"></div>
        <div class="image3"></div>
      </div>
      <div class="images2">
        <div class="image4"></div>
        <div class="image5"></div>
        <div class="image6"></div>
      </div>
      <div class="images3">
        <div class="image7"></div>
        <div class="image8"></div>
        <div class="image9"></div>
      </div>
    </div>
  </div>
</div>
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Page link：https//www.codepudding.com/Blockchain/159086.html

Prev:Ensure div parent wraps img child
Next:Div should be fixed only inside other div
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding