11.06.2018, 21:52
Dodałem tak zwany ripple effect korzystając z tego poradnika: https://codepen.io/thulstrup/pen/OVROEm no i generalnie działa ale problem w tym że efekt wyjeżdża poza "swój" obszar.
Efekt dodałem na przycisku na pasku nawigacji (ten niebieski kwadracik z domkiem w środku). Najlepiej samemu zobaczyć o co chodzi.
I tak przy okazji, kiedy dodaję kod js
do headerinclude (w ten sposób co podałem) to nie działa, kiedy dodam go jednak do szablonu nav (tam gdzie znajduje się przycisk) to wszystko działa. Problem w tym że chciałbym tym efektem objąć nieco więcej buttonów a do każdego szablonu dodawać kod js to chyba niezbyt dobry pomysł..
Efekt dodałem na przycisku na pasku nawigacji (ten niebieski kwadracik z domkiem w środku). Najlepiej samemu zobaczyć o co chodzi.
I tak przy okazji, kiedy dodaję kod js
Kod:
<script>
var links = document.querySelectorAll('.ripplelink');
for (var i = 0, len = links.length; i < len; i++) {
links[i].addEventListener('click', function(e) {
var targetEl = e.target;
var inkEl = targetEl.querySelector('.ink');
if (inkEl) {
inkEl.classList.remove('animate');
}
else {
inkEl = document.createElement('span');
inkEl.classList.add('ink');
inkEl.style.width = inkEl.style.height = Math.max(targetEl.offsetWidth, targetEl.offsetHeight) + 'px';
targetEl.appendChild(inkEl);
}
inkEl.style.left = (e.offsetX - inkEl.offsetWidth / 2) + 'px';
inkEl.style.top = (e.offsetY - inkEl.offsetHeight / 2) + 'px';
inkEl.classList.add('animate');
}, false);
}
</script>do headerinclude (w ten sposób co podałem) to nie działa, kiedy dodam go jednak do szablonu nav (tam gdzie znajduje się przycisk) to wszystko działa. Problem w tym że chciałbym tym efektem objąć nieco więcej buttonów a do każdego szablonu dodawać kod js to chyba niezbyt dobry pomysł..
