truncgit/citrus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance company history timeline with reveal animations and improved accessibility, optimizing user engagement and visual appeal

Browse Source
This commit is contained in:
Ümit Tunç
2026-05-21 20:28:27 +03:00
parent d24c9e4502
commit f75632d0e8
1 changed files with 100 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/company-history/timeline.blade.php
+100 -8
View File
@@ -19,23 +19,23 @@
<section class="company-history-timeline-section company-history-fonts wrapper !bg-[#f4f6f8] !pt-8 xl:!pt-12 lg:!pt-12 md:!pt-12">
<div class="container py-20 xl:py-28 lg:py-28 md:py-28">
@if($showHeader)
<div class="flex flex-wrap mx-[-15px] !mb-14 !text-center">
<div class="flex flex-wrap mx-[-15px] !mb-14 !text-center company-history-timeline__header">
<div class="w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
<span class="company-history-timeline__section-badge inline-block text-[0.75rem] tracking-[0.12rem] uppercase font-bold !mb-3" style="color: #e31e24;">
<span class="company-history-timeline__section-badge company-history-timeline__reveal inline-block text-[0.75rem] tracking-[0.12rem] uppercase font-bold !mb-3" style="color: #e31e24;">
{{ __('company_history.timeline_section_badge') }}
</span>
<h2 class="company-history-timeline__section-title !text-[calc(1.345rem_+_1.14vw)] font-bold !leading-[1.2] xl:!text-[2.2rem] !mb-3">
<h2 class="company-history-timeline__section-title company-history-timeline__reveal !text-[calc(1.345rem_+_1.14vw)] font-bold !leading-[1.2] xl:!text-[2.2rem] !mb-3">
{{ __('company_history.timeline_section_title') }}
</h2>
<p class="company-history-timeline__section-subtitle lead text-[1.05rem] !leading-[1.6] !text-[#60697b] max-w-[42rem] !mx-auto">
<p class="company-history-timeline__section-subtitle company-history-timeline__reveal lead text-[1.05rem] !leading-[1.6] !text-[#60697b] max-w-[42rem] !mx-auto">
{{ __('company_history.timeline_section_subtitle') }}
</p>
</div>
</div>
@endif
<div class="company-history-timeline">
<div class="company-history-timeline__start">
<div class="company-history-timeline" data-timeline-animate>
<div class="company-history-timeline__start company-history-timeline__reveal">
<span>{{ __('company_history.timeline_start') }}</span>
</div>
@@ -51,7 +51,7 @@
$content = method_exists($item, 'translate') ? ($item->translate('content') ?: $item->content) : $item->content;
@endphp
<article
class="company-history-timeline__item company-history-timeline__item--{{ $position }}"
class="company-history-timeline__item company-history-timeline__item--{{ $position }} company-history-timeline__reveal"
style="--item-color: {{ $color }};"
>
<div class="company-history-timeline__side company-history-timeline__side--outer">
@@ -84,7 +84,7 @@
@endforeach
</div>
<div class="company-history-timeline__finish">
<div class="company-history-timeline__finish company-history-timeline__reveal">
<span>{{ __('company_history.timeline_finish') }}</span>
</div>
</div>
@@ -320,6 +320,49 @@
margin-left: auto;
}
.company-history-timeline__reveal {
opacity: 0;
transform: translate3d(0, 32px, 0);
transition:
opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: var(--reveal-delay, 0s);
will-change: opacity, transform;
}
.company-history-timeline__item--left.company-history-timeline__reveal {
transform: translate3d(-36px, 28px, 0);
}
.company-history-timeline__item--right.company-history-timeline__reveal {
transform: translate3d(36px, 28px, 0);
}
.company-history-timeline__reveal.is-visible {
opacity: 1;
transform: translate3d(0, 0, 0);
}
.company-history-timeline__header .company-history-timeline__section-badge {
--reveal-delay: 0s;
}
.company-history-timeline__header .company-history-timeline__section-title {
--reveal-delay: 0.08s;
}
.company-history-timeline__header .company-history-timeline__section-subtitle {
--reveal-delay: 0.16s;
}
@media (prefers-reduced-motion: reduce) {
.company-history-timeline__reveal {
opacity: 1;
transform: none;
transition: none;
}
}
@media (max-width: 767px) {
.company-history-timeline__track::before {
left: 24px;
@@ -371,8 +414,57 @@
.company-history-timeline__item--left .company-history-timeline__text {
margin-left: 0;
}
.company-history-timeline__item--left.company-history-timeline__reveal,
.company-history-timeline__item--right.company-history-timeline__reveal {
transform: translate3d(0, 28px, 0);
}
}
</style>
@endpush
@push('scripts')
<script>
(function () {
const timeline = document.querySelector('[data-timeline-animate]');
if (!timeline) {
return;
}
const revealElements = timeline.closest('.company-history-timeline-section')
?.querySelectorAll('.company-history-timeline__reveal');
if (!revealElements || revealElements.length === 0) {
return;
}
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
revealElements.forEach(function (element) {
element.classList.add('is-visible');
});
return;
}
const observer = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (!entry.isIntersecting) {
return;
}
entry.target.classList.add('is-visible');
observer.unobserve(entry.target);
});
}, {
root: null,
rootMargin: '0px 0px -10% 0px',
threshold: 0.12,
});
revealElements.forEach(function (element) {
observer.observe(element);
});
})();
</script>
@endpush
@endonce
@endif