Portfolio Category

Web Performance

Academica

Academica Art Direction and design – RED032 Web design and Development – Jaume Subirats Date – Oct 2014 Link – academica.school The official program for the international recognition of school-leaving qualifications, created and developed by ...
0 comments

Pol·len Edicions

Pol·len edicions Website and ecommerce An independent, cooperative, young, formed by three partners, Jordi, Aida and La Mar. Specialized in the eco-edition of critical-thinking books, we have headquarters at Carrer ...
0 comments

Espai Contrabandos

Espai Contrabandos Promoted and managed by the cooperative Pol·len Edicions, Espai Contrabandos It is an open project that hosts fifty independent publishing labels in order to visibilize and promote independent ...
0 comments

Club Bonasport

Bonasport Club Tennis, Padel, Sport Art Direction and design – RED032 Developed own theme Web development – Jaume Subirats Date – Feb 2018 Link – bonasport.com A sports club specialized in tennis, paddle tennis, swimming, fitness ...
0 comments

LaBreu Edicions

LaBreu Edicions LaBreu Edicions is a non-profit cultural association from which we intend to carry out a support and dissemination of quality poetry and literature in the Catalan language. Own theme ...
0 comments
22

We Web

FollowLin.X.
...
window.addEventListener("load", initCursor); function initCursor() { const $img = document.querySelector("#site-header"); const { $width } = $img.getBoundingClientRect(); const $halfImgWidth = $width / 2; $img.addEventListener("mousemove", function (e) { const xPos = e.pageX - $img.offsetLeft; /*IE11 need this*/ //this.classList.remove("cursor-prev"); //this.classList.remove("cursor-next"); this.classList.remove("cursor-prev", "cursor-next"); if (xPos > $halfImgWidth) { this.classList.add("cursor-next"); } else { this.classList.add("cursor-prev"); } }); } // Cursor ICON substitition <-- // Button Ripple Effect // Function to add the ripple effect function addRippleEffect(event) { const button = event.currentTarget; const ripple = document.createElement("span"); const rect = button.getBoundingClientRect(); const size = Math.max(rect.width, rect.height); const x = event.clientX - rect.left - size / 2; const y = event.clientY - rect.top - size / 2; ripple.style.width = ripple.style.height = `${size}px`; ripple.style.left = `${x}px`; ripple.style.top = `${y}px`; ripple.classList.add("ripple"); button.appendChild(ripple); ripple.addEventListener("animationend", function() { ripple.remove(); }); } // Function to attach the ripple effect to buttons with given class names function attachRippleEffectToButtons(classNames) { classNames.forEach(className => { const buttons = document.querySelectorAll(`.${className}`); if (buttons.length === 0) { console.warn(`No elements found for class ${className}`); return; } buttons.forEach(button => { button.addEventListener("click", addRippleEffect); }); }); } // Attach the ripple effect when the document is ready document.addEventListener("DOMContentLoaded", function() { const targetClassNames = ["btn-mat", "another-class"]; attachRippleEffectToButtons(targetClassNames); function createCircleInner() { const circleInner = document.createElement('div'); circleInner.className = 'circle-inner'; const box = document.createElement('div'); box.className = 'box'; circleInner.appendChild(box); const smallCircle = document.createElement('div'); smallCircle.className = 'small-circle'; box.appendChild(smallCircle); for (let i = 1; i <= 10; i++) { const span = document.createElement('span'); span.style.setProperty('--i', i); box.appendChild(span); } document.body.appendChild(circleInner); } createCircleInner(); }); window.onbeforeunload = function leavingPage(){ console.log('leaving'); return null; } -->