The Swan. - SCSS Overlay Affect

HTML
<div class="wrapper"> <div class="parent"> <div class="child"> <div class="content"> <a class="overlay" href="#">The Swan.</a> </div> </div> </div> <div class="text"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in ligula non turpis scelerisque finibus. Ut laoreet sapien eu velit euismod, eget volutpat sapien consectetur. Donec dictum tincidunt nisi pharetra rutrum. Suspendisse quis euismod orci, eget malesuada sapien. <a class="overlay" href="#">Donec sit amet</a> risus a leo euismod blandit vel et purus. Donec imperdiet sem a tortor maximus lobortis. Aenean at dolor dapibus, cursus eros id, convallis leo. Cras ipsum ante, cursus eu ante sed, sollicitudin varius enim. <a class="overlay" href="#">Quisque nec eleifend purus</a>, ac rhoncus eros. Donec facilisis ex sed odio pellentesque, vitae finibus est blandit. Etiam mattis ut nunc ut pharetra. Nam dapibus a mauris sed ullamcorper. Ut ultricies sollicitudin tortor vel egestas. </p><p> Maecenas non tristique odio. Nam nunc quam, auctor id nulla rutrum, tristique blandit arcu. Quisque posuere nisl diam, sed vulputate ligula pretium a. Cras dignissim quam ac maximus cursus. Ut accumsan tortor ac nunc convallis egestas. <a class="overlay" href="#">Nulla eget nisi venenatis</a>, rutrum massa et, placerat erat. Curabitur pulvinar velit sit amet enim tincidunt dictum. Morbi vulputate luctus scelerisque. </p><p> Sed maximus ante sed fringilla gravida. Maecenas posuere imperdiet augue sed rhoncus. Etiam tincidunt pretium tellus ac pharetra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc pulvinar felis sed nisi ullamcorper viverra. Aliquam tincidunt, massa posuere ornare fringilla, mauris purus dictum sapien, eget tincidunt mi arcu quis arcu. Praesent ut nisl ornare, congue ligula eu, sodales dui. Pellentesque libero metus, maximus nec lectus in, finibus venenatis purus. Donec sit amet eleifend justo, finibus scelerisque turpis. Cras gravida justo sed enim semper, aliquam porta erat dignissim. Quisque eleifend, turpis vel vehicula interdum, sem enim ultricies diam, in bibendum nulla nulla et mi. Vestibulum sed felis ac augue aliquet commodo nec ac eros. </p><p> Cras tincidunt, velit sit amet euismod commodo, nisi erat accumsan purus, eget gravida velit lacus vel nisi. Nulla pretium odio pharetra posuere gravida. Quisque nunc lectus, mattis eu rutrum non, convallis ac neque. Suspendisse consectetur tortor eu justo eleifend, eu hendrerit felis scelerisque. Vestibulum ut lectus varius eros congue rhoncus. Quisque porta nunc mi, a sodales erat molestie ut. In commodo egestas augue eget tempor. Donec erat mi, molestie quis maximus id, viverra vel felis. Etiam vel ligula eros. </p><p> Morbi tempor neque in consectetur sodales. Etiam ex dui, porttitor vitae augue quis, laoreet suscipit nibh. Pellentesque aliquet eu sem et tristique. Sed justo ex, ullamcorper id est at, suscipit porttitor elit. Sed congue, elit ut fermentum commodo, mi mi aliquam dui, eu molestie tellus magna at lorem. Aliquam bibendum nulla eu libero auctor, nec pretium nisl egestas. Sed iaculis sit amet leo et lobortis. Vivamus tincidunt ex nec tortor dictum efficitur. Pellentesque at ante felis. </p> </div> </div> <div class="theOverlay"> <a class='closeOverlay' href="#"><svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="#757575" d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z" /> </svg></a> <p> Sed maximus ante sed fringilla gravida. Maecenas posuere imperdiet augue sed rhoncus. Etiam tincidunt pretium tellus ac pharetra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc pulvinar felis sed nisi ullamcorper viverra. Aliquam tincidunt, massa posuere ornare fringilla, mauris purus dictum sapien, eget tincidunt mi arcu quis arcu. Praesent ut nisl ornare, congue ligula eu, sodales dui. Pellentesque libero metus, maximus nec lectus in, finibus venenatis purus. Donec sit amet eleifend justo, finibus scelerisque turpis. Cras gravida justo sed enim semper, aliquam porta erat dignissim. Quisque eleifend, turpis vel vehicula interdum, sem enim ultricies diam, in bibendum nulla nulla et mi. Vestibulum sed felis ac augue aliquet commodo nec ac eros. </p><p> Cras tincidunt, velit sit amet euismod commodo, nisi erat accumsan purus, eget gravida velit lacus vel nisi. Nulla pretium odio pharetra posuere gravida. Quisque nunc lectus, mattis eu rutrum non, convallis ac neque. Suspendisse consectetur tortor eu justo eleifend, eu hendrerit felis scelerisque. Vestibulum ut lectus varius eros congue rhoncus. Quisque porta nunc mi, a sodales erat molestie ut. In commodo egestas augue eget tempor. Donec erat mi, molestie quis maximus id, viverra vel felis. Etiam vel ligula eros. </p><p> Morbi tempor neque in consectetur sodales. Etiam ex dui, porttitor vitae augue quis, laoreet suscipit nibh. Pellentesque aliquet eu sem et tristique. Sed justo ex, ullamcorper id est at, suscipit porttitor elit. Sed congue, elit ut fermentum commodo, mi mi aliquam dui, eu molestie tellus magna at lorem. Aliquam bibendum nulla eu libero auctor, nec pretium nisl egestas. Sed iaculis sit amet leo et lobortis. Vivamus tincidunt ex nec tortor dictum efficitur. Pellentesque at ante felis. </p><p> Sed maximus ante sed fringilla gravida. Maecenas posuere imperdiet augue sed rhoncus. Etiam tincidunt pretium tellus ac pharetra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc pulvinar felis sed nisi ullamcorper viverra. Aliquam tincidunt, massa posuere ornare fringilla, mauris purus dictum sapien, eget tincidunt mi arcu quis arcu. Praesent ut nisl ornare, congue ligula eu, sodales dui. Pellentesque libero metus, maximus nec lectus in, finibus venenatis purus. Donec sit amet eleifend justo, finibus scelerisque turpis. Cras gravida justo sed enim semper, aliquam porta erat dignissim. Quisque eleifend, turpis vel vehicula interdum, sem enim ultricies diam, in bibendum nulla nulla et mi. Vestibulum sed felis ac augue aliquet commodo nec ac eros. </p><p> Cras tincidunt, velit sit amet euismod commodo, nisi erat accumsan purus, eget gravida velit lacus vel nisi. Nulla pretium odio pharetra posuere gravida. Quisque nunc lectus, mattis eu rutrum non, convallis ac neque. Suspendisse consectetur tortor eu justo eleifend, eu hendrerit felis scelerisque. Vestibulum ut lectus varius eros congue rhoncus. Quisque porta nunc mi, a sodales erat molestie ut. In commodo egestas augue eget tempor. Donec erat mi, molestie quis maximus id, viverra vel felis. Etiam vel ligula eros. </p><p> Morbi tempor neque in consectetur sodales. Etiam ex dui, porttitor vitae augue quis, laoreet suscipit nibh. Pellentesque aliquet eu sem et tristique. Sed justo ex, ullamcorper id est at, suscipit porttitor elit. Sed congue, elit ut fermentum commodo, mi mi aliquam dui, eu molestie tellus magna at lorem. Aliquam bibendum nulla eu libero auctor, nec pretium nisl egestas. Sed iaculis sit amet leo et lobortis. Vivamus tincidunt ex nec tortor dictum efficitur. Pellentesque at ante felis. </p><p> Sed maximus ante sed fringilla gravida. Maecenas posuere imperdiet augue sed rhoncus. Etiam tincidunt pretium tellus ac pharetra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc pulvinar felis sed nisi ullamcorper viverra. Aliquam tincidunt, massa posuere ornare fringilla, mauris purus dictum sapien, eget tincidunt mi arcu quis arcu. Praesent ut nisl ornare, congue ligula eu, sodales dui. Pellentesque libero metus, maximus nec lectus in, finibus venenatis purus. Donec sit amet eleifend justo, finibus scelerisque turpis. Cras gravida justo sed enim semper, aliquam porta erat dignissim. Quisque eleifend, turpis vel vehicula interdum, sem enim ultricies diam, in bibendum nulla nulla et mi. Vestibulum sed felis ac augue aliquet commodo nec ac eros. </p><p> Cras tincidunt, velit sit amet euismod commodo, nisi erat accumsan purus, eget gravida velit lacus vel nisi. Nulla pretium odio pharetra posuere gravida. Quisque nunc lectus, mattis eu rutrum non, convallis ac neque. Suspendisse consectetur tortor eu justo eleifend, eu hendrerit felis scelerisque. Vestibulum ut lectus varius eros congue rhoncus. Quisque porta nunc mi, a sodales erat molestie ut. In commodo egestas augue eget tempor. Donec erat mi, molestie quis maximus id, viverra vel felis. Etiam vel ligula eros. </p><p> Morbi tempor neque in consectetur sodales. Etiam ex dui, porttitor vitae augue quis, laoreet suscipit nibh. Pellentesque aliquet eu sem et tristique. Sed justo ex, ullamcorper id est at, suscipit porttitor elit. Sed congue, elit ut fermentum commodo, mi mi aliquam dui, eu molestie tellus magna at lorem. Aliquam bibendum nulla eu libero auctor, nec pretium nisl egestas. Sed iaculis sit amet leo et lobortis. Vivamus tincidunt ex nec tortor dictum efficitur. Pellentesque at ante felis. </p> </div>
SCSS
@import url('https://fonts.googleapis.com/css?family=Dosis'); html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } html, body { height: 100%; margin: 0; font: 100px/100px 'Dosis', sans-serif; font-weight: 900; color: rgba(255, 255, 255, 1); text-shadow: 0px 0px 300px rgba(0, 0, 0, 1); -webkit-font-smoothing: antialiased; font-smoothing: antialiased; } .wrapper { height: 100%; /*transition: all 0.2s ease;*/ } .parent { width: 100%; height: 80%; position: relative; background: url("http://www.defondos.com/bulkupload/artedigitales/Arte/Digital/Cisne%20Arcoiris_800.jpg") #fff no-repeat center center; background-size: cover; .child { position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); letter-spacing: -2px; a { color: #fff; text-decoration: none; } } } a { color: rgba(50, 50, 50, 1); } .text, .theOverlay { font: 18px/32px 'Dosis', sans-serif; font-weight: 400; color: rgba(100, 100, 100, 1); text-shadow: none; width: 80%; max-width: 700px; padding: 20px 0; margin: auto; } .theOverlay { display: none; } .noScroll { overflow: hidden; } .wrappernoScroll { filter: blur(10px); } .overlayVisible { width: 80%; max-width: 80%; padding: 100px; top: 10%; left: 10%; bottom: 10%; right: 10%; display: block; overflow-y: scroll; position: fixed; background: rgba(255, 255, 255, 0.75); } .closeOverlay { font: 20px/20px 'Dosis', sans-serif; font-weight: 900; color: #000; text-decoration: none; display: block; position: fixed; top: 15%; right: 15%; }
JAVASCRIPT
$("a.overlay").on('click', showOverlay); $(window).click(hideOverlay); $(".closeOverlay").on('click', hideOverlay); $(".theOverlay").on('click', e => e.stopPropagation() ) function showOverlay(e) { $(".theOverlay").addClass("overlayVisible"); $(".wrapper").addClass("wrappernoScroll"); $("body").addClass("noScroll"); e.stopPropagation(); e.preventDefault(); } function hideOverlay(e) { $(".theOverlay").removeClass("overlayVisible"); $(".wrapper").removeClass("wrappernoScroll"); $("body").removeClass("noScroll"); e.preventDefault(); }
Expand for more options Login