Embed Notice

HTML Code

<blockquote style="position: relative; padding-left: 55px;"><section><a href="https://eientei.org/objects/8793ede8-0e98-4928-a45a-69241526887f">Yukkuri (iamtakingiteasy@eientei.org)'s status on Saturday, 08-Mar-2025 21:39:44 JST</a><a href="https://eientei.org/users/iamtakingiteasy" title="iamtakingiteasy@eientei.org"><img src="https://gnusocial.jp/avatar/2644-48-20220729235443.webp" width="48" height="48" alt="Yukkuri" style="position: absolute; left: 0; top: 0;">Yukkuri</a><div><a href="https://sacred.harpy.faith/objects/d5ad750c-6a6d-42b4-8082-07254e6fc2cc" rel="in-reply-to">in reply to</a><ul><li><li><a href="https://gnusocial.jp/user/250890" title="sally@freesoftwareextremist.com">𝅙𝅙𝅙𝅙𝅙𝅙𝅙𝅙</a></li><li><a href="https://gnusocial.jp/user/284835" title="yoruka@eientei.org">夜化</a></li></ul></div></section><article><p><a href="https://sacred.harpy.faith/users/Zergling_man">@Zergling_man</a> <a href="https://eientei.org/users/Yoruka">@Yoruka</a> <a href="https://freesoftwareextremist.com/users/sally">@sally</a> You can do away with most of JS with just CSS counters and animations:</p>&lt;div id="nojs" class="hidden"&gt;
  &lt;p&gt;Or wait &lt;n id="tick"&gt;&lt;/n&gt; seconds...&lt;/p&gt;
&lt;/div&gt;
&lt;style type="text/css"&gt;
@property --tick { syntax: "&lt;integer&gt;"; initial-value: 0; inherits: false; }
@keyframes tick { from { --tick: 3; } }
@keyframes hide { from { width: 100%; height: 100%; } }.hidden {
  display: none;
}.nojs {
  display: block;
  position: absolute;
  padding: 0;
  margin: 0;
  left: 0;
  top: 0;
  right: 100%;
  bottom: 100%;
  width: 0;
  height: 0;
  overflow: hidden;
  animation: hide 3s steps(1, end);
  background: <a href="https://eientei.org/tag/fff">#fff</a>;
}<a href="https://eientei.org/tag/tick">#tick</a> {
  animation: tick 3s steps(3);
  counter-reset: tick var(--tick);
}<a href="https://eientei.org/tag/tick">#tick</a>::after {
  content: counter(tick);
}
&lt;/style&gt;
<p>then the only JS line you need:</p>document.getElementById("nojs").className = "nojs"</article><footer><a rel="bookmark" href="https://gnusocial.jp/conversation/4696326#notice-9195274">In conversation</a><time datetime="2025-03-08T21:39:44+09:00" title="Saturday, 08-Mar-2025 21:39:44 JST">about a year ago</time> <span>from <span><a href="https://eientei.org/objects/8793ede8-0e98-4928-a45a-69241526887f" rel="external" title="Sent from eientei.org via ActivityPub">eientei.org</a></span></span><a href="https://eientei.org/objects/8793ede8-0e98-4928-a45a-69241526887f">permalink</a></footer></blockquote>

Corresponding Notice

Embed this notice
Yukkuri (iamtakingiteasy@eientei.org)'s status on Saturday, 08-Mar-2025 21:39:44 JSTYukkuri
in reply to
@Zergling_man @Yoruka @sally You can do away with most of JS with just CSS counters and animations:
<div id="nojs" class="hidden"> <p>Or wait <n id="tick"></n> seconds...</p> </div> <style type="text/css"> @property --tick { syntax: "<integer>"; initial-value: 0; inherits: false; } @keyframes tick { from { --tick: 3; } } @keyframes hide { from { width: 100%; height: 100%; } } .hidden { display: none; } .nojs { display: block; position: absolute; padding: 0; margin: 0; left: 0; top: 0; right: 100%; bottom: 100%; width: 0; height: 0; overflow: hidden; animation: hide 3s steps(1, end); background: #fff; } #tick { animation: tick 3s steps(3); counter-reset: tick var(--tick); } #tick::after { content: counter(tick); } </style>
then the only JS line you need:
document.getElementById("nojs").className = "nojs"
In conversationabout a year ago from eientei.orgpermalink

Public

Embed Notice

HTML Code

Corresponding Notice