CSSによるデカルト歪み効果

Question

New York Times Fashion Weekページで使用されているデカルト歪み効果を再現しようとしています。しかし、彼らは我々が行うプロジェクト全体がD3 V4であるので、D3バージョン4

では動作しませんD3jsのためのD3バージョン3と魚眼レンズプラグインを使用して、私は3

はありD3のバージョンにダウングレードすることはできませんCSSとjqueryを使ってこの効果を達成する他の方法は？私がこれまでに得たところ、私はこれを試してみました

は次のとおりです。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"); 
    } 
} 

これを改善し、NYタイムズで見られる効果を達成するためにどのように？

Answer 1

この効果は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; 
}