<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <svg id="svg-defs" width="0" height="0"> <defs> <clipPath id="clip-hexagon" clipPathUnits="objectBoundingBox"> <polygon points="0 .5, .25 0, .75 0, 1 .5, .75 1, .25 1" /> </clipPath> <pattern id="image-01" x="0" y="0" width="374" height="324" patternUnits="userSpaceOnUse"> <image width="374" height="324" xlink:href="//mediav2.harveynichols.com/assets/webdev/2017/07/fenty/shape-1.jpg"></image> </pattern> <pattern id="image-02" x="0" y="0" width="374" height="324" patternUnits="userSpaceOnUse"> <image width="374" height="324" xlink:href="//mediav2.harveynichols.com/assets/webdev/2017/07/fenty/shape-2.jpg"></image> </pattern> <pattern id="image-03" x="0" y="0" width="374" height="324" patternUnits="userSpaceOnUse"> <image width="374" height="324" xlink:href="//mediav2.harveynichols.com/assets/webdev/2017/07/fenty/shape-3.jpg"></image> </pattern> <pattern id="image-04" x="0" y="0" width="374" height="324" patternUnits="userSpaceOnUse"> <image width="374" height="324" xlink:href="//mediav2.harveynichols.com/assets/webdev/2017/07/fenty/shape-4.jpg"></image> </pattern> <pattern id="image-05" x="0" y="0" width="374" height="324" patternUnits="userSpaceOnUse"> <image width="374" height="324" xlink:href="//mediav2.harveynichols.com/assets/webdev/2017/07/fenty/shape-5.jpg"></image> </pattern> <pattern id="image-06" x="0" y="0" width="374" height="324" patternUnits="userSpaceOnUse"> <image width="374" height="324" xlink:href="//mediav2.harveynichols.com/assets/webdev/2017/07/fenty/shape-6.jpg"></image> </pattern> </defs> </svg> <div id="shapes" class="items-wrapper" data-activerow="0" data-activecol="0"> <!-- <div class="item-position row-2 col-2" data-item="2" data-row="2" data-col="2"> <div class="item"> <svg class="shape" viewBox="0 0 374 324"> <a class="link" xlink:href="//02.com"> <image class="image" xlink:href="//mediav2.harveynichols.com/assets/webdev/2017/07/fenty/shape-2.jpg" /> <rect class="cover" /> </a> </svg> <a class="link-text" href="//02.com"> <span class="heading">Read</span> <span class="copy">behind fenty beauty</span> <span class="cta">Read more</span> </a> </div> </div> --> <!-- <div class="item-position row-1 col-1" data-item="1" data-row="1" data-col="1"> <div class="item"> <svg class="shape" viewBox="0 0 374 324" xmlns="http://www.w3.org/2000/svg" version="1.1"> <a class="link" xlink:href="//01.com"> <rect x="0" y="0" width="100%" height="100%" fill="url('#image-01')" /> </a> </svg> <a class="link-text" href="//01.com"> <span class="heading">Shop</span> <span class="copy">match stix</span> <span class="cta">Read more</span> </a> </div> </div> --> <!-- <div class="item-position row-1 col-1" data-item="1" data-row="1" data-col="1"> <div class="item"> <svg class="shape" viewBox="0 0 374 324" xmlns="http://www.w3.org/2000/svg" version="1.1"> <a class="link" xlink:href="//01.com"> <polygon class="hex" points="374,162 280,324 94,324 0,162 94,0 280,0" fill="url(#image-01)" /> </a> </svg> <a class="link-text" href="//01.com"> <span class="heading">Shop</span> <span class="copy">match stix</span> <span class="cta">Read more</span> </a> </div> </div> --> <!-- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <svg x="10"> <rect x="10" y="10" height="100" width="100" style="stroke:#ff0000; fill: #0000ff"/> </svg> <svg x="200"> <rect x="10" y="10" height="100" width="100" style="stroke:#009900; fill: #00cc00"/> </svg> </svg> --> <div class="item-position row-1 col-1" data-item="1" data-row="1" data-col="1"> <div class="item"> <svg class="svg-wrap" viewBox="0 0 374 324"> <a class="svg-link" xlink:href="//01.com"> <svg class="svg-shape" viewBox="0 0 374 324"> <polygon class="svg-image svg-image-animated svg-image-animated-1" points="374,162 280,324 94,324 0,162 94,0 280,0" fill="url(#image-01)" /> <polygon class="svg-border" points="374,162 280,324 93,324 0,162 94,0 280,0" /> </svg> </a> </svg> <a class="info" href="//01.com"> <span class="heading">Shop</span> <span class="copy">match stix</span> <span class="cta">Shop now</span> </a> </div> </div> <div class="item-position row-2 col-2" data-item="2" data-row="2" data-col="2"> <div class="item"> <svg class="svg-wrap" viewBox="0 0 374 324"> <a class="svg-link" xlink:href="//02.com"> <svg class="svg-shape" viewBox="0 0 374 324"> <polygon class="svg-image" points="374,162 280,324 94,324 0,162 94,0 280,0" fill="url(#image-02)" /> <polygon class="svg-border" points="374,162 280,324 93,324 0,162 94,0 280,0" /> </svg> </a> </svg> <a class="info" href="//02.com"> <span class="heading">Read</span> <span class="copy">behind fenty beauty</span> <span class="cta">Read more</span> </a> </div> </div> <div class="item-position row-1 col-3" data-item="3" data-row="1" data-col="3"> <div class="item"> <svg class="svg-wrap" viewBox="0 0 374 324"> <a class="svg-link" xlink:href="//03.com"> <svg class="svg-shape" viewBox="0 0 374 324"> <polygon class="svg-image svg-image-animated svg-image-animated-3" points="374,162 280,324 94,324 0,162 94,0 280,0" fill="url(#image-03)" /> <polygon class="svg-border" points="374,162 280,324 93,324 0,162 94,0 280,0" /> </svg> </a> </svg> <a class="info" href="//03.com"> <span class="heading">Shop</span> <span class="copy">pro filt'r</span> <span class="cta">Shop now</span> </a> </div> </div> <div class="item-position row-3 col-1" data-item="4" data-row="3" data-col="1"> <div class="item"> <svg class="svg-wrap" viewBox="0 0 374 324"> <a class="svg-link" xlink:href="//04.com"> <svg class="svg-shape" viewBox="0 0 374 324"> <polygon class="svg-image" points="374,162 280,324 94,324 0,162 94,0 280,0" fill="url(#image-04)" /> <polygon class="svg-border" points="374,162 280,324 93,324 0,162 94,0 280,0" /> </svg> </a> </svg> <a class="info" href="//04.com"> <span class="heading">Find your match</span> <span class="copy">fenty shade finder</span> <span class="cta">Read more</span> </a> </div> </div> <div class="item-position row-4 col-2" data-item="5" data-row="4" data-col="2"> <div class="item"> <svg class="svg-wrap" viewBox="0 0 374 324"> <a class="svg-link" xlink:href="//05.com"> <svg class="svg-shape" viewBox="0 0 374 324"> <polygon class="svg-image svg-image-animated svg-image-animated-5" points="374,162 280,324 94,324 0,162 94,0 280,0" fill="url(#image-05)" /> <polygon class="svg-border" points="374,162 280,324 93,324 0,162 94,0 280,0" /> </svg> </a> </svg> <a class="info" href="//05.com"> <span class="heading">Shop</span> <span class="copy">killawatt highlighters</span> <span class="cta">Shop now</span> </a> </div> </div> <div class="item-position row-3 col-3" data-item="6" data-row="3" data-col="3"> <div class="item"> <svg class="svg-wrap" viewBox="0 0 374 324"> <a class="svg-link" xlink:href="//06.com"> <svg class="svg-shape" viewBox="0 0 374 324"> <polygon class="svg-image" points="374,162 280,324 94,324 0,162 94,0 280,0" fill="url(#image-06)" /> <polygon class="svg-border" points="374,162 280,324 93,324 0,162 94,0 280,0" /> </svg> </a> </svg> <a class="info" href="//06.com"> <span class="heading">How-to</span> <span class="copy">fenty faces</span> <span class="cta">Read more</span> </a> </div> </div> </div> <!-- <ul class="log" id="log"></ul> --> <script> // $(".shapes").on('chooseShape', function(){ // console.log('chooseShape'); // }); function addClass () { } $('body').on('mousemove', _.throttle(function(e){ // set up vars var $wrap = $(".items-wrapper"); var $item = $(e.target).parentsUntil( $wrap, ".item" ); var $itemBox = $item.parent(); var activeRow = $wrap.data('activerow'); var activeCol = $wrap.data('activecol'); // if ($itemBox.length) { var itemRow = $itemBox.data('row'); var itemCol = $itemBox.data('col'); if (activeRow !== itemRow) { $wrap .data('activerow', itemRow) .removeClass('active-row-'+activeRow); // console.log(typeof itemRow); // console.log(itemRow); if ( activeRow === 0 || activeRow === '0' ) { $wrap.addClass('active-row-'+itemRow); } else { window.setTimeout(function(){ $wrap.addClass('active-row-'+itemRow); }, 300); } } if (activeCol !== itemCol) { $wrap .data('activecol', itemCol) .removeClass('active-col-'+activeCol); // console.log(typeof itemCol); // console.log(itemCol); if ( activeCol === 0 || activeCol === '0' ) { $wrap.addClass('active-col-'+itemCol); } else { window.setTimeout(function(){ $wrap.addClass('active-col-'+itemCol); }, 300); } } } else { $wrap .data('activerow', 0) .data('activecol', 0) .removeClass('active-row-'+activeRow) .removeClass('active-col-'+activeCol); } // console.log(e.target); // $(".shapes").trigger('chooseShape'); }, 500)); $('a').click(function(e){ // var msg = ".click() called at " + e.pageX + ", " + e.pageY; // console.log(msg); // console.log(this); // $('#log').append('<div>'+msg+'</div>'); if ( $(this).parents('.item-position').hasClass('is-first-trigger') ) { $(this).parents('.item-position').removeClass('is-first-trigger'); } else { $('.item-position').removeClass('is-first-trigger'); $(this).parents('.item-position').addClass('is-first-trigger'); e.preventDefault(); } }); </script>

@charset "UTF-8"; /* ===== DEFINITIONS ============================================================================ */ @keyframes breathe { 10% { transform: matrix(1, 0, 0, 1, 0, 0); } 100% { transform: matrix(1.05, 0, 0, 1.05, -8, -8); } } /* ===== BODY =================================================================================== */ body { background: #f5e3dc; margin: 0; padding: 0; overflow: hidden; } /* ===== ITEM LISTINGS ========================================================================== */ .items-wrapper { position: relative; } .item { width: 374px; height: 324px; position: relative; -webkit-clip-path: url(#clip-hexagon); clip-path: url(#clip-hexagon); will-change: transform; /* required for safari clip path bug */ } @media screen and (max-width: 979px) { .items-wrapper { height: 180vw; } .item-position { position: relative; width: 10vw; height: 52vw; box-sizing: border-box; } .item { position: absolute; } .item { width: 55vw; height: auto; } .item-position:nth-child(1), .item-position:nth-child(3), .item-position:nth-child(5) { float: left; clear: left; } .item-position:nth-child(2), .item-position:nth-child(4), .item-position:nth-child(6) { float: right; clear: right; } .item-position:nth-child(2) .item, .item-position:nth-child(4) .item, .item-position:nth-child(6) .item { right: 0; top: 26vw; } } @media screen and (min-width: 980px) { .items-wrapper { margin: 0 auto; width: 980px; height: 840px; } .item-position { position: absolute; transform: translate(0, 0); transition-timing-function: ease; transition: all .5s; } .item-position:nth-child(1) { top: 0; left: 0; } .item-position:nth-child(2) { top: 172px; left: 303px; } .item-position:nth-child(3) { top: 0; left: 606px; } .item-position:nth-child(4) { top: 344px; left: 0; } .item-position:nth-child(5) { top: 516px; left: 303px; } .item-position:nth-child(6) { top: 344px; left: 606px; } .active-row-1 .row-2 { margin-top: -10px; } .active-row-1 .row-3 { margin-top: -20px; } .active-row-1 .row-4 { margin-top: -30px; } .active-row-2 .row-1 { margin-top: 10px; } .active-row-2 .row-3 { margin-top: -10px; } .active-row-2 .row-4 { margin-top: -20px; } .active-row-3 .row-1 { margin-top: 20px; } .active-row-3 .row-2 { margin-top: 10px; } .active-row-3 .row-4 { margin-top: -10px; } .active-row-4 .row-1 { margin-top: 30px; } .active-row-4 .row-2 { margin-top: 20px; } .active-row-4 .row-3 { margin-top: 10px; } .active-col-1 .col-2 { margin-left: -23px; } .active-col-1 .col-3 { margin-left: -46px; } .active-col-2 .col-1 { margin-left: 23px; } .active-col-2 .col-3 { margin-left: -23px; } .active-col-3 .col-1 { margin-left: 46px; } .active-col-3 .col-2 { margin-left: 23px; } } /* ===== ITEM DETAILS: SVG ==================================================================== */ .svg-image { transform: translate(0, 0); stroke: none; } .svg-border { fill: none; stroke: #f5e3dc; stroke-width: 4px; } .svg-image-animated { animation-name: breathe; animation-duration: 4s; animation-direction: alternate; animation-iteration-count: infinite; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .svg-image-animated-1 { animation-delay: 0s; } .svg-image-animated-3 { animation-delay: 2s; } .svg-image-animated-5 { animation-delay: 4s; } @media screen and (max-width: 979px) { .shape { width: 55vw; height: auto; } .is-first-trigger .svg-border { fill: rgba(0, 0, 0, 0.75); } } /* ===== ITEM DETAILS: LINK TEXT ================================================================ */ .info .heading, .info .copy { font-size: 13px; line-height: 16px; color: #fff; display: block; } .info .heading { font-family: FB; } .info .copy { text-transform: uppercase; font-family: FBD; letter-spacing: 0.1em; padding-top: 4px; } @media screen and (max-width: 979px) { .info { position: absolute; top: 0; bottom: 0; left: 25%; right: 25%; flex-direction: column; align-items: center; text-decoration: none; justify-content: center; text-align: center; display: none; } .is-first-trigger .info { display: flex; } .info .heading { display: none; } .info .copy { font-size: 18px; line-height: 24px; margin-bottom: 5px; } .info .cta { font-size: 16px; line-height: 16px; color: #fff; font-family: FL; text-decoration: underline; } } @media screen and (min-width: 980px) { .info { position: absolute; bottom: 0; display: block; left: 25%; right: 25%; padding: 0 0 10px 3px; text-decoration: none; } .info .heading:after { content: " /"; } .info .cta { display: none; } } /* ===== DEBUGGER =============================================================================== */ .log { color: #666; background: #fff; padding: 5px; font-family: monospace; height: 300px; overflow: auto; font-size: 10px; line-height: 12px; }