Jak udělat v Elementoru, aby se lottie animace hamburger menu po kliknutí přeměnila na křížek a po kliknutí zpět na hamburger?
U jednoho z mých klientů jsem řešil způsob, jak zajistit, aby po kliknutí na lottie animaci hamburger menu (nejprve se objevil vyskakovací pop-up s nabídkou menu), následovala plynulá animace, která převede ikonu na křížek. Po dalším kliknutí by se pak opět změnila zpět na hamburger ikonu. Prozkoumal jsem celý internet, ale nenašel jsem vhodné řešení. Nakonec mi však pomohl ChatGPT, který mi upravil kód. Zde je jeho přepracovaná verze kódu, kterou můžete použít.
Užijte si ji!
Názorná ukázka
Před vložením pojmenujte svoji lottie CSS třídou „trigger-on-click„.
Kód, který vložíte do HTML Elementu
<script>
;(w => {
w.addEventListener('elementor/frontend/init', () => {
elementorFrontend.hooks.addAction('frontend/element_ready/lottie.default', $scope => {
if ($scope.hasClass('trigger-on-click')) {
setTimeout(() => {
initListener();
}, 300);
}
const initListener = () => {
const lottie = $scope.find('.e-lottie__animation').data('lottie');
const parent = $scope.parent();
let clickCount = 0;
lottie.setDirection(1);
lottie.stop();
w.lottie = lottie;
parent.click(() => {
clickCount++;
console.info('TOGGLE LOTTIE');
if (clickCount % 2 === 0) {
lottie.setDirection(-1);
lottie.setSpeed(2);
} else {
lottie.setDirection(1);
lottie.setSpeed(2);
}
lottie.play();
});
};
});
});
})(window);
</script>