tuanphan Posted July 10, 2021 Share Posted July 10, 2021 On 7/9/2021 at 2:45 AM, cdubarr said: Hello, I've been at this for a week and I've managed this far. I will be changing the photo, but how do I add this to CSS in squarespace? https://codepen.io/mjdubarr/pen/GRmZLzE Code Block <div class="skw-pages"> <div class="skw-page skw-page-1 active"> <div class="skw-page__half skw-page__half--left"> <div class="skw-page__skewed"> <div class="skw-page__content"></div> </div> </div> <div class="skw-page__half skw-page__half--right"> <div class="skw-page__skewed"> <div class="skw-page__content"> </div> </div> </div> </div> <div class="skw-page skw-page-2"> <div class="skw-page__half skw-page__half--left"> <div class="skw-page__skewed"> <div class="skw-page__content"> </div> </div> </div> <div class="skw-page__half skw-page__half--right"> <div class="skw-page__skewed"> <div class="skw-page__content"></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <style> .skw-pages { overflow: hidden; position: relative; height: 100vh; } .skw-page { position: absolute; left: 0; top: 0; width: 100%; } .skw-page__half { position: absolute; top: 0; width: 50%; height: 100vh; transition: transform 1s; } .skw-page__half--left { left: 0; transform: translate3d(-32.4vh, 100%, 0); } .skw-page__half--right { left: 50%; transform: translate3d(32.4vh, -100%, 0); } .skw-page.active .skw-page__half { transform: translate3d(0, 0, 0); } .skw-page__skewed { overflow: hidden; position: absolute; top: 0; width: 140%; height: 100%; transform: skewX(-18deg); background: #000; } .skw-page__half--left .skw-page__skewed { left: -40%; } .skw-page__half--right .skw-page__skewed { right: -40%; } .skw-page__content { display: flex; align-items: center; justify-content: center; flex-flow: column wrap; position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 0 30%; color: #fff; transform: skewX(18deg); transition: transform 1s, opacity 1s; background-size: cover; } .skw-page__half--left .skw-page__content { padding-left: 30%; padding-right: 30%; transform-origin: 100% 0; } .skw-page__half--right .skw-page__content { padding-left: 30%; padding-right: 30%; transform-origin: 0 100%; } .skw-page.inactive .skw-page__content { opacity: 0.5; transform: skewX(18deg) scale(0.95); } .skw-page-1 .skw-page__half--left .skw-page__content { background-image: url("https://static1.squarespace.com/static/60dcee5190edb42edbef26cd/t/60e75cbb799f350e2a527693/1625775291628/row-1-col-1.png"); } .skw-page-1 .skw-page__half--left .skw-page__content background-image { size: 2%; } .skw-page-1 .skw-page__half--right .skw-page__content { background-image: url("https://static1.squarespace.com/static/60dcee5190edb42edbef26cd/t/60e75c733eac0c5b60adc10f/1625775220029/row-1-col-2.png"); } .skw-page-2 .skw-page__half--left .skw-page__content { background-image: url("https://static1.squarespace.com/static/60dcee5190edb42edbef26cd/t/60e75cbb799f350e2a527693/1625775291628/row-1-col-1.png"); } .skw-page-2 .skw-page__half--right .skw-page__content { background-image: url("https://static1.squarespace.com/static/60dcee5190edb42edbef26cd/t/60e75c733eac0c5b60adc10f/1625775220029/row-1-col-2.png"); } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { var curPage = 4; var numOfPages = $(".skw-page").length; var animTime = 1000; var scrolling = false; var pgPrefix = ".skw-page-"; function pagination() { scrolling = true; $(pgPrefix + curPage).removeClass("inactive").addClass("active"); $(pgPrefix + (curPage - 1)).addClass("inactive"); $(pgPrefix + (curPage + 1)).removeClass("active"); setTimeout(function() { scrolling = false; }, animTime); }; function navigateUp() { if (curPage === 1) return; curPage--; pagination(); }; function navigateDown() { if (curPage === numOfPages) return; curPage++; pagination(); }; $(document).on("mousewheel DOMMouseScroll", function(e) { if (scrolling) return; if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) { navigateUp(); } else { navigateDown(); } }); $(document).on("keydown", function(e) { if (scrolling) return; if (e.which === 38) { navigateUp(); } else if (e.which === 40) { navigateDown(); } }); }); </script> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
ievavi Posted July 26, 2021 Share Posted July 26, 2021 @tuanphan, would you help me to implement this code from codepen too?https://codepen.io/arjancodes/pen/gbweYB Mysite: www.ievaviphoto.com Link to comment
tuanphan Posted July 27, 2021 Share Posted July 27, 2021 18 hours ago, ievavi said: @tuanphan, would you help me to implement this code from codepen too?https://codepen.io/arjancodes/pen/gbweYB Mysite: www.ievaviphoto.com Add a Code Block <ul class="codepen"> <li> <div class="section-title"> <h2>Section 1</h2> </div> <div class="section-content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit voluptatum temporibus dicta reprehenderit tempore quisquam consequuntur porro omnis laboriosam praesentium at et sapiente, provident sit! Suscipit recusandae, ab ratione dignissimos.</p> </div> </li> <li class="active"> <div class="section-title"> <h2>Section 2</h2> </div> <div class="section-content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora totam delectus, eius nostrum aspernatur voluptas enim fugit ipsa magni voluptatem, odio sit accusamus vel id, commodi consequuntur possimus repellat necessitatibus!</p> </div> </li> <li> <div class="section-title"> <h2>Section 3</h2> </div> <div class="section-content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur saepe vel facilis quae nihil ad aspernatur ex delectus. Tenetur nulla voluptates similique quos, quia possimus, magnam esse natus quis ipsa.</p> </div> </li> <li> <div class="section-title"> <h2>Section 4</h2> </div> <div class="section-content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, optio illo, delectus deleniti animi accusamus. Laboriosam maiores totam provident aliquam. Unde, incidunt amet officia a obcaecati, ducimus at molestiae nemo.</p> </div> </li> </ul> <style> ul.codepen { display: flex; min-height: 100vh; max-height: 100vh; margin: 0; padding: 0; overflow: hidden; list-style-type: none; } ul.codepen li { flex: 1; display: flex; align-items: stretch; padding: 20px; background: #E74C3C; cursor: pointer; transition: all 0.5s ease; } ul.codepen li:hover { background: #e53f2e; } ul.codepen li.active { flex: 5; background: #fff; cursor: default; } ul.codepen li.active h2 { color: #E74C3C; } ul.codepen li.active .section-content { flex: 4; opacity: 1; transform: scaleX(1); color: #E74C3C; } ul.codepen li .section-title { flex: 1; display: flex; align-items: center; width: 100%; margin: 0; padding: 0; text-align: center; color: white; } ul.codepen li .section-title h2 { margin: 0; transform: rotate(-90deg); white-space: nowrap; } ul.codepen li .section-content { flex: 1; display: flex; align-items: center; margin: 0; padding: 0; opacity: 0; transition: all 0.25s 0.1s ease-out; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> var section = $('li'); function toggleAccordion() { section.removeClass('active'); $(this).addClass('active'); } section.on('click', toggleAccordion); </script> nataniellam 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
ievavi Posted July 27, 2021 Share Posted July 27, 2021 2 minutes ago, tuanphan said: <ul class="codepen"> <li> <div class="section-title"> <h2>Section 1</h2> </div> <div class="section-content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit voluptatum temporibus dicta reprehenderit tempore quisquam consequuntur porro omnis laboriosam praesentium at et sapiente, provident sit! Suscipit recusandae, ab ratione dignissimos.</p> </div> </li> <li class="active"> <div class="section-title"> <h2>Section 2</h2> </div> <div class="section-content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora totam delectus, eius nostrum aspernatur voluptas enim fugit ipsa magni voluptatem, odio sit accusamus vel id, commodi consequuntur possimus repellat necessitatibus!</p> </div> </li> <li> <div class="section-title"> <h2>Section 3</h2> </div> <div class="section-content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur saepe vel facilis quae nihil ad aspernatur ex delectus. Tenetur nulla voluptates similique quos, quia possimus, magnam esse natus quis ipsa.</p> </div> </li> <li> <div class="section-title"> <h2>Section 4</h2> </div> <div class="section-content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, optio illo, delectus deleniti animi accusamus. Laboriosam maiores totam provident aliquam. Unde, incidunt amet officia a obcaecati, ducimus at molestiae nemo.</p> </div> </li> </ul> <style> ul.codepen { display: flex; min-height: 100vh; max-height: 100vh; margin: 0; padding: 0; overflow: hidden; list-style-type: none; } ul.codepen li { flex: 1; display: flex; align-items: stretch; padding: 20px; background: #E74C3C; cursor: pointer; transition: all 0.5s ease; } ul.codepen li:hover { background: #e53f2e; } ul.codepen li.active { flex: 5; background: #fff; cursor: default; } ul.codepen li.active h2 { color: #E74C3C; } ul.codepen li.active .section-content { flex: 4; opacity: 1; transform: scaleX(1); color: #E74C3C; } ul.codepen li .section-title { flex: 1; display: flex; align-items: center; width: 100%; margin: 0; padding: 0; text-align: center; color: white; } ul.codepen li .section-title h2 { margin: 0; transform: rotate(-90deg); white-space: nowrap; } ul.codepen li .section-content { flex: 1; display: flex; align-items: center; margin: 0; padding: 0; opacity: 0; transition: all 0.25s 0.1s ease-out; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> var section = $('li'); function toggleAccordion() { section.removeClass('active'); $(this).addClass('active'); } section.on('click', toggleAccordion); </script> That's amazing stuff! Thanks so much! Any chance do you know how to appropriate this for mobile screens? (that it would fo horizontal rather than vertical?) Link to comment
tuanphan Posted August 2, 2021 Share Posted August 2, 2021 On 7/27/2021 at 5:10 PM, ievavi said: That's amazing stuff! Thanks so much! Any chance do you know how to appropriate this for mobile screens? (that it would fo horizontal rather than vertical?) Can you share link to page where you added the code? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
ievavi Posted August 2, 2021 Share Posted August 2, 2021 8 minutes ago, tuanphan said: Can you share link to page where you added the code? Sure - it's in about page.https://guitar-whale-z827.squarespace.com/about Pass: TrialWebsite Link to comment
tuanphan Posted August 3, 2021 Share Posted August 3, 2021 On 8/2/2021 at 3:06 PM, ievavi said: Sure - it's in about page.https://guitar-whale-z827.squarespace.com/about Pass: TrialWebsite Which section did you add the code? I can't find it in about page Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
ievavi Posted August 3, 2021 Share Posted August 3, 2021 5 minutes ago, tuanphan said: Which section did you add the code? I can't find it in about page It's called, SNIPPETS FROM MY LIFE Section: section[data-section-id="60ff30b2bbf0a573aa1873d5"] Block: #block-yui_3_17_2_1_1627379114686_22447 Link to comment
tuanphan Posted August 4, 2021 Share Posted August 4, 2021 23 hours ago, ievavi said: It's called, SNIPPETS FROM MY LIFE Section: section[data-section-id="60ff30b2bbf0a573aa1873d5"] Block: #block-yui_3_17_2_1_1627379114686_22447 Hi. How do you want it to be on mobile? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
ievavi Posted August 4, 2021 Share Posted August 4, 2021 3 hours ago, tuanphan said: Hi. How do you want it to be on mobile? I was wondering how I could put them into a grid for smaller screens? Tablets and devices. The reference is taken from this page: https://www.nataliewalkerphoto.com/about Link to comment
RogerH Posted August 4, 2021 Share Posted August 4, 2021 Hi @tuanphan I tried to get this Code: https://codepen.io/TylerBerry/pen/LEzrXm on my page: https://www.lgg.ch/test but it doesn't work properly. Any idea? Link to comment
tuanphan Posted August 5, 2021 Share Posted August 5, 2021 17 hours ago, RogerH said: Hi @tuanphan I tried to get this Code: https://codepen.io/TylerBerry/pen/LEzrXm on my page: https://www.lgg.ch/test but it doesn't work properly. Any idea? Try this new code <div id="timeline"> <ul id="dates"> <li><a href="#1900" class="selected">1900</a></li> <li><a href="#1930">1930</a></li> <li><a href="#1944">1944</a></li> <li><a href="#1950">1950</a></li> <li><a href="#1971">1971</a></li> <li><a href="#1977">1977</a></li> <li><a href="#1989">1989</a></li> <li><a href="#1999">1999</a></li> <li><a href="#2001">2001</a></li> <li><a href="#2011">2011</a></li> </ul> <ul id="issues"> <li id="1900" class="selected"> <img src="http://www.csslab.cl/ejemplos/timelinr/latest/images/1.png" /> <h1>1900</h1> <p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p> </li> <li id="1930"> <img src="http://www.csslab.cl/ejemplos/timelinr/latest/images/2.png" /> <h1>1930</h1> <p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p> </li> <li id="1944"> <img src="http://www.csslab.cl/ejemplos/timelinr/latest/images/3.png" /> <h1>1944</h1> <p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p> </li> <li id="1950"> <img src="http://www.csslab.cl/ejemplos/timelinr/latest/images/4.png" /> <h1>1950</h1> <p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p> </li> <li id="1971"> <img src="http://www.csslab.cl/ejemplos/timelinr/latest/images/5.png" /> <h1>1971</h1> <p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p> </li> <li id="1977"> <img src="http://www.csslab.cl/ejemplos/timelinr/latest/images/6.png" /> <h1>1977</h1> <p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p> </li> <li id="1989"> <img src="http://www.csslab.cl/ejemplos/timelinr/latest/images/7.png" /> <h1>1989</h1> <p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p> </li> <li id="1999"> <img src="http://www.csslab.cl/ejemplos/timelinr/latest/images/8.png" /> <h1>1999</h1> <p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p> </li> <li id="2001"> <img src="http://www.csslab.cl/ejemplos/timelinr/latest/images/9.png" /> <h1>2001</h1> <p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p> </li> <li id="2011"> <img src="http://www.csslab.cl/ejemplos/timelinr/latest/images/10.png" /> <h1>2011</h1> <p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p> </li> </ul> <div id="grad_top"></div> <div id="grad_bottom"></div> <a href="#" id="next">+</a> <a href="#" id="prev">-</a> </div> <style> #timeline * { margin: 0; padding: 0; } #timeline a { color: #ffffcc; text-decoration: none; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s; } #timeline a:hover, #timeline a.selected { color: #ffcc00; } #timeline h1,#timeline h2,#timeline h4,#timeline h5,#timeline h6 { text-align: center; color: #ccc; text-shadow: #000 1px 1px 2px; margin-bottom: 5px; } #timeline h1 { font-size: 18px; } #timeline h2 { font-size: 14px; } .sociales { text-align: center; margin-bottom: 20px; } #timeline { width: 500px; height: 600px; overflow: hidden; margin: 40px auto; position: relative; background: url('http://www.csslab.cl/ejemplos/timelinr/latest/images/dot.gif') 3px top repeat-y; } #dates { width: 100px; height: 600px; overflow: hidden; float: left; } #dates li { list-style: none; width: 100px; height: 100px; line-height: 100px; font-size: 24px; padding-left: 10px; background: url('http://www.csslab.cl/ejemplos/timelinr/latest/images/biggerdot.png') left center no-repeat; } #dates a { line-height: 38px; padding-bottom: 10px; } #dates .selected { font-size: 38px; } #issues { width: 400px; height: 600px; overflow: hidden; float: left; } #issues li { max-width: 300px; // width: 400px; height: 600px; list-style: none; text-align: center; // add } #issues li.selected img { -webkit-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); -o-transform: scale(1.1,1.1); -ms-transform: scale(1.1,1.1); transform: scale(1.1,1.1); } #issues li img { // float: left; width: 200px; // add margin: 10px 30px 10px 50px; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE 8 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);/* IE 6 & 7 */ zoom: 1; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out; -webkit-transform: scale(0.7,0.7); -moz-transform: scale(0.7,0.7); -o-transform: scale(0.7,0.7); -ms-transform: scale(0.7,0.7); transform: scale(0.7,0.7); } #issues li h1 { color: #ffcc00; font-size: 48px; text-align: center; text-shadow: #000 1px 1px 2px; } #issues li p { font-size: 14px; margin: 10px 20px; font-weight: normal; line-height: 22px; text-shadow: #000 1px 1px 2px; } #grad_top, #grad_bottom { width: 500px; height: 80px; position: absolute; } #grad_top { top: 0; background: url('http://www.csslab.cl/ejemplos/timelinr/latest/images/grad_top.png') repeat-x; } #grad_bottom { bottom: 0; background: url('http://www.csslab.cl/ejemplos/timelinr/latest/images/grad_bottom.png') repeat-x; } #next, #prev { position: absolute; left: 45%; // left: 55%; font-size: 70px; width: 38px; height: 22px; background-position: 0 -44px; background-repeat: no-repeat; text-indent: -9999px; overflow: hidden; } #next:hover, #prev:hover { background-position: 0 0; } #next { bottom: 0; background-image: url('http://www.csslab.cl/ejemplos/timelinr/latest/images/next_v.png'); } #prev { top: 0; background-image: url('http://www.csslab.cl/ejemplos/timelinr/latest/images/prev_v.png'); } #next.disabled, #prev.disabled { opacity: 0.2; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://www.csslab.cl/ejemplos/timelinr/latest/js/jquery.timelinr-0.9.54.js"></script> <script> $(function(){ $().timelinr({ orientation: 'vertical', issuesSpeed: 300, datesSpeed: 100, arrowKeys: 'true', startAt: 3 }) }); </script> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
tuanphan Posted August 5, 2021 Share Posted August 5, 2021 20 hours ago, ievavi said: I was wondering how I could put them into a grid for smaller screens? Tablets and devices. The reference is taken from this page: https://www.nataliewalkerphoto.com/about Add to Design > Custom CSS /* about grid on mobile */ @media screen and (max-width:767px) { div#background { position: relative !important; top: unset !important; bottom: unset !important; left: unset !important; right: unset !important; display: grid !important; grid-template-columns: repeat(2,1fr) !important; grid-column-gap: 10px; grid-row-gap: 10px; } .mood-board .element { height: auto !important; width: 100% !important; top: unset !important; bottom: unset !important; left: unset !important; bottom: unset !important; position: relative !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
ievavi Posted August 11, 2021 Share Posted August 11, 2021 On 8/5/2021 at 9:52 AM, tuanphan said: Add to Design > Custom CSS /* about grid on mobile */ @media screen and (max-width:767px) { div#background { position: relative !important; top: unset !important; bottom: unset !important; left: unset !important; right: unset !important; display: grid !important; grid-template-columns: repeat(2,1fr) !important; grid-column-gap: 10px; grid-row-gap: 10px; } .mood-board .element { height: auto !important; width: 100% !important; top: unset !important; bottom: unset !important; left: unset !important; bottom: unset !important; position: relative !important; } } That's s much appreciated! Thanks a lot for the code. Any chance you would know how I can put all images in the middle ? Now all the content is for some reason pushed to the left... Link to comment
tuanphan Posted August 14, 2021 Share Posted August 14, 2021 On 8/11/2021 at 7:34 PM, ievavi said: That's s much appreciated! Thanks a lot for the code. Any chance you would know how I can put all images in the middle ? Now all the content is for some reason pushed to the left... Hi. Looks fine here. Can you take a screenshot? Which device/browser do you use? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
ievavi Posted August 14, 2021 Share Posted August 14, 2021 4 hours ago, tuanphan said: Hi. Looks fine here. Can you take a screenshot? Which device/browser do you use? This is how it looks on iphone 11, Safari (& wish it to be centered) Link to comment
shedthemusic Posted August 24, 2021 Share Posted August 24, 2021 (edited) Thank you so much @tuanphan for helping everyone with their codepen questions! I have one as well, https://codepen.io/justKD/pen/MWWYQBr. I've been trying to get something like this on my site for years, and I would be so so so so very grateful if you could help me out! http://shedthemusic.com/mmtm-11 Squarespace 7.0 Montauk Edited August 24, 2021 by shedthemusic Add URL Link to comment
tuanphan Posted August 27, 2021 Share Posted August 27, 2021 On 8/24/2021 at 10:36 AM, shedthemusic said: Thank you so much @tuanphan for helping everyone with their codepen questions! I have one as well, https://codepen.io/justKD/pen/MWWYQBr. I've been trying to get something like this on my site for years, and I would be so so so so very grateful if you could help me out! http://shedthemusic.com/mmtm-11 Squarespace 7.0 Montauk Hi. Add a Code Block >> Paste this code <button id='toggle'>toggle</button> <div id='text'> Click the toggle to display the metronome UI. The widget is also draggable. See the full API on <a href="https://github.com/justKD/KDMetronomeJS">GitHub</a>.</div> <script src='https://cdn.jsdelivr.net/gh/justKD/KDMetronomeJS/KDMetronome.min.js'></script> <style> #toggle { height: 80px; width: 80px; margin: 12px; box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.5); font-size: 1em; color: #fff; background-color: #000; border-radius: 10px; border: none; outline: none; } #toggle:active { margin: 14px; width: 78.4px; height: 78.4px; } #text { margin: 40px; float: right; } </style> <script> /* The widget is generated on the fly. Simply pass a DOM ID for whichever element should toggle the widget display when clicked. */ const metronome = new KDMetronome('toggle') /* Headless mode disposes of the default UI. You can set a custom callback as well as create multiple individually controlled metronomes. */ // const metronome2 = new KDMetronome({ // headless: true, // bpm: 180, // }) // metronome2.callback(_ => console.log('tick')) // document.getElementById('toggle').addEventListener("click", e => metronome2.running() ? metronome2.stop() : metronome2.start()) </script> shedthemusic 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
jenniferboddam Posted September 2, 2021 Share Posted September 2, 2021 hi @tuanphan Im trying to get this : https://codepen.io/cameronknight/pen/qBNvrRQ on my site but I'm not sure why its not working? and when i did add the css it messed up other pages instead of the one page I wanted it on. any help is super appreciated! Link to comment
tuanphan Posted September 5, 2021 Share Posted September 5, 2021 On 9/2/2021 at 10:59 PM, jenniferboddam said: hi @tuanphan Im trying to get this : https://codepen.io/cameronknight/pen/qBNvrRQ on my site but I'm not sure why its not working? and when i did add the css it messed up other pages instead of the one page I wanted it on. any help is super appreciated! Just answered on your own post. Try checking Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
annaamay Posted September 13, 2021 Share Posted September 13, 2021 Hi @tuanphan can you share the codepen codes for https://codepen.io/cameronknight/pen/qBNvrRQ here? I can't seem to find the post on Jennifer's page. Thank you! ❤️ Link to comment
tuanphan Posted September 16, 2021 Share Posted September 16, 2021 On 9/14/2021 at 6:53 AM, annaamay said: Hi @tuanphan can you share the codepen codes for https://codepen.io/cameronknight/pen/qBNvrRQ here? I can't seem to find the post on Jennifer's page. Thank you! ❤️ Try adding a Code Block <div class="container tcontainer"> <section data-bgcolor="#bcb8ad" data-textcolor="#032f35"> <div> <h1 data-scroll data-scroll-speed="1"><span>Horizontal</span> <span>scroll</span> <span>section</span></h1> <p data-scroll data-scroll-speed="2" data-scroll-delay="0.2">with GSAP ScrollTrigger & Locomotive Scroll</p> </div> </section> <section id="sectionPin"> <div class="pin-wrap"> <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h2> <img src="https://images.pexels.com/photos/5207262/pexels-photo-5207262.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=900" alt=""> <img src="https://images.pexels.com/photos/3371358/pexels-photo-3371358.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=900" alt=""> <img src="https://images.pexels.com/photos/3618545/pexels-photo-3618545.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=900" alt=""> </div> </section> <section data-bgcolor="#e3857a" data-textcolor="#f1dba7"><img src="https://images.pexels.com/photos/4791474/pexels-photo-4791474.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt=""> <h2 data-scroll data-scroll-speed="1" class="credit"><a href="https://thisisadvantage.com" target="_blank">Made by Advantage</a></h2> </section> </div> <link rel="stylesheet" href="https://use.typekit.net/skn8ash.css"/> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.css"/> <script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js"></script> <script> gsap.registerPlugin(ScrollTrigger); const pageContainer = document.querySelector(".container"); /* SMOOTH SCROLL */ const scroller = new LocomotiveScroll({ el: pageContainer, smooth: true }); scroller.on("scroll", ScrollTrigger.update); ScrollTrigger.scrollerProxy(pageContainer, { scrollTop(value) { return arguments.length ? scroller.scrollTo(value, 0, 0) : scroller.scroll.instance.scroll.y; }, getBoundingClientRect() { return { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight }; }, pinType: pageContainer.style.transform ? "transform" : "fixed" }); //////////////////////////////////// //////////////////////////////////// window.addEventListener("load", function () { let pinBoxes = document.querySelectorAll(".pin-wrap > *"); let pinWrap = document.querySelector(".pin-wrap"); let pinWrapWidth = pinWrap.offsetWidth; let horizontalScrollLength = pinWrapWidth - window.innerWidth; // Pinning and horizontal scrolling gsap.to(".pin-wrap", { scrollTrigger: { scroller: pageContainer, //locomotive-scroll scrub: true, trigger: "#sectionPin", pin: true, // anticipatePin: 1, start: "top top", end: pinWrapWidth }, x: -horizontalScrollLength, ease: "none" }); ScrollTrigger.addEventListener("refresh", () => scroller.update()); //locomotive-scroll ScrollTrigger.refresh(); }); </script> and add this to DESIGN > CUSTOM CSS /* CSS test code */ .tcontainer { section:not(#sectionPin) { min-height: 100vh; width: 100%; position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-gap: 2rem; padding: 50px 10vw; margin: auto; place-items: center; } img { height: 80vh; width: auto; object-fit: cover; } h1 { font-size: 5rem; line-height: 1; font-weight: 800; margin-bottom: 1rem; position: absolute; top: 10vw; left: 10vw; z-index: 4; overflow-wrap: break-word; hyphens: auto; } @media (max-width: 768px) { h1 { font-size: 16vw; } } h1 span { display: block; } h2 { font-size: 2rem; max-width: 400px; } .credit { font-family: Termina, sans-serif; } .credit a { color: var(--text-color); } * { box-sizing: border-box; } #sectionPin { height: 100vh; overflow: hidden; display: flex; left: 0; background: var(--text-color); color: var(--bg-color); } .pin-wrap { height: 100vh; display: flex; justify-content: flex-start; align-items: center; padding: 50px 10vw; } .pin-wrap > * { min-width: 60vw; padding: 0 5vw; } p { position: absolute; bottom: 10vw; right: 10vw; width: 200px; line-height: 1.5; } } annaamay 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
tuanphan Posted September 29, 2021 Share Posted September 29, 2021 On 9/27/2021 at 5:59 PM, caila said: @tuanphan, could you help implementing this code from codepen too?https://codepen.io/oliverturner/pen/mAoXqp Add to Code Block <p class="tuan">I whip my mouse back and forth</p> <style> p.tuan { counter-reset: hueStart var(--grad-start) hueEnd var(--grad-end); position: relative; padding: 5px 10px; border: 1px solid currentColor; border-radius: var(--font-title); font: 100 var(--font-title)/1 sans-serif; text-align: center; text-transform: uppercase; letter-spacing: 3px; color: #fff; } p.tuan::before, p.tuan::after { position: absolute; display: block; width: 100%; padding: 5px; font-size: 12px; font-variant-numeric: tabular-nums; color: #fff; } p.tuan::before { content: "hsl(" counter(hueStart) ", 100%, 75%)"; bottom: 100%; } p.tuan::after { content: "hsl(" counter(hueEnd) ", 100%, 50%)"; top: 100%; } </style> <script> const w = window.innerWidth; const p = document.querySelector("p"); const getPercentX = x => Math.round(x / w * 360); const styleEl = document.documentElement.style; const setStyle = styleEl.setProperty.bind(styleEl); const updateGradient = percentX => { const gradStart = percentX; const gradEnd = (percentX + 120) % 360; setStyle("--grad-start", gradStart); setStyle("--grad-end", gradEnd); }; document.addEventListener("mousemove", e => { updateGradient(getPercentX(e.clientX)); }); document.addEventListener("touchmove", e => { updateGradient(getPercentX(e.touches[0].screenX)); }); </script> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Anele0610 Posted October 2, 2021 Share Posted October 2, 2021 hello! I'm going through the same problem as everyone else! @tuanphan please help 🙏 https://codepen.io/superpikar/pen/wrevRq Really need this as soon as possible... Thanks.. Anele Link to comment
tuanphan Posted October 3, 2021 Share Posted October 3, 2021 On 10/2/2021 at 7:50 PM, Anele0610 said: hello! I'm going through the same problem as everyone else! @tuanphan please help 🙏 https://codepen.io/superpikar/pen/wrevRq Really need this as soon as possible... Thanks.. Anele Use Code Block <div id="app" class="container tuan"> <div class="row"> <div class="col-md-12"> <h1>Horizontal Timeline with Swiper</h1> Credit : <ul> <li>Horizontal timeline CSS based on <a href="https://codepen.io/abhisharma2/pen/vEKWVo">https://codepen.io/abhisharma2/pen/vEKWVo</a> with a few modifications.</li> <li>Website development step <a href="https://xbsoftware.com/blog/website-development-process-full-guide/">https://xbsoftware.com/blog/website-development-process-full-guide/</a></li> <li>Swiper Grab Cursor <a href="http://idangero.us/swiper/demos/12-grab-cursor.html">http://idangero.us/swiper/demos/12-grab-cursor.html</a></li> </ul> <div class="swiper-container"> <p class="swiper-control"> <button type="button" class="btn btn-default btn-sm prev-slide">Prev</button> <button type="button" class="btn btn-default btn-sm next-slide">Next</button> </p> <div class="swiper-wrapper timeline"> <!-- <div class="swiper-slide" v-for="item in steps"> <div class="timestamp"> <span class="date">{{item.dateLabel}}<span> </div> <div class="status"> <span>{{item.title}}</span> </div> </div> --> <div class="swiper-slide"> <div class="timestamp"> <span class="date">April 2017<span> </div> <div class="status"> <span>This is Title</span> </div> </div> <div class="swiper-slide"> <div class="timestamp"> <span class="date">May 2017<span> </div> <div class="status"> <span>This is Second Title</span> </div> </div> <div class="swiper-slide"> <div class="timestamp"> <span class="date">June 2017<span> </div> <div class="status"> <span>This is Third Title</span> </div> </div> <div class="swiper-slide"> <div class="timestamp"> <span class="date">July 2017<span> </div> <div class="status"> <span>This is Fourth Title</span> </div> </div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> </div> </div> </div> </div> <style> #app { padding: 50px 0; } .timeline { margin: 50px 0; list-style-type: none; display: flex; padding: 0; text-align: center; } .timeline li { transition: all 200ms ease-in; } .timestamp { width: 100%; margin-bottom: 20px; padding: 0px 40px; display: flex; flex-direction: column; justify-content: center; align-items: center; font-weight: 100; } .status { padding: 0px 40px; display: flex; justify-content: center; border-top: 4px solid #3e70ff; position: relative; transition: all 200ms ease-in; } .status span { font-weight: 600; padding-top: 20px; } .status span:before { content: ""; width: 25px; height: 25px; background-color: #e8eeff; border-radius: 25px; border: 4px solid #3e70ff; position: absolute; top: -15px; left: calc(50% - 12px); transition: all 200ms ease-in; } .swiper-control { text-align: right; } .swiper-container { width: 100%; height: 250px; margin: 50px 0; overflow: hidden; padding: 0 20px 30px 20px; } .swiper-slide { width: 200px; text-align: center; font-size: 18px; } .swiper-slide:nth-child(2n) { width: 40%; } .swiper-slide:nth-child(3n) { width: 20%; } </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script> <script> const data = [ { dateLabel: 'January 2017', title: 'Gathering Information' }, { dateLabel: 'February 2017', title: 'Planning' }, { dateLabel: 'March 2017', title: 'Design' }, { dateLabel: 'April 2017', title: 'Content Writing and Assembly' }, { dateLabel: 'May 2017', title: 'Coding' }, { dateLabel: 'June 2017', title: 'Testing, Review & Launch' }, { dateLabel: 'July 2017', title: 'Maintenance' } ]; new Vue({ el: '#app', data: { steps: data, }, mounted() { var swiper = new Swiper('.swiper-container', { //pagination: '.swiper-pagination', slidesPerView: 3, paginationClickable: true, grabCursor: true, paginationClickable: true, nextButton: '.next-slide', prevButton: '.prev-slide', }); } }) </script> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment