Hallo,
ihr habt hier so eine tolle Animation (Android?) wenn man auf "Start", "Blog", "Mein Konto", "Marktplatz" usw. geht. Gefällt mir richtig gut.
Würde diese Animation gerne auf ein paar Buttons in meinem Forum anwenden. Gibt es die Möglichkeit an ein Tutorial ran zu kommen
wie man das macht?
Javascript:
{literal}
<script data-relocate="true">
//<![CDATA[
$(function() {
var mainMenuEffect, d, x, y;
$(".mainMenu > ul > li > a").click(function(e){
if ($(this).find(".mainMenuEffect").length == 0) {
$(this).prepend("<span class='mainMenuEffect'></span>")
}
mainMenuEffect = $(this).find(".mainMenuEffect");
mainMenuEffect.removeClass("mainMenuEffectDrop");
if(!mainMenuEffect.height() && !mainMenuEffect.width()) {
d = Math.max($(this).outerWidth(), $(this).outerHeight());
mainMenuEffect.css({height: d, width: d});
}
x = e.pageX - $(this).offset().left - mainMenuEffect.width()/2;
y = e.pageY - $(this).offset().top - mainMenuEffect.height()/2;
mainMenuEffect.css({top: y+'px', left: x+'px'}).addClass("mainMenuEffectDrop");
});
});
//]]>
</script>
{/literal}CSS:
.mainMenuEffect {
display: block;
position: absolute;
background: rgba(255, 255, 255, 0.5);
border-radius: 100%;
-webkit-transform: scale(0);
transform: scale(0);
}
.mainMenuEffect.mainMenuEffectDrop {
-webkit-animation: ripple 0.65s linear;
animation: ripple 0.65s linear;
}
@-webkit-keyframes ripple {
100% {
opacity: 0;
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
}
@keyframes ripple {
100% {
opacity: 0;
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
}
.mainMenu > ul > li > a {
position: relative;
overflow: hidden;
}Selektor für den Effekt (Javascript + CSS):
.mainMenu > ul > li > a
Hey, super. Danke für deine Antwort. Wo füge ich den JavaScript-Quellcode ein?
Ist egal, einfach irgendwo rein.
Nein ernsthaft... ich hab absolut kein Plan wo rein.
Schmeiß den Code doch einfach im ACP unter System >> Allgemein >>Seite >> Footer-Code.
Kann ich im Footer Code auch /**/ benutzen um den Code zu beschreiben?
Und noch eine Frage. Wie muss ich den Code ersetzen wenn ich diesen Effekt im User Panel haben möchte?
Das sollte dann: .userPanelItems > li > a sein. Bin mir aber nicht sicher ob das wirklich im Userpanel ohne weiteres funktioniert. Ansonsten geht auch /**/.