Implementieren von anime.min.js zu animieren von Artikeln beim laden der Seite
Folgende Dateien in den Ordner /tempaltes/shaper_helixultimate/js/
anime.min.js
blog-animations.js
In /tempaltes/shaper_helixultimate/index.php folgenden Eintrag direkt vor </body> einfügen
<script src="https://christian.boehler.cc/templates/shaper_helixultimate/js/anime.min.js"></script>
<script src="https://christian.boehler.cc/templates/shaper_helixultimate/js/blog-animations.js"></script>
in Joomla im Tempalte Helis Ultimate unter Cutom Code / Custom CSS folgende Einträge hinzufügen
ganz oben
/* WICHTIG: Scroll-Leisten kontrollieren */
body, html {
overflow-x: hidden !important;
overflow-y: auto !important; /* Scrollen erlauben wenn nötig */
height: 100%;
}
/* Kein Overflow auf main-content und container - für Dropdown-Menü */
.main-content {
overflow: visible !important;
}
.container {
overflow: visible !important;
}
/* Wrapper-Elemente die Scrolls verursachen könnten */
#sp-wrapper,
#sp-page-builder,
.body-innerwrapper {
overflow: visible !important;
}
/* Nur für Blog-Items overflow hidden */
.blog-items {
overflow: hidden; /* Animationen lösen keinen extra Scroll aus */
}
.blog-item, .item, .article, .article-details {
position: relative;
opacity: 0;
transform: translateY(50px);
will-change: transform, opacity;
}
ganz unten
/* Dropdown-Menü Einstellungen */
.sp-megamenu-wrapper {
overflow: visible !important;
}
.sp-megamenu-parent {
overflow: visible !important;
position: relative;
}
/* Dropdown sichtbar machen */
.sp-megamenu-parent > li.sp-has-child:hover > .sp-dropdown,
.sp-megamenu-parent > li.sp-has-child:focus-within > .sp-dropdown {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Dropdown initial verstecken */
.sp-dropdown {
display: none;
visibility: hidden;
opacity: 0;
transition: all 0.3s ease;
position: absolute;
z-index: 9999;
}
/* Pfeilrotation beim Hover */
body.ltr .sp-megamenu-parent>li.sp-has-child>a:after {
content: "▼";
display: inline-block;
margin-left: 6px;
transition: transform 0.3s ease;
}
body.ltr .sp-megamenu-parent>li.sp-has-child:hover>a:after {
transform: rotate(180deg);
}