Bk211 Posted June 23, 2022 Share Posted June 23, 2022 (edited) Site URL: https://www.vaskal.ca/code-source I recently installed a counter plug-in but I was wondering if I could alter it turn off the scroll-to-activate feature. I want it to activate upon landing on the page. Code details: Under Settings > Advanced > Code Injection > Header <style> .counter-container { color: #344d71; text-align: center; display: flex; flex-flow: row nowrap; justify-content: space-evenly; } #counterbox { display: inline-block; min-width:200px; } #counterbox p { text-align: center; width: 100%; display: block; } .counter { font-size:60px; line-height: 60px; font-weight: 100; } @media (max-width:870px) { .counter-container { display: block !important; width: 100% !important; } .counter-countainer #counterbox { margin-top: 20px; margin-bottom: 20px; } } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script type="text/javascript"> /*=============== SQUARE STUDIO ANIMATED COUNTER PLUGIN START ===============*/ function watch(){MutationObserver=window.MutationObserver||window.WebKitMutationObserver,new MutationObserver(function(a){for(var b=0;b<a.length;b++){if("attributes"===a[b].type){var d=new Event("pageChange");document.dispatchEvent(d)}}}).observe(document.body,{attributes:!0,attributeFilter:["id"]})}var executed=!1;$(document).ready(function(){function a(){$(".counter-container").length>0&&$(window).scroll(function(){b()})}function b(){if(!executed){var a=.1*$(".counter-container").outerHeight();$(window).scrollTop()>$(".counter-container").offset().top-$(window).height()+a&&(executed=!0,$(".counter").each(function(){var a=$(this),b=a.attr("data-count");$({countNum:a.text()}).animate({countNum:b},{duration:3e3,easing:"linear",step:function(){a.text(Math.floor(this.countNum))},complete:function(){a.text(this.countNum)}})}))}}a()}),document.addEventListener("pageChange",function(){executed=!1,$(window).unbind("scroll"),init()}),window.onload=watch; /*================ SQUARE STUDIO ANIMATED COUNTER PLUGIN END ================*/ </script> <script src="https://kit.fontawesome.com/1b3b2d7ef6.js" crossorigin="anonymous"></script> Edited June 23, 2022 by Bk211 new link Link to comment
tuanphan Posted June 24, 2022 Share Posted June 24, 2022 Hi, I think you need to find a new code on Codepen.io, then we can convert it to Squarespace, it will be easier. Find it here https://codepen.io/search/pens?q=counter+number Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care 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