Skip to content

Commit

Permalink
Testimonial fixes (arrows and transition) (#164)
Browse files Browse the repository at this point in the history
* fix arrow position and add animation

* add console log in order to check env vars

* add possibility to scroll testimonials on mobile - needs to be checked

* delete consolelog
  • Loading branch information
ail3ngrimaldi authored Jul 19, 2024
1 parent 8003937 commit 05983d0
Show file tree
Hide file tree
Showing 2 changed files with 85 additions and 42 deletions.
43 changes: 37 additions & 6 deletions css/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -168,19 +168,49 @@ figure.logo svg {
}

/*Testimonial*/
#testimonials, #testimonials>article {
flex-direction: column;
justify-content: center;
overflow: hidden;
}

.testimonials-container {
position: relative;
min-height: 600px;
width: 70%;
display: flex;
align-items: center;
position: relative;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}

.testimonial {
max-width: 60%;
margin: 0 auto;
position: absolute;
left: 100%;
transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out, left 0.5s ease-in-out;
opacity: 0;
background-color: var(--clr-white);
border-radius: 35px;
padding: 2em;
box-shadow: 4px 4px 5px -3px rgba(158,158,158,0.47);
-webkit-box-shadow: 4px 4px 5px -3px rgba(158,158,158,0.47);
-moz-box-shadow: 4px 4px 5px -3px rgba(158,158,158,0.47);
min-width: 100%;
flex: 0 0 auto;
scroll-snap-align: start;
}

.testimonial.active {
opacity: 1;
left: 0;
transform: translateX(0);
}

.testimonial.hidden {
display: none;
left: -100%;
opacity: 0;
transform: translateX(-100%);
}

.avatar {
Expand All @@ -192,13 +222,14 @@ figure.logo svg {

.testimonial-message {
font-style: italic;
padding: 1rem;
padding: 1rem;
}

.arrow {
position: absolute;
position: fixed;
top: 50%;
transform: translateY(-50%);
z-index: 1;
}

.left {
Expand Down
84 changes: 48 additions & 36 deletions index.liquid
Original file line number Diff line number Diff line change
Expand Up @@ -86,26 +86,26 @@ data:
{% endif %}

{% if home_section.id == "testimonials" %}
<section id="testimonials" class="light-lavender-bg center">
<article class="max animated column">
<h2 class="dark-lavender-text">{{ home_section.title }}</h2>
<div class="testimonials-container">
{% for testimonial in home_section.testimonials %}
<div class="testimonial {% unless forloop.first %}hidden{% endunless %}">
<img src="{{ testimonial.avatar }}" alt="Avatar de {{ testimonial.person }}" class="avatar">
<p class="testimonial-message">{{ testimonial.message }}</p>
<p class="testimonial-person bolder">{{ testimonial.person }}</p>
</div>
{% endfor %}
<a class="arrow left" id="prevTestimonial">
{% include "left.svg" %}
</a>
<a class="arrow right" id="nextTestimonial">
{% include "right.svg" %}
</a>
</div>
</article>
</section>
<section id="testimonials" class="light-lavender-bg center">
<article class="max animated column">
<h2 class="dark-lavender-text">{{ home_section.title }}</h2>
<div class="testimonials-container">
{% for testimonial in home_section.testimonials %}
<div class="testimonial {% if forloop.first %}active{% endif %}">
<img src="{{ testimonial.avatar }}" alt="Avatar de {{ testimonial.person }}" class="avatar">
<p class="testimonial-message">{{ testimonial.message }}</p>
<p class="testimonial-person bolder">{{ testimonial.person }}</p>
</div>
{% endfor %}
<a class="arrow left" id="prevTestimonial">
{% include "left.svg" %}
</a>
<a class="arrow right" id="nextTestimonial">
{% include "right.svg" %}
</a>
</div>
</article>
</section>
{% endif %}

{% if home_section.id == "qa" %}
Expand Down Expand Up @@ -175,25 +175,37 @@ const whenVisible = (elements, fn, opts) => {
const ob = new IntersectionObserver(fn, opts);
$$(elements).forEach(e => ob.observe(e));
};
const makeSticky = ([br]) =>
br.target.nextElementSibling.classList.toggle('fixed', br.intersectionRatio === 1);
whenVisible('main>section', addViewedClass, { threshold: 0.2 });
whenVisible('.sticky-hack', makeSticky, { threshold: [0, 1] });
const testimonials = document.querySelectorAll('.testimonial');
const prevButton = document.getElementById('prevTestimonial');
const nextButton = document.getElementById('nextTestimonial');
let currentTestimonial = 0;
document.addEventListener('DOMContentLoaded', () => {
const testimonials = document.querySelectorAll('.testimonial');
let currentIndex = 0;
function showTestimonial(index) {
testimonials.forEach((testimonial, i) => {
if (i === index) {
testimonial.classList.add('active');
testimonial.classList.remove('hidden');
} else {
if (testimonial.classList.contains('active')) {
testimonial.classList.remove('active');
testimonial.classList.add('hidden');
}
}
});
}
document.getElementById('prevTestimonial').addEventListener('click', () => {
currentIndex = (currentIndex === 0) ? testimonials.length - 1 : currentIndex - 1;
showTestimonial(currentIndex);
});
function showTestimonial(index) {
testimonials[currentTestimonial].classList.add('hidden');
currentTestimonial = (index + testimonials.length) % testimonials.length;
testimonials[currentTestimonial].classList.remove('hidden');
}
document.getElementById('nextTestimonial').addEventListener('click', () => {
currentIndex = (currentIndex === testimonials.length - 1) ? 0 : currentIndex + 1;
showTestimonial(currentIndex);
});
prevButton.addEventListener('click', () => showTestimonial(currentTestimonial - 1));
nextButton.addEventListener('click', () => showTestimonial(currentTestimonial + 1));
showTestimonial(currentIndex);
});
const questionButtons = document.querySelectorAll('.question-button');
Expand Down

0 comments on commit 05983d0

Please sign in to comment.