tuanphan

Try adding to Settings > Advanced > Code Injection > Footer
<div class="cursor"> <div class="cursor__ball cursor__ball--big "> <svg height="30" width="30"> <circle cx="15" cy="15" r="12" stroke-width="0"></circle> </svg> </div> <div class="cursor__ball cursor__ball--small"> <svg height="10" width="10"> <circle cx="5" cy="5" r="4" stroke-width="0"></circle> </svg> </div> </div> <style> body .cursor { pointer-events: none; } body .cursor__ball { position: fixed; top: 0; left: 0; mix-blend-mode: difference; z-index: 1000; } body .cursor__ball circle { fill: #f7f8fa; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script> <script> const $bigBall = document.querySelector('.cursor__ball--big'); const $smallBall = document.querySelector('.cursor__ball--small'); const $hoverables = document.querySelectorAll('.hoverable'); // Listeners document.body.addEventListener('mousemove', onMouseMove); for (let i = 0; i < $hoverables.length; i++) {if (window.CP.shouldStopExecution(0)) break; $hoverables[i].addEventListener('mouseenter', onMouseHover); $hoverables[i].addEventListener('mouseleave', onMouseHoverOut); } // Move the cursor window.CP.exitedLoop(0);function onMouseMove(e) { TweenMax.to($bigBall, .4, { x: e.pageX - 15, y: e.pageY - 15 }); TweenMax.to($smallBall, .1, { x: e.pageX - 5, y: e.pageY - 7 }); } // Hover an element function onMouseHover() { TweenMax.to($bigBall, .3, { scale: 4 }); } function onMouseHoverOut() { TweenMax.to($bigBall, .3, { scale: 1 }); } </script>  

Change this line
const $hoverables = document.querySelectorAll('.hoverable'); to this
const $hoverables = document.querySelectorAll('a');  

You can adjust 80% in the code

Add code to 2 Page Header Code Injection
<!-- Quantity should be the same in Sass--> <div class="firefly"></div> <div class="firefly"></div> <div class="firefly"></div> <div class="firefly"></div> <div class="firefly"></div> <div class="firefly"></div> <div class="firefly"></div> <div class="firefly"></div> <div class="firefly"></div> <div class="firefly"></div> <div class="firefly"></div> <div class="firefly"></div> <div class="firefly"></div> <div class="firefly"></div> <div class="firefly"></div> <style> .firefly { position: fixed; left: 50%; top: 50%; width: 0.4vw; height: 0.4vw; margin: -0.2vw 0 0 9.8vw; animation: ease 200s alternate infinite; pointer-events: none; z-index: 9999; } .firefly::before, .firefly::after { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50%; transform-origin: -10vw; } .firefly::before { background: black; opacity: 0.4; animation: drift ease alternate infinite; } .firefly::after { background: white; opacity: 0; box-shadow: 0 0 0vw 0vw yellow; animation: drift ease alternate infinite, flash ease infinite; } .firefly:nth-child(1) { animation-name: move1; } .firefly:nth-child(1)::before { animation-duration: 10s; } .firefly:nth-child(1)::after { animation-duration: 10s, 9824ms; animation-delay: 0ms, 1432ms; } @keyframes move1 { 0% { transform: translateX(-45vw) translateY(11vh) scale(0.89); } 5% { transform: translateX(-26vw) translateY(5vh) scale(0.27); } 10% { transform: translateX(32vw) translateY(39vh) scale(0.73); } 15% { transform: translateX(4vw) translateY(-23vh) scale(0.7); } 20% { transform: translateX(34vw) translateY(9vh) scale(0.84); } 25% { transform: translateX(-16vw) translateY(9vh) scale(0.32); } 30% { transform: translateX(-17vw) translateY(-9vh) scale(0.4); } 35% { transform: translateX(-35vw) translateY(18vh) scale(0.33); } 40% { transform: translateX(-48vw) translateY(-7vh) scale(0.86); } 45% { transform: translateX(30vw) translateY(5vh) scale(0.77); } 50% { transform: translateX(13vw) translateY(11vh) scale(0.82); } 55% { transform: translateX(-10vw) translateY(19vh) scale(0.48); } 60% { transform: translateX(-46vw) translateY(-21vh) scale(0.75); } 65% { transform: translateX(-45vw) translateY(-38vh) scale(0.31); } 70% { transform: translateX(-45vw) translateY(19vh) scale(0.73); } 75% { transform: translateX(23vw) translateY(-7vh) scale(0.52); } 80% { transform: translateX(-18vw) translateY(-12vh) scale(0.3); } 85% { transform: translateX(46vw) translateY(-47vh) scale(0.55); } 90% { transform: translateX(-44vw) translateY(-17vh) scale(0.88); } 95% { transform: translateX(-3vw) translateY(47vh) scale(0.52); } 100% { transform: translateX(-33vw) translateY(-25vh) scale(0.75); } } .firefly:nth-child(2) { animation-name: move2; } .firefly:nth-child(2)::before { animation-duration: 11s; } .firefly:nth-child(2)::after { animation-duration: 11s, 7714ms; animation-delay: 0ms, 3637ms; } @keyframes move2 { 0% { transform: translateX(-7vw) translateY(23vh) scale(0.67); } 4.1666666667% { transform: translateX(13vw) translateY(12vh) scale(0.44); } 8.3333333333% { transform: translateX(21vw) translateY(-6vh) scale(0.78); } 12.5% { transform: translateX(-32vw) translateY(18vh) scale(0.6); } 16.6666666667% { transform: translateX(-44vw) translateY(33vh) scale(0.69); } 20.8333333333% { transform: translateX(-1vw) translateY(12vh) scale(0.98); } 25% { transform: translateX(2vw) translateY(-18vh) scale(0.9); } 29.1666666667% { transform: translateX(5vw) translateY(42vh) scale(0.99); } 33.3333333333% { transform: translateX(46vw) translateY(17vh) scale(0.88); } 37.5% { transform: translateX(23vw) translateY(36vh) scale(0.99); } 41.6666666667% { transform: translateX(25vw) translateY(-14vh) scale(0.34); } 45.8333333333% { transform: translateX(38vw) translateY(-49vh) scale(0.68); } 50% { transform: translateX(43vw) translateY(-41vh) scale(0.34); } 54.1666666667% { transform: translateX(-48vw) translateY(21vh) scale(0.94); } 58.3333333333% { transform: translateX(41vw) translateY(20vh) scale(0.97); } 62.5% { transform: translateX(-39vw) translateY(17vh) scale(0.44); } 66.6666666667% { transform: translateX(14vw) translateY(-13vh) scale(0.38); } 70.8333333333% { transform: translateX(5vw) translateY(-1vh) scale(0.42); } 75% { transform: translateX(0vw) translateY(7vh) scale(0.45); } 79.1666666667% { transform: translateX(41vw) translateY(-30vh) scale(0.44); } 83.3333333333% { transform: translateX(12vw) translateY(-47vh) scale(0.86); } 87.5% { transform: translateX(48vw) translateY(23vh) scale(0.69); } 91.6666666667% { transform: translateX(14vw) translateY(-27vh) scale(0.56); } 95.8333333333% { transform: translateX(23vw) translateY(-24vh) scale(0.97); } 100% { transform: translateX(-11vw) translateY(49vh) scale(0.47); } } .firefly:nth-child(3) { animation-name: move3; } .firefly:nth-child(3)::before { animation-duration: 16s; } .firefly:nth-child(3)::after { animation-duration: 16s, 7818ms; animation-delay: 0ms, 2271ms; } @keyframes move3 { 0% { transform: translateX(-43vw) translateY(-45vh) scale(0.33); } 5.5555555556% { transform: translateX(22vw) translateY(13vh) scale(0.95); } 11.1111111111% { transform: translateX(33vw) translateY(-48vh) scale(0.27); } 16.6666666667% { transform: translateX(42vw) translateY(-9vh) scale(0.48); } 22.2222222222% { transform: translateX(-40vw) translateY(-47vh) scale(0.37); } 27.7777777778% { transform: translateX(15vw) translateY(-30vh) scale(0.69); } 33.3333333333% { transform: translateX(-21vw) translateY(3vh) scale(0.31); } 38.8888888889% { transform: translateX(-33vw) translateY(-42vh) scale(0.61); } 44.4444444444% { transform: translateX(35vw) translateY(6vh) scale(0.77); } 50% { transform: translateX(-15vw) translateY(44vh) scale(0.54); } 55.5555555556% { transform: translateX(-49vw) translateY(33vh) scale(0.34); } 61.1111111111% { transform: translateX(50vw) translateY(41vh) scale(0.62); } 66.6666666667% { transform: translateX(33vw) translateY(-37vh) scale(0.41); } 72.2222222222% { transform: translateX(-1vw) translateY(11vh) scale(0.39); } 77.7777777778% { transform: translateX(12vw) translateY(1vh) scale(0.82); } 83.3333333333% { transform: translateX(16vw) translateY(5vh) scale(0.44); } 88.8888888889% { transform: translateX(10vw) translateY(3vh) scale(0.55); } 94.4444444444% { transform: translateX(-33vw) translateY(-19vh) scale(0.54); } 100% { transform: translateX(15vw) translateY(-8vh) scale(0.89); } } .firefly:nth-child(4) { animation-name: move4; } .firefly:nth-child(4)::before { animation-duration: 18s; } .firefly:nth-child(4)::after { animation-duration: 18s, 7264ms; animation-delay: 0ms, 1336ms; } @keyframes move4 { 0% { transform: translateX(-44vw) translateY(-44vh) scale(0.46); } 5.8823529412% { transform: translateX(41vw) translateY(42vh) scale(0.49); } 11.7647058824% { transform: translateX(-35vw) translateY(-11vh) scale(0.59); } 17.6470588235% { transform: translateX(48vw) translateY(12vh) scale(0.54); } 23.5294117647% { transform: translateX(6vw) translateY(-22vh) scale(0.38); } 29.4117647059% { transform: translateX(-19vw) translateY(18vh) scale(0.71); } 35.2941176471% { transform: translateX(-20vw) translateY(-1vh) scale(0.34); } 41.1764705882% { transform: translateX(-7vw) translateY(37vh) scale(1); } 47.0588235294% { transform: translateX(-2vw) translateY(-41vh) scale(0.42); } 52.9411764706% { transform: translateX(48vw) translateY(-38vh) scale(0.94); } 58.8235294118% { transform: translateX(-12vw) translateY(20vh) scale(0.6); } 64.7058823529% { transform: translateX(-11vw) translateY(24vh) scale(0.91); } 70.5882352941% { transform: translateX(4vw) translateY(34vh) scale(0.51); } 76.4705882353% { transform: translateX(-49vw) translateY(-37vh) scale(0.4); } 82.3529411765% { transform: translateX(-9vw) translateY(-7vh) scale(0.74); } 88.2352941176% { transform: translateX(44vw) translateY(44vh) scale(0.39); } 94.1176470588% { transform: translateX(-18vw) translateY(17vh) scale(0.54); } 100% { transform: translateX(19vw) translateY(31vh) scale(0.56); } } .firefly:nth-child(5) { animation-name: move5; } .firefly:nth-child(5)::before { animation-duration: 10s; } .firefly:nth-child(5)::after { animation-duration: 10s, 8616ms; animation-delay: 0ms, 3326ms; } @keyframes move5 { 0% { transform: translateX(-29vw) translateY(23vh) scale(0.65); } 4.5454545455% { transform: translateX(25vw) translateY(-7vh) scale(0.92); } 9.0909090909% { transform: translateX(21vw) translateY(-17vh) scale(0.57); } 13.6363636364% { transform: translateX(19vw) translateY(41vh) scale(0.84); } 18.1818181818% { transform: translateX(-39vw) translateY(-10vh) scale(0.55); } 22.7272727273% { transform: translateX(26vw) translateY(11vh) scale(0.54); } 27.2727272727% { transform: translateX(28vw) translateY(5vh) scale(0.53); } 31.8181818182% { transform: translateX(14vw) translateY(33vh) scale(0.84); } 36.3636363636% { transform: translateX(-39vw) translateY(6vh) scale(0.36); } 40.9090909091% { transform: translateX(31vw) translateY(7vh) scale(0.42); } 45.4545454545% { transform: translateX(-41vw) translateY(-10vh) scale(0.33); } 50% { transform: translateX(1vw) translateY(28vh) scale(0.37); } 54.5454545455% { transform: translateX(-9vw) translateY(-5vh) scale(0.58); } 59.0909090909% { transform: translateX(-2vw) translateY(10vh) scale(0.53); } 63.6363636364% { transform: translateX(11vw) translateY(8vh) scale(0.74); } 68.1818181818% { transform: translateX(43vw) translateY(48vh) scale(0.48); } 72.7272727273% { transform: translateX(34vw) translateY(49vh) scale(0.94); } 77.2727272727% { transform: translateX(31vw) translateY(40vh) scale(0.57); } 81.8181818182% { transform: translateX(45vw) translateY(-38vh) scale(0.99); } 86.3636363636% { transform: translateX(8vw) translateY(9vh) scale(0.6); } 90.9090909091% { transform: translateX(6vw) translateY(28vh) scale(0.91); } 95.4545454545% { transform: translateX(-7vw) translateY(-45vh) scale(0.52); } 100% { transform: translateX(45vw) translateY(46vh) scale(0.28); } } .firefly:nth-child(6) { animation-name: move6; } .firefly:nth-child(6)::before { animation-duration: 14s; } .firefly:nth-child(6)::after { animation-duration: 14s, 10143ms; animation-delay: 0ms, 585ms; } @keyframes move6 { 0% { transform: translateX(-8vw) translateY(37vh) scale(0.89); } 3.8461538462% { transform: translateX(-40vw) translateY(46vh) scale(0.39); } 7.6923076923% { transform: translateX(-27vw) translateY(23vh) scale(0.83); } 11.5384615385% { transform: translateX(-20vw) translateY(-29vh) scale(0.55); } 15.3846153846% { transform: translateX(-23vw) translateY(-24vh) scale(0.69); } 19.2307692308% { transform: translateX(-13vw) translateY(27vh) scale(0.32); } 23.0769230769% { transform: translateX(-12vw) translateY(-31vh) scale(0.77); } 26.9230769231% { transform: translateX(4vw) translateY(14vh) scale(0.89); } 30.7692307692% { transform: translateX(38vw) translateY(-26vh) scale(0.46); } 34.6153846154% { transform: translateX(-6vw) translateY(-44vh) scale(0.82); } 38.4615384615% { transform: translateX(9vw) translateY(-11vh) scale(0.64); } 42.3076923077% { transform: translateX(37vw) translateY(45vh) scale(0.63); } 46.1538461538% { transform: translateX(33vw) translateY(-14vh) scale(0.57); } 50% { transform: translateX(8vw) translateY(-43vh) scale(0.36); } 53.8461538462% { transform: translateX(16vw) translateY(-34vh) scale(0.9); } 57.6923076923% { transform: translateX(-20vw) translateY(-40vh) scale(0.96); } 61.5384615385% { transform: translateX(-11vw) translateY(22vh) scale(0.28); } 65.3846153846% { transform: translateX(19vw) translateY(-13vh) scale(0.5); } 69.2307692308% { transform: translateX(-41vw) translateY(-6vh) scale(0.28); } 73.0769230769% { transform: translateX(7vw) translateY(-27vh) scale(0.58); } 76.9230769231% { transform: translateX(4vw) translateY(9vh) scale(0.42); } 80.7692307692% { transform: translateX(18vw) translateY(-22vh) scale(0.74); } 84.6153846154% { transform: translateX(8vw) translateY(5vh) scale(0.27); } 88.4615384615% { transform: translateX(8vw) translateY(0vh) scale(0.31); } 92.3076923077% { transform: translateX(-10vw) translateY(30vh) scale(0.61); } 96.1538461538% { transform: translateX(44vw) translateY(-6vh) scale(0.92); } 100% { transform: translateX(-47vw) translateY(-1vh) scale(0.31); } } .firefly:nth-child(7) { animation-name: move7; } .firefly:nth-child(7)::before { animation-duration: 18s; } .firefly:nth-child(7)::after { animation-duration: 18s, 8137ms; animation-delay: 0ms, 5573ms; } @keyframes move7 { 0% { transform: translateX(-34vw) translateY(-46vh) scale(0.66); } 4.5454545455% { transform: translateX(40vw) translateY(-21vh) scale(0.96); } 9.0909090909% { transform: translateX(14vw) translateY(-30vh) scale(0.76); } 13.6363636364% { transform: translateX(8vw) translateY(-1vh) scale(0.74); } 18.1818181818% { transform: translateX(-28vw) translateY(-28vh) scale(0.83); } 22.7272727273% { transform: translateX(49vw) translateY(8vh) scale(0.7); } 27.2727272727% { transform: translateX(-20vw) translateY(-28vh) scale(0.54); } 31.8181818182% { transform: translateX(-26vw) translateY(49vh) scale(0.3); } 36.3636363636% { transform: translateX(-32vw) translateY(7vh) scale(0.39); } 40.9090909091% { transform: translateX(-36vw) translateY(9vh) scale(0.32); } 45.4545454545% { transform: translateX(-44vw) translateY(-49vh) scale(0.99); } 50% { transform: translateX(-3vw) translateY(-23vh) scale(0.64); } 54.5454545455% { transform: translateX(23vw) translateY(-36vh) scale(0.31); } 59.0909090909% { transform: translateX(-46vw) translateY(-48vh) scale(0.51); } 63.6363636364% { transform: translateX(26vw) translateY(-5vh) scale(0.4); } 68.1818181818% { transform: translateX(40vw) translateY(-32vh) scale(0.52); } 72.7272727273% { transform: translateX(10vw) translateY(-30vh) scale(0.88); } 77.2727272727% { transform: translateX(-45vw) translateY(8vh) scale(0.59); } 81.8181818182% { transform: translateX(-33vw) translateY(-15vh) scale(0.31); } 86.3636363636% { transform: translateX(-5vw) translateY(-23vh) scale(0.3); } 90.9090909091% { transform: translateX(48vw) translateY(-9vh) scale(0.87); } 95.4545454545% { transform: translateX(40vw) translateY(3vh) scale(0.92); } 100% { transform: translateX(31vw) translateY(34vh) scale(0.47); } } .firefly:nth-child(8) { animation-name: move8; } .firefly:nth-child(8)::before { animation-duration: 13s; } .firefly:nth-child(8)::after { animation-duration: 13s, 9231ms; animation-delay: 0ms, 3569ms; } @keyframes move8 { 0% { transform: translateX(5vw) translateY(13vh) scale(1); } 4.5454545455% { transform: translateX(-28vw) translateY(35vh) scale(0.87); } 9.0909090909% { transform: translateX(-38vw) translateY(23vh) scale(0.88); } 13.6363636364% { transform: translateX(21vw) translateY(-1vh) scale(0.73); } 18.1818181818% { transform: translateX(46vw) translateY(-9vh) scale(0.42); } 22.7272727273% { transform: translateX(11vw) translateY(15vh) scale(0.52); } 27.2727272727% { transform: translateX(1vw) translateY(-46vh) scale(0.69); } 31.8181818182% { transform: translateX(-6vw) translateY(25vh) scale(0.81); } 36.3636363636% { transform: translateX(40vw) translateY(-37vh) scale(0.72); } 40.9090909091% { transform: translateX(-30vw) translateY(-3vh) scale(0.27); } 45.4545454545% { transform: translateX(5vw) translateY(-13vh) scale(0.89); } 50% { transform: translateX(-34vw) translateY(-29vh) scale(0.76); } 54.5454545455% { transform: translateX(7vw) translateY(-36vh) scale(0.65); } 59.0909090909% { transform: translateX(-41vw) translateY(-45vh) scale(0.97); } 63.6363636364% { transform: translateX(46vw) translateY(-44vh) scale(0.99); } 68.1818181818% { transform: translateX(-24vw) translateY(-14vh) scale(0.97); } 72.7272727273% { transform: translateX(-39vw) translateY(41vh) scale(0.58); } 77.2727272727% { transform: translateX(49vw) translateY(19vh) scale(0.62); } 81.8181818182% { transform: translateX(-14vw) translateY(-23vh) scale(0.52); } 86.3636363636% { transform: translateX(49vw) translateY(30vh) scale(0.71); } 90.9090909091% { transform: translateX(-9vw) translateY(9vh) scale(0.32); } 95.4545454545% { transform: translateX(-31vw) translateY(-38vh) scale(0.58); } 100% { transform: translateX(39vw) translateY(-47vh) scale(1); } } .firefly:nth-child(9) { animation-name: move9; } .firefly:nth-child(9)::before { animation-duration: 10s; } .firefly:nth-child(9)::after { animation-duration: 10s, 5249ms; animation-delay: 0ms, 2990ms; } @keyframes move9 { 0% { transform: translateX(50vw) translateY(-36vh) scale(0.53); } 4.7619047619% { transform: translateX(43vw) translateY(45vh) scale(0.81); } 9.5238095238% { transform: translateX(1vw) translateY(6vh) scale(0.63); } 14.2857142857% { transform: translateX(-10vw) translateY(-13vh) scale(0.53); } 19.0476190476% { transform: translateX(-8vw) translateY(-27vh) scale(0.76); } 23.8095238095% { transform: translateX(33vw) translateY(42vh) scale(0.73); } 28.5714285714% { transform: translateX(-20vw) translateY(-9vh) scale(0.5); } 33.3333333333% { transform: translateX(14vw) translateY(14vh) scale(0.6); } 38.0952380952% { transform: translateX(13vw) translateY(-29vh) scale(0.72); } 42.8571428571% { transform: translateX(-17vw) translateY(-17vh) scale(0.4); } 47.619047619% { transform: translateX(1vw) translateY(7vh) scale(0.67); } 52.380952381% { transform: translateX(-19vw) translateY(10vh) scale(0.56); } 57.1428571429% { transform: translateX(20vw) translateY(-21vh) scale(0.99); } 61.9047619048% { transform: translateX(27vw) translateY(7vh) scale(0.59); } 66.6666666667% { transform: translateX(41vw) translateY(30vh) scale(0.78); } 71.4285714286% { transform: translateX(9vw) translateY(5vh) scale(0.83); } 76.1904761905% { transform: translateX(-38vw) translateY(8vh) scale(0.31); } 80.9523809524% { transform: translateX(40vw) translateY(17vh) scale(0.66); } 85.7142857143% { transform: translateX(17vw) translateY(12vh) scale(0.84); } 90.4761904762% { transform: translateX(-18vw) translateY(-24vh) scale(0.6); } 95.2380952381% { transform: translateX(-36vw) translateY(-6vh) scale(0.28); } 100% { transform: translateX(-7vw) translateY(12vh) scale(0.99); } } .firefly:nth-child(10) { animation-name: move10; } .firefly:nth-child(10)::before { animation-duration: 17s; } .firefly:nth-child(10)::after { animation-duration: 17s, 5650ms; animation-delay: 0ms, 7524ms; } @keyframes move10 { 0% { transform: translateX(41vw) translateY(-23vh) scale(0.65); } 4.347826087% { transform: translateX(-11vw) translateY(-24vh) scale(0.49); } 8.6956521739% { transform: translateX(30vw) translateY(11vh) scale(0.76); } 13.0434782609% { transform: translateX(-10vw) translateY(0vh) scale(0.48); } 17.3913043478% { transform: translateX(-49vw) translateY(-34vh) scale(0.75); } 21.7391304348% { transform: translateX(24vw) translateY(19vh) scale(0.29); } 26.0869565217% { transform: translateX(38vw) translateY(-8vh) scale(0.54); } 30.4347826087% { transform: translateX(21vw) translateY(23vh) scale(0.65); } 34.7826086957% { transform: translateX(-36vw) translateY(-4vh) scale(0.5); } 39.1304347826% { transform: translateX(19vw) translateY(12vh) scale(0.62); } 43.4782608696% { transform: translateX(-6vw) translateY(-10vh) scale(0.34); } 47.8260869565% { transform: translateX(-34vw) translateY(-19vh) scale(0.96); } 52.1739130435% { transform: translateX(-42vw) translateY(3vh) scale(0.81); } 56.5217391304% { transform: translateX(-29vw) translateY(-31vh) scale(0.91); } 60.8695652174% { transform: translateX(-48vw) translateY(35vh) scale(0.53); } 65.2173913043% { transform: translateX(14vw) translateY(14vh) scale(0.73); } 69.5652173913% { transform: translateX(-3vw) translateY(-46vh) scale(0.38); } 73.9130434783% { transform: translateX(-9vw) translateY(-12vh) scale(0.84); } 78.2608695652% { transform: translateX(33vw) translateY(-17vh) scale(0.85); } 82.6086956522% { transform: translateX(-30vw) translateY(37vh) scale(0.81); } 86.9565217391% { transform: translateX(24vw) translateY(-39vh) scale(0.77); } 91.3043478261% { transform: translateX(14vw) translateY(20vh) scale(0.38); } 95.652173913% { transform: translateX(-24vw) translateY(-38vh) scale(0.58); } 100% { transform: translateX(-26vw) translateY(35vh) scale(0.83); } } .firefly:nth-child(11) { animation-name: move11; } .firefly:nth-child(11)::before { animation-duration: 18s; } .firefly:nth-child(11)::after { animation-duration: 18s, 6581ms; animation-delay: 0ms, 2674ms; } @keyframes move11 { 0% { transform: translateX(20vw) translateY(-37vh) scale(0.46); } 5% { transform: translateX(-49vw) translateY(15vh) scale(0.41); } 10% { transform: translateX(-6vw) translateY(24vh) scale(0.41); } 15% { transform: translateX(40vw) translateY(-31vh) scale(0.41); } 20% { transform: translateX(26vw) translateY(16vh) scale(0.95); } 25% { transform: translateX(-28vw) translateY(8vh) scale(0.29); } 30% { transform: translateX(46vw) translateY(-28vh) scale(0.61); } 35% { transform: translateX(-41vw) translateY(26vh) scale(0.47); } 40% { transform: translateX(-31vw) translateY(-39vh) scale(0.66); } 45% { transform: translateX(-21vw) translateY(-31vh) scale(0.72); } 50% { transform: translateX(7vw) translateY(-12vh) scale(0.42); } 55% { transform: translateX(29vw) translateY(-40vh) scale(0.58); } 60% { transform: translateX(-29vw) translateY(5vh) scale(0.59); } 65% { transform: translateX(8vw) translateY(1vh) scale(0.47); } 70% { transform: translateX(-30vw) translateY(45vh) scale(0.53); } 75% { transform: translateX(-4vw) translateY(-14vh) scale(0.71); } 80% { transform: translateX(-4vw) translateY(-8vh) scale(0.75); } 85% { transform: translateX(5vw) translateY(11vh) scale(0.39); } 90% { transform: translateX(12vw) translateY(47vh) scale(0.48); } 95% { transform: translateX(-14vw) translateY(-30vh) scale(0.92); } 100% { transform: translateX(-40vw) translateY(14vh) scale(0.44); } } .firefly:nth-child(12) { animation-name: move12; } .firefly:nth-child(12)::before { animation-duration: 10s; } .firefly:nth-child(12)::after { animation-duration: 10s, 8137ms; animation-delay: 0ms, 6314ms; } @keyframes move12 { 0% { transform: translateX(2vw) translateY(47vh) scale(0.62); } 3.8461538462% { transform: translateX(12vw) translateY(-14vh) scale(0.58); } 7.6923076923% { transform: translateX(18vw) translateY(-33vh) scale(0.65); } 11.5384615385% { transform: translateX(12vw) translateY(28vh) scale(0.67); } 15.3846153846% { transform: translateX(-2vw) translateY(26vh) scale(0.76); } 19.2307692308% { transform: translateX(0vw) translateY(36vh) scale(0.46); } 23.0769230769% { transform: translateX(9vw) translateY(15vh) scale(0.33); } 26.9230769231% { transform: translateX(-25vw) translateY(48vh) scale(0.62); } 30.7692307692% { transform: translateX(-27vw) translateY(-44vh) scale(0.54); } 34.6153846154% { transform: translateX(-36vw) translateY(18vh) scale(0.31); } 38.4615384615% { transform: translateX(48vw) translateY(-5vh) scale(0.58); } 42.3076923077% { transform: translateX(2vw) translateY(29vh) scale(0.42); } 46.1538461538% { transform: translateX(-33vw) translateY(-17vh) scale(0.79); } 50% { transform: translateX(27vw) translateY(-8vh) scale(0.5); } 53.8461538462% { transform: translateX(49vw) translateY(8vh) scale(0.32); } 57.6923076923% { transform: translateX(-25vw) translateY(46vh) scale(0.98); } 61.5384615385% { transform: translateX(23vw) translateY(27vh) scale(0.79); } 65.3846153846% { transform: translateX(33vw) translateY(38vh) scale(0.81); } 69.2307692308% { transform: translateX(20vw) translateY(47vh) scale(0.56); } 73.0769230769% { transform: translateX(12vw) translateY(43vh) scale(0.92); } 76.9230769231% { transform: translateX(-23vw) translateY(-5vh) scale(0.87); } 80.7692307692% { transform: translateX(-10vw) translateY(-11vh) scale(0.28); } 84.6153846154% { transform: translateX(4vw) translateY(-17vh) scale(0.59); } 88.4615384615% { transform: translateX(-8vw) translateY(34vh) scale(0.39); } 92.3076923077% { transform: translateX(-42vw) translateY(-11vh) scale(0.33); } 96.1538461538% { transform: translateX(-7vw) translateY(5vh) scale(0.92); } 100% { transform: translateX(-20vw) translateY(20vh) scale(0.67); } } .firefly:nth-child(13) { animation-name: move13; } .firefly:nth-child(13)::before { animation-duration: 14s; } .firefly:nth-child(13)::after { animation-duration: 14s, 7172ms; animation-delay: 0ms, 926ms; } @keyframes move13 { 0% { transform: translateX(13vw) translateY(-21vh) scale(0.46); } 3.5714285714% { transform: translateX(4vw) translateY(36vh) scale(0.47); } 7.1428571429% { transform: translateX(-49vw) translateY(45vh) scale(0.82); } 10.7142857143% { transform: translateX(-6vw) translateY(5vh) scale(0.26); } 14.2857142857% { transform: translateX(-34vw) translateY(21vh) scale(0.43); } 17.8571428571% { transform: translateX(-10vw) translateY(-4vh) scale(0.88); } 21.4285714286% { transform: translateX(43vw) translateY(16vh) scale(0.54); } 25% { transform: translateX(16vw) translateY(2vh) scale(0.49); } 28.5714285714% { transform: translateX(0vw) translateY(21vh) scale(0.81); } 32.1428571429% { transform: translateX(-44vw) translateY(44vh) scale(0.97); } 35.7142857143% { transform: translateX(-46vw) translateY(8vh) scale(0.94); } 39.2857142857% { transform: translateX(28vw) translateY(49vh) scale(0.76); } 42.8571428571% { transform: translateX(-13vw) translateY(28vh) scale(0.92); } 46.4285714286% { transform: translateX(-13vw) translateY(-47vh) scale(0.89); } 50% { transform: translateX(3vw) translateY(-40vh) scale(0.63); } 53.5714285714% { transform: translateX(-42vw) translateY(-20vh) scale(0.59); } 57.1428571429% { transform: translateX(-29vw) translateY(-34vh) scale(0.78); } 60.7142857143% { transform: translateX(-42vw) translateY(-48vh) scale(0.7); } 64.2857142857% { transform: translateX(46vw) translateY(25vh) scale(0.39); } 67.8571428571% { transform: translateX(41vw) translateY(7vh) scale(0.46); } 71.4285714286% { transform: translateX(-34vw) translateY(-18vh) scale(0.7); } 75% { transform: translateX(19vw) translateY(30vh) scale(0.57); } 78.5714285714% { transform: translateX(5vw) translateY(5vh) scale(0.95); } 82.1428571429% { transform: translateX(37vw) translateY(-3vh) scale(0.98); } 85.7142857143% { transform: translateX(34vw) translateY(13vh) scale(0.41); } 89.2857142857% { transform: translateX(-39vw) translateY(1vh) scale(0.29); } 92.8571428571% { transform: translateX(-9vw) translateY(18vh) scale(0.62); } 96.4285714286% { transform: translateX(-5vw) translateY(-8vh) scale(0.46); } 100% { transform: translateX(-33vw) translateY(-15vh) scale(0.59); } } .firefly:nth-child(14) { animation-name: move14; } .firefly:nth-child(14)::before { animation-duration: 13s; } .firefly:nth-child(14)::after { animation-duration: 13s, 6399ms; animation-delay: 0ms, 4566ms; } @keyframes move14 { 0% { transform: translateX(8vw) translateY(11vh) scale(0.9); } 3.8461538462% { transform: translateX(25vw) translateY(-47vh) scale(0.87); } 7.6923076923% { transform: translateX(25vw) translateY(24vh) scale(0.6); } 11.5384615385% { transform: translateX(-36vw) translateY(-1vh) scale(0.55); } 15.3846153846% { transform: translateX(28vw) translateY(-22vh) scale(0.71); } 19.2307692308% { transform: translateX(-22vw) translateY(-2vh) scale(0.88); } 23.0769230769% { transform: translateX(-12vw) translateY(-26vh) scale(0.55); } 26.9230769231% { transform: translateX(40vw) translateY(33vh) scale(0.26); } 30.7692307692% { transform: translateX(-35vw) translateY(-33vh) scale(0.59); } 34.6153846154% { transform: translateX(-1vw) translateY(-49vh) scale(0.56); } 38.4615384615% { transform: translateX(37vw) translateY(-28vh) scale(0.53); } 42.3076923077% { transform: translateX(-11vw) translateY(40vh) scale(0.73); } 46.1538461538% { transform: translateX(1vw) translateY(17vh) scale(0.85); } 50% { transform: translateX(0vw) translateY(0vh) scale(0.62); } 53.8461538462% { transform: translateX(23vw) translateY(13vh) scale(0.84); } 57.6923076923% { transform: translateX(-3vw) translateY(21vh) scale(0.34); } 61.5384615385% { transform: translateX(-33vw) translateY(-29vh) scale(0.53); } 65.3846153846% { transform: translateX(-34vw) translateY(14vh) scale(0.28); } 69.2307692308% { transform: translateX(-42vw) translateY(22vh) scale(0.77); } 73.0769230769% { transform: translateX(-26vw) translateY(-3vh) scale(0.73); } 76.9230769231% { transform: translateX(-46vw) translateY(-27vh) scale(0.79); } 80.7692307692% { transform: translateX(22vw) translateY(-19vh) scale(0.73); } 84.6153846154% { transform: translateX(-36vw) translateY(41vh) scale(0.31); } 88.4615384615% { transform: translateX(21vw) translateY(-4vh) scale(0.9); } 92.3076923077% { transform: translateX(7vw) translateY(39vh) scale(0.48); } 96.1538461538% { transform: translateX(-6vw) translateY(-28vh) scale(0.7); } 100% { transform: translateX(-1vw) translateY(10vh) scale(0.98); } } .firefly:nth-child(15) { animation-name: move15; } .firefly:nth-child(15)::before { animation-duration: 18s; } .firefly:nth-child(15)::after { animation-duration: 18s, 9675ms; animation-delay: 0ms, 2604ms; } @keyframes move15 { 0% { transform: translateX(-1vw) translateY(24vh) scale(0.63); } 4% { transform: translateX(24vw) translateY(19vh) scale(0.75); } 8% { transform: translateX(-17vw) translateY(30vh) scale(0.83); } 12% { transform: translateX(-40vw) translateY(4vh) scale(0.27); } 16% { transform: translateX(-45vw) translateY(-25vh) scale(0.32); } 20% { transform: translateX(-8vw) translateY(-29vh) scale(0.53); } 24% { transform: translateX(25vw) translateY(-6vh) scale(0.8); } 28% { transform: translateX(47vw) translateY(1vh) scale(0.33); } 32% { transform: translateX(-35vw) translateY(26vh) scale(0.45); } 36% { transform: translateX(-21vw) translateY(11vh) scale(0.5); } 40% { transform: translateX(10vw) translateY(-33vh) scale(0.57); } 44% { transform: translateX(-18vw) translateY(-5vh) scale(0.94); } 48% { transform: translateX(1vw) translateY(11vh) scale(0.5); } 52% { transform: translateX(20vw) translateY(32vh) scale(0.82); } 56% { transform: translateX(4vw) translateY(-36vh) scale(0.96); } 60% { transform: translateX(-5vw) translateY(26vh) scale(0.35); } 64% { transform: translateX(-16vw) translateY(-23vh) scale(0.33); } 68% { transform: translateX(-29vw) translateY(-41vh) scale(0.34); } 72% { transform: translateX(-14vw) translateY(36vh) scale(0.37); } 76% { transform: translateX(33vw) translateY(-37vh) scale(0.77); } 80% { transform: translateX(-11vw) translateY(47vh) scale(0.62); } 84% { transform: translateX(40vw) translateY(34vh) scale(0.47); } 88% { transform: translateX(25vw) translateY(12vh) scale(0.27); } 92% { transform: translateX(33vw) translateY(-11vh) scale(0.53); } 96% { transform: translateX(32vw) translateY(26vh) scale(0.37); } 100% { transform: translateX(-27vw) translateY(-44vh) scale(0.65); } } @keyframes drift { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes flash { 0%, 30%, 100% { opacity: 0; box-shadow: 0 0 0vw 0vw yellow; } 5% { opacity: 1; box-shadow: 0 0 2vw 0.4vw yellow; } } </style> Demo: https://tuanphan3.squarespace.com/css-fireflies?noredirect
Pass: abc

Might not be exactly what you're looking for but the Table of Contents plugin I just released might be suitable. I built it about a month ago for a client and just finished updating the accessibility features for v1.1.
It turns all of your headings into a dropdown with anchor links that can be sticky and is mobile responsive.

 
Alternatively, you could check out the Adlytic Marketing Table of Contents which also offers something very similar and is another great option.
The idea you have there is pretty cool and could be another idea for a plugin but isn't something that currently exists. Maybe I'll build one if I get a chance.

You should stay the body. You can remove (.homepage). 

Hi Tuanphan,
That is perfect! I just hated that black box around the button but your code worked a charm! 
Cant thank you enough! These forums are really helpful. Thankyou 😄 

Change code to this
<style> body.view-list header#header img { content: url(https://static1.squarespace.com/static/632334889a72c4229a80d565/t/634fbc80c1d7123d9ee8a4a3/1666169984378/Oppidan+Education+1+Dark.png); } body.view-list .shrink .header-title-logo img { visibility: hidden; } body.view-list .shrink .header-title-logo a { background-image: url(https://static1.squarespace.com/static/632334889a72c4229a80d565/t/634fbc8686f458657486f7d2/1666169990610/Oppidan+Education+1.png); background-size: contain; background-repeat: no-repeat; background-position: center center; } body.header--menu-open.view-list .shrink .header-title-logo img { visibility: hidden; } body.header--menu-open.view-list .shrink .header-title-logo a { background-image: url(https://static1.squarespace.com/static/632334889a72c4229a80d565/t/634fbc80c1d7123d9ee8a4a3/1666169984378/Oppidan+Education+1+Dark.png); background-size: contain; background-repeat: no-repeat; background-position: center center; } body.view-list .shrink .header-nav-item a { color: #132a42 !important; } body.view-list .shrink .header-actions-action--cta:before { color: #132a42 !important; } body.view-list .header-nav-folder-content a { color: #132a42 !important; } body.view-list .shrink .burger { -webkit-filter: invert(100%); filter: invert(100%); } body.view-list .mega-menu-on .header-title-logo img { visibility: hidden; } body.view-list .mega-menu-on .header-title-logo a { background-image: url(https://static1.squarespace.com/static/632334889a72c4229a80d565/t/634fbc8686f458657486f7d2/1666169990610/Oppidan+Education+1.png); background-size: contain; background-repeat: no-repeat; background-position: center center; } body.view-list .mega-menu-on .header-actions-action--cta:before { color: #132a42 !important; } </style>  

Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS.
@media screen and (max-width: 768px) { .tweak-mobile-bar-position-top-fixed .mobile-bar-wrapper { box-sizing: border-box; } header#header[data-nc-base="header"] { display: flex !important; position: absolute !important; top: 5px; right: calc(~"6vw + 32px"); z-index: 99999 !important; } header#header[data-nc-base="header"] .Icon--cart { width: 28px !important; height: 23px !important; } header#header[data-nc-base="header"] .site-header .Cart { font-size: 10px !important; line-height: 10px !important; } [data-nc-container="left"], [data-nc-container="center"], #secondaryNavWrapper { display: none !important; } }  

Thanks for the advice tuanphan. The site is on a Personal Plan so a deeper code fix isn't possible. My solution is just to move the image links downwards so they don't sit under the header block. It won't look as clean but holy moly I've spent too much time on trying to fix this problem. Thanks again for looking at it for me.

I worked out that when I turned off Parralax the images worked fine.  I'll have to do without.

If you are using 7.1 , you can use this anchor link.

Use this code
<style> .header-background-solid { background: #949598 !important; } .header-title-logo img { filter: brightness(0) invert(1); } .header-nav-item a{ color: white !important;} </style>

Don't remove any code in your current code. Try this CSS code
/* move nav center */ .header-layout-nav-center .header-title { width: auto !important; flex: unset !important; } .header-title-nav-wrapper { flex: 1 0 80% !important; }  

My idea is you can find a similar effect on Codepen, then share url, we can convert it to Squarespace easier 😄

Try change to this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script> jQuery(document).ready(function($){ setTimeout( function() { $('video').removeAttr('loop'); }, 5000); }); </script> If it still doesn't work, keep this code in Code Injection & let me know, we can check it again easier

Change code to this
section[data-section-id="651bf9672771553120576277"] { li.list-item { position: relative !important; } .list-item-content__button-container { position: absolute !important; top: 0; bottom: 0; left: 0; right: 0; } a.list-item-content__button.sqs-block-button-element { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; color: transparent !important; background-color: transparent !important; } }  

I did some more Googling today and found an older thread that fixed my problem.  Paul2009's response fixed my issue right up.  
 
 

It looks fine. Can you explain it a bit detail?
Also, have you try contacting Michael in Slack Group yet?

Add to Design > Custom CSS
/* Blog date category */ .blog-meta-section * { font-family: 'GTEestiLight' !important; } body .blog-item-wrapper .blog-item-meta-wrapper * { font-family: 'GTEestiLight' !important; }  

@KevinWalton so you shouldnt need the javascript to do anything here.
This css should work. You already have this
header { mix-blend-mode: difference; } but change it to what @tuanphanwas saying above.
body:not(.header--menu-open) header { mix-blend-mode: difference; }  

THANK YOU. This works!
Seriously I can't thank you guys enough. I have been trying to figure this out for over 2 years.
 
Thank you so much jaeveedee and tuanphan

Okay, I found the workaround. The form button pulls color from the primary button, so I needed a separate dedicated color theme with the colors I wanted for that specific button for the primary and adjusted the "color background on background" to blue as well. 

Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS.
.header-menu-cta a{ visibility: hidden !important; pointer-events: none !important; }  

Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS.
.blog-item-wrapper { .row.sqs-row .col .sqs-block { padding-top: 0 !important; padding-bottom: 0 !important; } .blog-item-content, .blog-meta-item, .blog-item-comments { margin-top: 0 !important; margin-bottom: 0 !important; } } #itemPagination { padding-top: 10px !important; padding-bottom: 10px !important; }