ourworld_web/www_threefold_io
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update logos animation

Browse Source
This commit is contained in:
Ehab Hassan
2024-05-12 11:56:25 +03:00
parent 726ac881c1
commit 2a70e0860a
4 changed files with 149 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
templates/shortcodes/logo_slider.html
View File

@@ -15,7 +15,17 @@
<div class="border-t-2 mb-6 border-gray-200"></div>
<ul x-ref="logos" class=" my-10 flex items-center justify-center animate-infinite-scroll">
<div
x-data="{}"
x-init="$nextTick(() => {
let ul = $refs.logos;
ul.insertAdjacentHTML('afterend', ul.outerHTML);
ul.nextSibling.setAttribute('aria-hidden', 'true');
})"
class="w-full inline-flex flex-nowrap overflow-hidden [mask-image:_linear-gradient(to_right,transparent_0,_black_128px,_black_calc(100%-128px),transparent_100%)]"
>
<ul x-ref="logos" class="flex items-center justify-center md:justify-start [&_li]:mx-8 [&_img]:max-w-none animate-infinite-scroll">
<li>
<img src="images/zictia_black.png" alt="Facebook" />
</li>
@@ -44,6 +54,37 @@
<img src="images/temple_black.png" alt="Sass" />
</li>
</ul>
<ul x-ref="logos" class="flex items-center justify-center md:justify-start [&_li]:mx-8 [&_img]:max-w-none animate-infinite-scroll" aria-hidden="true">
<li>
<img src="images/zictia_black.png" alt="Facebook" />
</li>
<li>
<img src="images/vverse_black.png" alt="Disney" />
</li>
<li>
<img src="images/social_network_black.png" alt="Airbnb" />
</li>
<li>
<img src="images/vevrse_black.png" alt="Apple" />
</li>
<li>
<img src="images/ict_black.png" alt="Spark" />
</li>
<li>
<img src="images/holochain_black.png" alt="Samsung" />
</li>
<li>
<img src="images/sikana_black.png" alt="Quora" />
</li>
<li>
<img src="images/ourworld_black.png" alt="Sass" />
</li>
<li>
<img src="images/temple_black.png" alt="Sass" />
</li>
</ul>
</div>
<div class="border-t-2 mt-6 border-gray-200"></div>