Expanding Background

HTML
<body> <main> <h1>Lorem Ipsum</h1> <p> Donec nec massa pharetra, venenatis ex sed, lobortis dui. In congue arcu non odio ultricies sodales. Vivamus mauris sapien, posuere id sollicitudin quis, feugiat et tortor. Maecenas elementum magna eu tellus pharetra, ullamcorper interdum urna ullamcorper. Cras massa quam, bibendum at varius nec, suscipit at tellus. Praesent finibus lacus eget facilisis consectetur. Nulla aliquam gravida nibh in finibus. Maecenas lacinia mollis massa, a suscipit metus fringilla et. Phasellus suscipit scelerisque sapien id pharetra. Mauris faucibus nibh ut ante euismod consequat. Maecenas faucibus tincidunt metus, eget varius odio elementum vel. Quisque elementum mi ut elit auctor, vitae blandit nibh pretium. </p> <p> Duis fermentum hendrerit ornare. Nam tincidunt a lorem et ullamcorper. Suspendisse potenti. Fusce id scelerisque orci, quis faucibus ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam eget mattis tortor. Vivamus tempus at mauris at lobortis. Pellentesque dapibus eu lectus eu faucibus. </p> <h2>Lorem Ipsum</h2> <p> Suspendisse non convallis est. Fusce cursus metus quis laoreet bibendum. Maecenas nisi justo, aliquam lobortis ante in, dignissim tempus ipsum. Donec felis mi, vulputate at dolor nec, porta placerat ex. Sed at magna consectetur, posuere orci aliquam, vehicula velit. Etiam mollis lacinia massa, nec vestibulum nunc ullamcorper eu. Nullam venenatis augue eu maximus viverra. Mauris non nunc ac risus rhoncus lobortis non quis ipsum. Donec at augue blandit diam consectetur condimentum et quis mauris. Aliquam vitae sapien non turpis eleifend rhoncus sit amet eget justo. </p> <p> Integer pharetra dolor ut feugiat elementum. Maecenas vel massa convallis, accumsan orci vitae, convallis nisi. Vestibulum at augue odio. In eu rutrum purus. Nunc lobortis eros vitae arcu maximus, vel lacinia quam auctor. Aenean interdum nisi quis tellus eleifend lacinia faucibus porttitor felis. Nunc ut faucibus nisi. </p> <p> Praesent vestibulum feugiat venenatis. Nulla in urna posuere, tempus justo ac, elementum urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse convallis vestibulum nisi, eget rhoncus leo convallis a. Proin at aliquet nisi. Nullam sit amet nibh vel nisi elementum ultrices. Morbi venenatis elementum sollicitudin. Vivamus vitae nisl at dolor vehicula rutrum et eget dui. Aenean egestas mauris at mauris vestibulum imperdiet. Cras id euismod metus. In sodales lacus luctus tortor rhoncus tempus. Proin at erat eu diam ultrices imperdiet a quis sem. Nam sit amet libero et diam vulputate sagittis. </p> <p> Morbi eget orci venenatis, sagittis nunc non, laoreet diam. Proin sit amet tincidunt ante. Ut molestie libero in lobortis porta. Cras elementum scelerisque tortor sit amet tempor. Suspendisse vitae pulvinar libero, fermentum sollicitudin odio. Ut ligula nunc, volutpat et libero non, convallis vehicula ante. Donec sit amet magna eu lacus rhoncus sagittis quis nec odio. Vestibulum facilisis suscipit diam viverra semper. Maecenas consequat mi diam, sed lobortis dolor pellentesque nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <h2>Lorem Ipsum</h2> <p> Phasellus bibendum metus ac ex dignissim, a finibus tellus tristique. Quisque finibus turpis mi, eu dignissim nulla blandit non. Donec ullamcorper, elit sed consectetur vehicula, lacus urna semper erat, ac scelerisque dui orci et elit. Proin accumsan arcu nisi, id aliquam turpis rutrum sit amet. Donec auctor ipsum quis sollicitudin auctor. Mauris tristique ligula sed nulla feugiat faucibus. Nulla pretium nec tortor eu finibus. Pellentesque a feugiat tellus. Etiam mollis quis sem nec aliquet. </p> <p> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Proin tincidunt mauris at risus volutpat pretium. Aliquam eleifend lorem nibh, eget egestas libero mattis ac. Donec purus arcu, rhoncus nec varius quis, iaculis vitae ex. Sed gravida metus in quam sollicitudin pharetra. Sed vestibulum, dolor ac volutpat tincidunt, justo turpis condimentum felis, et sagittis ipsum nulla eget turpis. Etiam quis luctus ante, ac gravida mauris. Nunc vitae augue non diam pretium ullamcorper sit amet at tortor. Pellentesque efficitur non diam in imperdiet. </p> <p> Sed id egestas lacus. Proin vel aliquet dolor, nec pulvinar nisi. Aenean bibendum orci enim, et vehicula urna porttitor sed. Duis id lobortis urna. Nulla et mattis felis. Donec aliquet, purus eu venenatis iaculis, leo mauris cursus felis, commodo pharetra ante risus non nisi. Morbi in orci vel dolor vulputate fringilla. Etiam ut tristique turpis, quis dapibus justo. Proin rhoncus, dui et pellentesque varius, dui odio semper neque, eu congue mauris erat at dolor. In euismod, ligula id mattis tempor, tellus ante sodales turpis, et mollis arcu libero vel mauris. Sed at ullamcorper sem. Ut commodo sapien sed lacus condimentum, id dapibus est lobortis. Nullam et justo ac eros vehicula malesuada. Integer pretium tortor vel libero molestie rhoncus. Aliquam pharetra tortor sit amet nisl porttitor tincidunt. </p> <p> Sed tempor scelerisque eros nec vulputate. Aenean elementum, ligula nec euismod aliquam, ante tellus vulputate eros, a faucibus magna enim fringilla risus. Mauris in elementum lectus. Maecenas a pretium libero. Mauris quis felis interdum, efficitur urna at, faucibus justo. Aliquam sit amet dapibus quam, vel elementum massa. Donec velit quam, condimentum id velit vitae, sagittis ornare metus. Donec vehicula accumsan mauris ac viverra. Suspendisse rhoncus condimentum elit nec scelerisque. Integer rhoncus nulla eu dui sollicitudin posuere. Pellentesque tempus at elit ut tempor. Cras vitae augue porta, consectetur augue dignissim, vestibulum sem. Morbi ante ipsum, elementum fringilla egestas et, pharetra id sapien. Mauris efficitur tellus sit amet elit facilisis porttitor. Mauris molestie nisi id iaculis iaculis. </p> <p> Quisque lacus lectus, tempor euismod neque ac, cursus faucibus urna. Ut iaculis elit tortor, in aliquam nibh pellentesque ac. Nam ultricies scelerisque purus, sit amet posuere lacus bibendum nec. Quisque pellentesque nunc quis libero sagittis aliquet. Proin sit amet dui ornare, hendrerit purus vel, egestas ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus turpis quis lacinia euismod. Pellentesque varius maximus magna vitae placerat. Quisque elementum dolor eget ex sodales elementum. Etiam interdum consectetur metus, a suscipit quam finibus eget. Aliquam volutpat dolor vel velit egestas porttitor in quis mi. Aenean tincidunt id est eget ornare. Cras mi diam, sagittis non orci in, mollis hendrerit quam. Maecenas lobortis, lectus eu tristique finibus, urna felis imperdiet dolor, ac ultrices ipsum diam et ante. Donec eu pellentesque nisl, eu ullamcorper felis. </p> <p> Alice opened the door and found that it led into a small passage, not much larger than a rat-hole: she knelt down and looked along the passage into the loveliest garden you ever saw. How she longed to get out of that dark hall, and wander about among those beds of bright flowers and those cool fountains, but she could not even get her head through the doorway; 'and even if my head would go through,' thought poor Alice, 'it would be of very little use without my shoulders. Oh, how I wish I could shut up like a telescope! I think I could, if I only knew how to begin.' For, you see, so many out-of-the-way things had happened lately, that Alice had begun to think that very few things indeed were really impossible. </p> <h2>Lorem Ipsum</h2> <p> Morbi eu ex mi. Integer quis tempus ante, nec fermentum nibh. Vivamus sed vehicula leo. Aliquam sed laoreet nisl, in rutrum augue. Donec vitae fermentum neque. Aliquam viverra auctor blandit. Aliquam sed leo a magna ultrices varius a quis urna. Donec enim tortor, hendrerit vitae aliquam in, vulputate nec risus. </p> <p> Nullam lacinia at nisi quis ullamcorper. Sed sed elit eget ipsum tempus feugiat. Nulla fermentum dapibus purus, et varius massa sollicitudin vitae. Curabitur nec lectus turpis. Aliquam erat volutpat. Mauris ac erat et augue porta ullamcorper. Ut elementum, felis at sollicitudin ullamcorper, metus mauris semper diam, ac venenatis turpis felis at erat. Morbi ut nulla eu lacus dignissim blandit. Cras malesuada purus ut purus vestibulum volutpat. Donec elementum metus eros, ut vulputate nisl ullamcorper et. Suspendisse malesuada tortor turpis, vel sagittis massa posuere a. Sed porta ipsum vel elit auctor accumsan. </p> </main> <div class="diagonal-bg"> <svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><line x1='100%' y1='0' x2='1' y2='100%' stroke='#d35400' stroke-width='30%'/></svg> </div> </body>
SCSS
.diagonal-bg { position: fixed; top: 0; z-index: -1; width: 100%; height: 100%; } body { background: #333; color: #fff; height: 100%; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4{ font-family: 'Playfair Display', serif; } h1 { font-size: 4rem; line-height: 1.25; text-transform: uppercase; } p { margin-top: 0; margin-bottom: 2em; font-size: 18px; font-family: 'Raleway', sans-serif; } main { width: 70%; margin: 5em auto; @media ( min-width: 400px ) { width: 65%; } @media ( min-width: 600px ) { width: 50%; } h1 { text-align: center; } }
JAVASCRIPT
$(window).scroll(function() { var scroll = $(window).scrollTop(); $(".diagonal-bg svg line").attr("stroke-width", ((30 + scroll/10) + "%")); });
Expand for more options Login