const INCLUDE_CSS=`
.inner {
opacity: 0;
}
.outer {
opacity: 0;
}
.logo {
opacity: 0;
}
.fade-in-fast {
opacity: 0;
}
.fade-in-slow {
opacity: 0;
}
.visible {
opacity: 1;
transition: opacity 0.3s ease-in-out;
}
.fade-in-slow.visible {
opacity: 1;
transition: opacity 1s ease-in-out;
}
.hoverable {
will-change: transform;
-webkit-backface-visibility: hidden;
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out 0.1s;
transform-origin: center;
transform-box: fill-box;
cursor: pointer;
}
.hoverable * {
transition: stroke-width 0.2s ease-in-out;
}
.hoverable.hover {
transform: scale(1.25);
}
.hoverable.hover * {
stroke-width: 16px;
}
.hoverable.muted {
opacity: 0.7;
}
`;
const CONNECTIONS={
"OUTER Payment": ["LOGO Paypal", "LOGO Klarna."],
};
function initKeyvisualSVG(){
var svg=document.getElementById("keyvisual-object").contentDocument;
var style=document.createElement("style");
style.innerHTML=INCLUDE_CSS;
svg.documentElement.appendChild(style);
svg.getElementById("InnerCircle").classList.add("fade-in-fast");
svg.getElementById("MiddleCircle").classList.add("fade-in-fast");
svg.getElementById("OuterCircle").classList.add("fade-in-fast");
svg.getElementById("GlowRing").classList.add("fade-in-slow");
svg.getElementById("GlowBlur").classList.add("fade-in-slow");
var groups=svg.querySelectorAll("#Keyvisual > *");
groups.forEach(function (group){
if(group.id.startsWith("INNER")){
group.classList.add("inner");
group.classList.add("hoverable");
}
if(group.id.startsWith("OUTER")){
group.classList.add("outer");
group.classList.add("hoverable");
}
if(group.id.startsWith("LOGO")){
group.classList.add("logo");
group.classList.add("hoverable");
}
if(group.id.startsWith("INNER")||group.id.startsWith("OUTER")){
var bbox=group.getBBox();
var rect=svg.createElementNS("http://www.w3.org/2000/svg", "rect");
const padding=50;
rect.setAttribute("x", bbox.x - padding);
rect.setAttribute("y", bbox.y - padding);
rect.setAttribute("width", bbox.width + 2 * padding);
rect.setAttribute("height", bbox.height + 2 * padding);
rect.setAttribute("fill", "none");
rect.setAttribute("pointer-events", "fill");
group.insertBefore(rect, group.firstChild);
group.addEventListener("mouseenter", function (){
group.classList.add("hover");
svg.querySelectorAll(".hoverable").forEach(function (otherGroup){
const highlight=CONNECTIONS[group.id];
if(otherGroup.id!==group.id){
otherGroup.classList.add("muted");
}
if(highlight&&highlight.includes(otherGroup.id)){
otherGroup.classList.remove("muted");
otherGroup.classList.add("hover");
}});
});
group.addEventListener("mouseleave", function (){
group.classList.remove("hover");
svg.querySelectorAll(".hoverable").forEach(function (otherGroup){
const highlight=CONNECTIONS[group.id];
if(otherGroup.id!==group.id){
otherGroup.classList.remove("muted");
}
if(highlight&&highlight.includes(otherGroup.id)){
otherGroup.classList.add("muted");
otherGroup.classList.remove("hover");
}});
});
}});
setTimeout(function (){
document.getElementById("keyvisual-object").classList.add("loaded");
}, 500);
}
function runKeyvisualAnimation(){
var svg=document.getElementById("keyvisual-object").contentDocument;
var inner=svg.querySelectorAll(".inner");
var outer=svg.querySelectorAll(".outer");
var logo=svg.querySelectorAll(".logo");
const DELAY_INNER_MS=100;
const DELAY_OUTER_MS=100;
const DELAY_LOGO_MS=50;
var delay=0;
svg.getElementById("InnerCircle").classList.add("visible");
inner.forEach(function (group){
setTimeout(function (){
requestAnimationFrame(function (){
group.classList.add("visible");
});
}, delay);
delay +=DELAY_INNER_MS;
});
setTimeout(function (){
svg.getElementById("MiddleCircle").classList.add("visible");
}, delay + 100);
setTimeout(function (){
svg.getElementById("GlowRing").classList.add("visible");
}, delay + 200);
delay +=300;
outer.forEach(function (group){
setTimeout(function (){
group.classList.add("visible");
}, delay);
delay +=DELAY_OUTER_MS;
});
setTimeout(function (){
svg.getElementById("OuterCircle").classList.add("visible");
}, delay + 100);
delay +=300;
for (let i=0; i < logo.length; i++){
setTimeout(function (){
requestAnimationFrame(function (){
logo[i].classList.add("visible");
});
}, delay);
delay +=DELAY_LOGO_MS;
}
setTimeout(function (){
svg.getElementById("GlowBlur").classList.add("visible");
}, delay + 250);
};