Bubbles gallery #2 - opacity

forked from GitNoise's block: Bubbles gallery #1

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }

* {
      border-sizing: border-box;
    }
    .container {
      display: flex;
      flex-direction: row;
    }
    
    .container > div {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    
    .outside {
      min-width: 200px;
      margin: 0 10px;
    }
    
    .outside > div {
      border: 1px solid #5b5b5b;
      text-align: center;
      background: #7f7f7f;
      padding: 3px 5px;
      color: white;
      font-size: 24px;
      font-family: verdana;
      text-transform: uppercase;
      cursor: pointer;
    }
    
    .middle {
      text-align: center;
      width: 100%;
      justify-content: center;
      flex-direction: row !important;
      justify-content: space-around !important;
      align-items: center;
      padding: 10px;
      min-height: 200px;
    }
    
    .middle > div {
      margin: 2px;
      border-radius: 100px;
      border: 1px solid rgba(0,0,0,0.2);
      overflow: hidden;
    }
  
    .bubble {
      background-size: cover;
      background-position: center center;  
    } 
    
    #index {
      margin: 20px;
      font-size: 20px;
    } 
      
    
  </style>
</head>

<body>

<div class="container">
    <div class="outside">
      	<div id="previous">previous</div>	
    </div>
    <div id="middle" class="middle">
    </div>
    <div class="outside" id="next">
      <div>next</div>
    </div>
  </div>
  
  <pre id="index"></pre>
  
  <script>
    
    const fullData = [ 
      {id:1, value: "https://placekitten.com/200/300?image=1"},
      {id:2, value: "https://placekitten.com/200/300?image=2"},
      {id:3, value: "https://placekitten.com/200/300?image=3"},
      {id:4, value: "https://placekitten.com/200/300?image=4"},
      {id:5, value: "https://placekitten.com/200/300?image=5"},
      {id:6, value: "https://placekitten.com/200/300?image=6"},
    ]
    
    function update(data) {
      const bubbles = d3.select("#middle").selectAll(".bubble")
      	.data(data);
      
      
      const myTransition = d3.transition()
    		.duration(500)
      	.on("end", function() {
          bubbles
            .style("background-image", d => `url(${d.value})`)
          	.transition()
          	.duration(1000)
          	.style("opacity", 1);
        })
       
      console.log(bubbles);
      
      bubbles
      	.transition(myTransition)
      			.style("opacity", 0.2)
      
      bubbles
      	.enter()
      		.append("xhtml:div")
      		.append("xhtml:div")
          .classed("bubble", true)
          	.style("background-image", d => `url(${d.value})`)
      			.style("height", "0px")
      			.style("width", "0px")
      			.transition(myTransition)
						.style("height", (d,i) => i%2 === 0 ? "100px" : "175px")
        		.style("width", (d,i) => i%2 === 0 ? "100px" : "175px");
      
     
    }
         
    let index = 0;
   	update(fullData.slice(index, index + 3))
    
    d3.select("#next")
      .on("click", function() {
      	index++;
      	if (index >= fullData.length) {
          index = 0;
        }
      
      	let newData = fullData.slice(index, index + 3);
        if (newData.length < 3) {
          newData = newData.concat(fullData.slice(0, 3 - newData.length));
        }

update(newData);
    });
      
      
    d3.select("#previous")
      .on("click", function() {
      	index--;
       	if (index < 0) {
          index = fullData.length - 1;
        }
      
      	let newData = fullData.slice(index, index + 3);
        if (newData.length < 3) {
          newData = newData.concat(fullData.slice(0, 3 - newData.length));
        }

update(newData);
    });

</script>
</body>

https://d3js.org/d3.v4.min.js