Compare commits
No commits in common. "0c8949786a09ea0244fbe651a1fc018ee9f920b6" and "0ab7c20ee254f8116bb288b5c09ddf602ccf7620" have entirely different histories.
0c8949786a
...
0ab7c20ee2
5 changed files with 10 additions and 140 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 542 KiB |
|
|
@ -270,24 +270,17 @@ div.ficha figure
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
div.ficha img
|
||||
div.ficha figure img
|
||||
{
|
||||
margin: 0;
|
||||
aspect-ratio: 3 / 4;
|
||||
}
|
||||
|
||||
div.ficha:not(.easteregg-visible) img
|
||||
{
|
||||
animation-name: image-change;
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-iteration-count: infinite;
|
||||
animation-duration: 10s;
|
||||
}
|
||||
|
||||
div.ficha.easteregg-visible img:not(.easteregg)
|
||||
{ opacity: 0; }
|
||||
|
||||
div.ficha div.description, div.ficha div.easteregg
|
||||
div.ficha div.description
|
||||
{
|
||||
grid-row: 2;
|
||||
grid-column: 1 / 3;
|
||||
|
|
@ -303,67 +296,31 @@ div.ficha div.description, div.ficha div.easteregg
|
|||
@keyframes image-change
|
||||
{
|
||||
0% { opacity: 0; }
|
||||
|
||||
10% { opacity: 1; }
|
||||
|
||||
50% { opacity: 1; }
|
||||
|
||||
60% { opacity: 0; }
|
||||
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
20%, 60% { transform: translateX(-8px) rotate(-1deg); }
|
||||
40%, 80% { transform: translateX(8px) rotate(1deg); }
|
||||
}
|
||||
|
||||
.animate-shake
|
||||
{ animation: shake 0.3s ease-in-out; }
|
||||
|
||||
div.easteregg-visible
|
||||
{ animation: glow 1s infinite alternate ease-in-out; }
|
||||
|
||||
@keyframes glow {
|
||||
0% {
|
||||
border-color: orange;
|
||||
box-shadow: 0 0 10px orange,
|
||||
0 0 20px orange;
|
||||
}
|
||||
|
||||
100% {
|
||||
border-color: red;
|
||||
box-shadow: 0 0 10px red,
|
||||
0 0 30px red;
|
||||
}
|
||||
}
|
||||
|
||||
div.easteregg-visible div.description
|
||||
{ display: none; }
|
||||
|
||||
div:not(.easteregg-visible) .easteregg
|
||||
{ display: none; }
|
||||
|
||||
div.easteregg-visible .easteregg
|
||||
{ display: block; }
|
||||
|
||||
div.ficha figure img:nth-of-type(1)
|
||||
{ animation-delay: 0s;}
|
||||
|
||||
div.ficha figure img:not(:nth-of-type(1))
|
||||
div.ficha figure img:nth-of-type(2)
|
||||
{
|
||||
animation-delay: 5s;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
left: 0rem;
|
||||
top: 0rem;
|
||||
width: 100%;
|
||||
width: 100%;;
|
||||
padding: inherit;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
div.ficha figure img:not(:nth-of-type(1)):not(.easteregg)
|
||||
{ opacity: 0; animation-delay: 5s; }
|
||||
|
||||
div.ficha img.easteregg
|
||||
{ opacity: 1; }
|
||||
|
||||
|
||||
@media print
|
||||
{
|
||||
:root
|
||||
|
|
|
|||
|
|
@ -1,79 +0,0 @@
|
|||
const cards = document.querySelectorAll('div.ficha');
|
||||
|
||||
for (const card of cards)
|
||||
{
|
||||
card.addEventListener('click', handleCardClick);
|
||||
}
|
||||
|
||||
const eastereggContainers = document.querySelectorAll('div.ficha:has(.easteregg)');
|
||||
|
||||
const messageBox = document.getElementById('message-box');
|
||||
|
||||
let clickCount = 0;
|
||||
let lastClickTime = 0;
|
||||
const clickThreshold = 800;
|
||||
const expandDuration = 5000;
|
||||
|
||||
let hideTimeoutId = null;
|
||||
|
||||
function hideEastereggs() {
|
||||
for (const div of eastereggContainers)
|
||||
{
|
||||
div.classList.remove('easteregg-visible');
|
||||
div.classList.add('easteregg-hidden');
|
||||
}
|
||||
}
|
||||
|
||||
function expandEastereggs() {
|
||||
for (const div of eastereggContainers)
|
||||
{
|
||||
div.classList.add('easteregg-visible');
|
||||
div.classList.remove('easteregg-hidden');
|
||||
}
|
||||
|
||||
// Clear any existing timeout and set a new one
|
||||
if (hideTimeoutId) {
|
||||
clearTimeout(hideTimeoutId);
|
||||
}
|
||||
|
||||
hideTimeoutId = setTimeout(
|
||||
() => { hideEastereggs(); },
|
||||
expandDuration
|
||||
);
|
||||
|
||||
clickCount = 0;
|
||||
}
|
||||
|
||||
function handleCardClick(event) {
|
||||
const now = Date.now();
|
||||
|
||||
let element = event.target;
|
||||
|
||||
while (!element.classList.contains("ficha"))
|
||||
{ element = element.parentElement }
|
||||
|
||||
element.classList.add('animate-shake');
|
||||
|
||||
setTimeout(
|
||||
() => { element.classList.remove('animate-shake'); },
|
||||
300
|
||||
);
|
||||
|
||||
// Determine if the click is 'in a row'
|
||||
if (now - lastClickTime < clickThreshold)
|
||||
{ clickCount++; }
|
||||
else
|
||||
{
|
||||
clickCount = 1;
|
||||
if (element.classList.contains('easteregg-visible'))
|
||||
{ hideEastereggs(); }
|
||||
}
|
||||
|
||||
lastClickTime = now;
|
||||
|
||||
// Check for the 3-click trigger
|
||||
if (clickCount >= 3)
|
||||
{ expandEastereggs(); }
|
||||
}
|
||||
|
||||
window.onload = () => { hideEastereggs(); }
|
||||
|
|
@ -15,8 +15,6 @@
|
|||
<img src="/chapa-sigmoide/mateus.jpg">
|
||||
|
||||
<img src="/chapa-sigmoide/mateus-avatar.png"/>
|
||||
|
||||
<img class="easteregg" src="/chapa-sigmoide/mateus-easteregg.gif"/>
|
||||
</figure>
|
||||
|
||||
<div class="description">
|
||||
|
|
@ -26,10 +24,6 @@
|
|||
|
||||
<p><a href="mateus">Mais</a></p>
|
||||
</div>
|
||||
|
||||
<div class="easteregg">
|
||||
<p>UwU</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ficha">
|
||||
|
|
|
|||
|
|
@ -32,6 +32,4 @@
|
|||
|
||||
title.textContent = document.querySelector('header').append(h1);
|
||||
</script>
|
||||
|
||||
<script src="/javascript/chapa_sigmoide.js"></script>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue