Radiquum/radiquum.github.io
1
0
Fork 0
mirror of https://github.com/Radiquum/radiquum.github.io.git synced 2025-05-08 13:59:34 +05:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: change photo change animation timing function

Browse source
This commit is contained in:
Kentai Radiquum 2024-09-16 22:36:28 +05:00
parent af9286b940
commit 389bcd76d4
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
2 changed files with 100 additions and 587 deletions
Download patch file Download diff file Expand all files Collapse all files

12
index.html
View file

@ -127,17 +127,17 @@
<!-- Photo Links -->
<div class="flex flex-col w-[344px] sm:w-[416px] gap-1 sm:gap-4">
<div class="relative w-[344px] sm:w-[416px] h-[376px] flex justify-end items-end overflow-hidden" id="photos-image">
<img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform duration-[var(--transform-duration,150ms)]" alt=""
<img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform ease-out duration-[var(--transform-duration,150ms)]" alt=""
src="./static/assets/photo_building.png" data-section-image="photos" data-slide="0" data-photo="photo_building" />
<img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform duration-[var(--transform-duration,150ms)]" alt=""
<img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform ease-out duration-[var(--transform-duration,150ms)]" alt=""
src="./static/assets/photo_dandelion.png" data-section-image="photos" data-slide="1" data-photo="photo_dandelion" />
<img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform duration-[var(--transform-duration,150ms)]" alt=""
<img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform ease-out duration-[var(--transform-duration,150ms)]" alt=""
src="./static/assets/photo_flowers.png" data-section-image="photos" data-slide="2" data-photo="photo_flowers" />
<img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform duration-[var(--transform-duration,150ms)]" alt=""
<img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform ease-out duration-[var(--transform-duration,150ms)]" alt=""
src="./static/assets/photo_plush.png" data-section-image="photos" data-slide="3" data-photo="photo_plush" />
<img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform duration-[var(--transform-duration,150ms)]" alt=""
<img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform ease-out duration-[var(--transform-duration,150ms)]" alt=""
src="./static/assets/photo_tower.png" data-section-image="photos" data-slide="4" data-photo="photo_tower" />
<img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform duration-[var(--transform-duration,150ms)]" alt=""
<img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform ease-out duration-[var(--transform-duration,150ms)]" alt=""
src="./static/assets/photo_trains.png" data-section-image="photos" data-slide="5" data-photo="photo_trains" />
<p class="font-bold text-[40px] leading-[1] p-[8px]">PHOTOS</p>
</div>