Jak zbudować widget prezentujący testimoniale?

Ciekawi Cię jak stworzyć widget prezentujący testimoniale, które coraz częściej są prezentowane na stronach? Przedstawiam Ci jak za pomocą HTML, CSS oraz trochę JavaScript stworzyć odpowiednie komponent. Czas na pracę z kodem!

Co to jest testimonial?

Gwoli ścisłości, aby wyrównać wiedzę, testimonial to taka rekomendacja usługobiorcy usługi, które prezentowana jest na stronie usługodawcy.

Np. ja piszę testimonial dla OVH, bo tworzą świetne rozwiązania. Taka rekomendacja zostaje wyświetlona na stronie OVH.

Co to jest widget?

No tutaj to chyba nie trzeba tłumaczyć, ale może w jednym zdaniu. Widget to taki jednolity zestaw markupu styli oraz skryptów, który realizuje daną funkcjonalność i jest “przenaszalny”, tj. można go wykorzystać w innych miejscach na stronie, niż to pierwotne.

Kodowanie!

Kolejne kroki będą polegały na przejściu przez kilka warstw kodu, aby stworzyć prosty widget. Jeśli nie interesuje Cię kod, to na dole strony jest GIF prezentujący jak wygląda widget w pełnej okazałości.

Krok 1.

Potrzebujemy plików: HTML (np. index.html), CSS (np. main.css) oraz JavaScript (np. main.js)

Krok 2.

W HTMLu tworzę prosty markup, np. taki:

<div class="testimonial">
    <img
        class="testimonial__image"
        src="http://placeskull.com/50/50"
        alt="Thumbnail"
        />
    <p class="testimonial__text">XXXXXX</p>
</div>

Krok 3.

Dodam trochę CSS-ów, aby komponent lekko ubarwić. Stosuję konwencję BEM pomimo tak prostego projektu i tak uważam, że warto ją stosować.

.testimonial {
    width: 300px;
    height: 50px;
    background: #34495e;
    border-radius: 3px;
    border: 5px solid #2980b9;
    box-shadow: 0 0 3px black inset;
    padding: 5px;
    overflow: hidden;
}

.testimonial__image {
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px 0 0;
}

.testimonial__text {
    width: 200px;
    display: inline-block;
    color: white;
    margin: 0;
}

Na tym etapie powinien wyświetlać się komponent prezentujący ten sztywno zdefiniowany testimonial. Zabierzmy się za coś dynamicznego!

Krok 4.

Dodaję zachowanie (JavaScript)

Krok 4.1:

Lista testimoniali (tablica obiektów):

const testimonialList = [
    {
        image: "http://placeskull.com/50/50/ff00ff",
        text: "Lorem ipsum dolor sit amet.",
    },
    {
        image: "http://placeskull.com/50/50/ffff00",
        text: "Consectetur adipisicing elit."
    },
    {
        image: "http://placeskull.com/50/50/00ffff",
        text: "Sed do eiusmod tempor incididunt."
    }
];

Krok 4.2.

Bootstrap aplikacji

let $image = null;
let $text = null;

function setup() {
    $image = document.querySelector('.testimonial__image');
    $text = document.querySelector('.testimonial__text');
}

window.addEventListener('DOMContentLoaded', setup);

Krok 4.3.

Prezentacja dynamicznego testimoniala

function displayTestimonial(testimonialIndex) {
    let testimonial = testimonialList[testimonialIndex];
    $image.setAttribute('src', testimonial.image);
    $text.textContent = testimonial.text;
}

Krok 4.4.

Zegar, rotujący testimoniale:

const ONE_SECOND = 1000;
const TIME_INTERVAL = 3 * ONE_SECOND;

function displayTestimonial(testimonialIndex) {
    let testimonial = testimonialList[testimonialIndex];
    $image.setAttribute('src', testimonial.image);
    $text.textContent = testimonial.text;
}

function rotateTestimonial(index) {
    displayTestimonial(index);

    setInterval(() => {
        index++;

        if (index === testimonialList.length)  {
            index = 0;
        }

        displayTestimonial(index);
    }, TIME_INTERVAL);
}

function setup() {
    // ...
    rotateTestimonial(0);
}

Krok 5.

Dodanie animacji w CSS3. W kwestii optymalizacji warto dodać regułę will-change, ale o tym wkrótce na blogu.

.testimonial__image {
    /* ... */
    animation: displayTestimonial var(--time) infinite;
}

.testimonial__text {
    /* ... */
    animation: displayTestimonial var(--time) infinite;
}

@keyframes displayTestimonial {
    0% { transform: translateY(80px); }
    40% { transform: translateY(0); }
    60% { transform: translateY(0); }
    100% { transform: translateY(-80px); }
}

Krok 6.

Od jakiegoś czasu można w przeglądarkach korzystać ze zmiennych w CSS-ach. Oczywiście nie wszystkie już supportują ten feature, ale świat idzie do przodu i im szybciej nauczymy się nowinek tym będzie łatwiej.

body {
    /* ... */
    --time: 3s;
}
.testimonial__image {
    /* ... */
    animation: displayTestimonial var(--time) infinite;
}

.testimonial__text {
    /* ... */
    animation: displayTestimonial var(--time) infinite;
}

Podsumowanie

Stworzenie komponentu nie jest wcale ani trudne ani czasochłonne, ale daje za to ciekawy efekt na stronie.

PS. Jutro pojawi się film z live coding opisywanego widgetu.
Zapraszam na mój kanał na platformie YouTube, gdzie regularnie wrzucam filmy o programowaniu.