CSS Cartesian Distortion Effect

Question

I am trying to recreate the Cartesian distortion effect used in the New York Times Fashion Week page . However, they use D3 version 3 and the fisheye plugin for D3js, which does not work with D3 version 4.

Since the whole project is running in D3 V4, I cannot upgrade to D3 Version 3.

Are there any other ways to achieve this effect with CSS and jquery?

I tried this, where I got so far: preview

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"); } } 

How to improve this and achieve the effect observed in the NY Times?

Answer 1

You can achieve this effect using only 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; }