@paldong-creater
Posted
Thanks for the reply. "I use javascript to create and append the html to a div". I understand the animation part and how you created the circle, circlesContainer using javaScript but I did not understand how you brought rippleContainer in the html and spcially ripple.html into index.html Can you please explain your approch with simple example. I am in awe like you are able to do it without effecting the position of other containers.
@paldong-creater
Posted
Hi, I like the radial animation for the winner. How did you implemented it. I failed to do so....
@tomahawk-jupiter
Posted
@paldong-creater
The effect in isolation is below (its also in my repo ripple.html). Once I figured out how that would look, I then figured out how to add it where it was needed.
I use javascript to create and append the html to a div (which is already in index.html) for either the player or the house (#player-ripple-container or #house-ripple-container). This is done in main.js in a function called applyRippleEffect
</head>
<body>
<div class="circles-container">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</body>
const applyRippleEffect = (result) => {
const circlesContainer = document.createElement("div");
circlesContainer.className = "circles-container";
for (let i = 0; i < 4; i++) {
const circle = document.createElement("div");
circle.className = "circle";
circlesContainer.appendChild(circle);
}
if (result === "DRAW") return;
const rippleContainer =
result === "YOU WIN" ? playerRippleContainer : houseRippleContainer;
rippleContainer.appendChild(circlesContainer);
};
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord
