javascript - Effet de distorsion cartésienne avec CSS

J'essaie de recréer l'effet de distorsion cartésienne utilisé sur la page de la Fashion Week du New York Times. Cependant, ils utilisent D3 version 3 et le plugin fisheye pour D3js qui ne fonctionne pas avec D3 version 4.

Puisque tout le projet que nous faisons est en D3 V4, je ne peux pas rétrograder vers D3 Version 3.

Y a-t-il d'autres façons d'obtenir cet effet en utilisant CSS et jQuery ?

J'ai essayé ceci, voici jusqu'où je suis arrivé : aperçu

window.onload = run;
function run() {
    if ($('.overlayDiv').css('display') != 'none') {
        var container = d3.select('.overlayDiv');
        container.empty();
        var val = parseInt(5);
        var overlayWidth = $(".overlayDiv").width();
        var vwidth = (overlayWidth / (val));
        console.log(vwidth);
        for (i = 0; i < val; ++i) {
            var div = container.append("div").style("width", vwidth + "px")
                .style("height", "100%")
                .style("background", "rgb(75, 123, 175)")
                .style("float", "left")

            var year = div.text(i)
                .attr("class", "summary")
                .style("text-align", "center")
                .style("font-size", "32px")
                .style("font-weight", "bold")
                .style("line-height", "100px").style("color", "white")
                .on('mouseover', function() {
                    d3.select(this)
                        .transition().style('width', $(".overlayDiv").width() / 2 + "px")
                        .style("background", "rgba(90, 90, 90, 0.78)")

                    $('.summary').not(this).each(function() {
                        $(this).css("width", (overlayWidth / 3) / (val));
                    });

                })
                .on('mouseout', function() {
                    d3.select(this)
                        .transition().style('width', vwidth + "px")
                        .style("background", "rgb(75, 123, 175)")
                    $('.summary').not(this).each(function() {
                        $(this).css("width", vwidth);
                    });
                })
        }

        $('.overlayDiv').show();
        //$('.overlayDiv').text(this.firstChild.nextSibling.innerHTML);
        $('.overlayDiv').addClass("overlayActive");
        $('.overlayDiv').removeClass("overlayInactive");
    } else {
        var container = d3.select('.overlayDiv');
        container.empty();
        $('.overlayDiv').hide();
        $('.overlayDiv').text("");
        $('.overlayDiv').removeClass("overlayActive");
        $('.overlayDiv').addClass("overlayInactive");
    }
}

Comment améliorer cela et obtenir l'effet vu dans le New York Times ?

Réponse n°1

Vous pouvez obtenir cet effet en utilisant uniquement du CSS.

CodePen : http://codepen.io/hunzaboy/pen/qrRpzZ

body {
  background: #444;
}

.items {
  height: 128px;
  /*change this as per your requirments */
  overflow: hidden;
  display: flex;
}

.item {
  box-shadow: inset 0 0 0 1px #000;
  align-items: center;
  transition: flex 0.2s;
  background-size: cover;
  background-position: center;
  flex: 1;
}

$class-slug: item !default;
@for $i from 1 through 20 {
  .#{$class-slug}-#{$i} {
    background-image: url("https://randomuser.me/api/portraits/women/#{$i}.jpg");
  }
}


/* Flex Items */

.item>* {
  /*   flex: 1 0 auto; */
}

.item:hover {
  flex: 3;
}

.item:hover ~ .item {
  flex: 2;
}