Maurizio De Paoli

/* Create a CTA Section Expanding on Scroll */ /* hide the horizontal scrollbar when CTA section expands */ /* CTA section */ .dvcs-highlightable { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; z-index: 5; -webkit-transition: -webkit-transform 500ms ease-in-out; transition: -webkit-transform 500ms ease-in-out; -o-transition: transform 500ms ease-in-out; transition: transform 500ms ease-in-out; transition: transform 500ms ease-in-out, -webkit-transform 500ms ease-in-out; transition: transform 500ms ease-in-out, -webkit-transform 500ms ease-in-out; } /* expanded CTA section */ .dvcs-highlightable.dvcs-highlighted { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } /* the row containing the SVG image */ .dvcs_card_featured_svg { position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: -1; } /* SVG image */ .dvcs_card_featured_svg svg { position: absolute; width: 60%; margin-top: -15%; margin-left: -13%; -webkit-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg); } .dvcs-highlightable .dvcs_card_featured_svg svg { opacity: 0.2; } /* the row with CTA info */ .dvcs_card_featured { -webkit-box-shadow: 0 48px 48px -32px rgba(7,7,7,0.2), 0 96px 96px -64px rgba(3,3,5,0.4); box-shadow: 0 48px 48px -32px rgba(0,0,0,0.2), 0 96px 96px -64px rgba(167,167,167,0.4); overflow: visible !important; -webkit-transition: 300ms all cubic-bezier(0.4, 0, 0.2, 1); -o-transition: 300ms all cubic-bezier(0.4, 0, 0.2, 1); transition: 300ms all cubic-bezier(0.4, 0, 0.2, 1); z-index: unset; } /* expanded row with CTA info */ .dvcs-highlighted .dvcs_card_featured { -webkit-box-shadow: 0 48px 48px -32px rgba(0,0,0,0.2), 0 96px 96px -64px rgba(0,0,0,0.6); box-shadow: 0 48px 48px -32px rgba(23, 16, 159, 0.2), 0 96px 96px -64px rgba(2,2,3,0.6); } /* background circle shapes */ .dvcs_card_featured:before, .dvcs_card_featured:after { content: ""; display: block; position: absolute; z-index: -1; border-radius: 50%; } .dvcs_card_featured:before { width: 32px; height: 32px; background: rgba(241,240,240,0.5); top: -80px; right: 30%; } .dvcs_card_featured:after { visibility: visible; width: 440px; height: 440px; background: rgba(222,222,222,0.19); right: -100px; bottom: -80px; -webkit-transition: 300ms all cubic-bezier(0.4, 0, 0.2, 1); -o-transition: 300ms all cubic-bezier(0.4, 0, 0.2, 1); transition: 300ms all cubic-bezier(0.4, 0, 0.2, 1); } .dvcs-highlighted .dvcs_card_featured:before { background: #ffad00; } .dvcs-highlighted .dvcs_card_featured:after { background: #ffad00; } /* CTA background overlay */ .dvcs-highlighted-overlay { opacity: 0; visibility: hidden; pointer-events: none; position: fixed; top: 0; bottom: 0; left: 0; right: 0; -webkit-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; z-index: 4; } /* expanded CTA background overlay */ .dvcs-highlighted-hidden .dvcs-highlighted-overlay { opacity: 1; visibility: visible; pointer-events: initial; } /* Create a CTA Section Expanding on Scroll */ /* * jQuery throttle / debounce - v1.1 - 3/7/2010 * http://benalman.com/projects/jquery-throttle-debounce-plugin/ * * Copyright (c) 2010 "Cowboy" Ben Alman * Dual licensed under the MIT and GPL licenses. * http://benalman.com/about/license/ */ (function(b,c){var $=b.jQuery||b.Cowboy||(b.Cowboy={}),a;$.throttle=a=function(e,f,j,i){var h,d=0;if(typeof f!=="boolean"){i=j;j=f;f=c}function g(){var o=this,m=+new Date()-d,n=arguments;function l(){d=+new Date();j.apply(o,n)}function k(){h=c}if(i&&!h){l()}h&&clearTimeout(h);if(i===c&&m>e){l()}else{if(f!==true){h=setTimeout(i?k:l,i===c?e-m:e)}}}if($.guid){g.guid=j.guid=j.guid||$.guid++}return g};$.debounce=function(d,e,f){return f===c?a(d,e,false):a(d,f,e!==false)}})(this); (function($){ let $body = $("body"), $highlightable = $(".et_pb_section.dvcs-highlightable"), highlighted_class = "dvcs-highlighted", highlighted_hidden_class = "dvcs-highlighted-hidden"; if ($highlightable.length) { $(window).scroll($.throttle(100, function() { var scroll = $(window).scrollTop(), itemHeight = $highlightable.height(); highlightStart = $highlightable.offset().top - 600; highlightEnd = $highlightable.offset().top + itemHeight / 4; if (scroll > highlightStart & scroll < highlightEnd) { $highlightable.addClass(highlighted_class); $body.addClass(highlighted_hidden_class); } else { $highlightable.removeClass(highlighted_class); $body.removeClass(highlighted_hidden_class); } if ($(window).scrollTop() + $(window).height() > $(document).height() - 50) { $highlightable.removeClass(highlighted_class); $body.removeClass(highlighted_hidden_class); } })); } })(jQuery);