Bienvenue chez Fulani

Laiterie
Saine & Eco

There are many of passages of lorem Ipsum, but the majori have
suffered alteration in some form.

Bienvenue chez Fulani

Laiterie
Saine & Eco

There are many of passages of lorem Ipsum, but the majori have
suffered alteration in some form.

var e=document.querySelector('.thm-btn svg'); var p = e.parentNode; var w = document.createElement('span'); w.classList.add('elementor-button-icon'); p.replaceChild(w, e); w.appendChild(e);

Un savoir-faire
ancestral

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Une harmonie avec la
nature

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Un appui pour les
populations locales

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

L'univers de
Fulani

.card{ will-change: transform; } document.addEventListener("DOMContentLoaded", function() { // Ensure GSAP and ScrollTrigger are available if (typeof gsap !== "undefined" && typeof ScrollTrigger !== "undefined") { gsap.registerPlugin(ScrollTrigger); // Define different movement values for desktop and mobile const isMobile = window.innerWidth <= 768; const leftXValues = isMobile ? [-1500, -1500, -500] : [-800, -900, -400]; const rightXValues = isMobile ? [1500, 1500, 500] : [800, 900, 400]; const leftRotationValues = isMobile ? [-45, -40, -50] : [-30, -20, -35]; const rightRotationValues = isMobile ? [45, 40, 50] : [30, 20, 35]; const yValues = isMobile ? [200, -300, -700] : [100, -150, -400]; for (let index = 0; index { const progress = self.progress; gsap.set(cardLeft, { x: progress * leftXValues[index], y: progress * yValues[index], rotation: progress * leftRotationValues[index] }); }, }, } ); gsap.fromTo(cardRight, { x: 0, y: 0, rotation: 0 }, { x: rightXValues[index], rotation: rightRotationValues[index], scrollTrigger: { trigger: ".main", start: "top 80%", end: "250% bottom", scrub: true, onUpdate: (self) => { const progress = self.progress; gsap.set(cardRight, { x: progress * rightXValues[index], y: progress * yValues[index], rotation: progress * rightRotationValues[index] }); }, }, } ); }; } else { console.error("GSAP or ScrollTrigger not found."); } });

Une histoire de
passion

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Goûtez nos
Délices

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

LAITS

CRÈMES

BEURRES

KEFIRS

YAOURTS

AUTRES LAITS
FERMENTÉS

FROMAGES
FRAIS

FROMAGES
À PÂTE MOLLE

FROMAGES
À PÂTE PRESSÉE

FROMAGES
À PÂTE PERSILLÉE

BONBONS, TOFFEES
& AUTRES SUCRERIES

BOISSONS DE LACTOSÉRUM
& AUTRES BOISSONS FERMENTÉES

gsap.registerPlugin(ScrollTrigger); gsap.to(".circlespin", { rotation: -90, ease: "none", scrollTrigger: { start: "top 20%", end: "+=5000", pin: ".containerspin", scrub: 1 } }) let things = gsap.utils.toArray(".thing"); function setup() { gsap.set(things, {x: 0, y: 0, xPercent: -50, yPercent: 0, rotation: 0}); // reset let circleBounds = document.querySelector(".circlespin").getBoundingClientRect(), centerX = (circleBounds.left + circleBounds.right) / 2, centerY = (circleBounds.top + circleBounds.bottom) / 2, rotationIncrement = 90 / things.length; things.forEach((thing, i) => { let bounds = thing.getBoundingClientRect(); gsap.set(thing, { transformOrigin: "center " + (centerY - bounds.top) + "px", rotation: i * rotationIncrement }) }); } setup(); window.addEventListener("resize", setup);

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Inspirations Recettes

ARkk Project

Bahne TML

DEA Clothing

* { margin: 0; padding: 0; box-sizing: border-box; } :root { --transition: cubic-bezier(0.1, 0.7, 0, 1); } .wrapper { display: flex; align-items: center; justify-content: center; height: 40vh; } .imgs-parent { display: flex; gap: 0.4rem; perspective: 60rem; } .img { width: 15rem; height: 19rem; background-size: cover; background-position: center; cursor: pointer; transition: transform 1.25s var(--transition), filter 3s var(--transition), width 0.3s var(--transition); position: relative; /*filter: grayscale(0) brightness(0.7);*/ will-change: transform, filter; border-radius: 8px; } .content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 10px; color: white; text-align: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } h3 { font-size: 14px !important; margin-bottom: 5px; } /* Button */ .btn { display: inline-block; font-family: "Montserrat", Sans-serif; padding: 4px 10px; background-color: transparent; background-image: linear-gradient(140deg, #0071E3 42%, #25409E 100%); color: white; text-decoration: none; font-size: 12px; font-weight: 600; fill: #000000; border-radius: 15px; text-align: center; transition: background-color 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; opacity: 0; visibility: hidden; margin-bottom: 8px; text-decoration: none !important; } .img:hover .btn, .img:hover .content { opacity: 1; visibility: visible; } .btn:hover { background-color: #005bb5; } .img:hover { transform: translateZ(10.375rem); filter: grayscale(0) brightness(0.9); } .img:hover .content { display: flex; flex-direction: column; justify-content: flex-end; } .img::before, .img::after { content: ""; position: absolute; width: 1.25rem; height: 100%; right: -1.25rem; } .img::after { left: -1.25rem; } .img:hover + * { transform: translateZ(7.77rem) rotateY(25deg); filter: grayscale(0.2) brightness(0.9); z-index: -1; } .img:hover + * + * { transform: translateZ(2.73rem) rotateY(15deg); filter: grayscale(0.4) brightness(0.8); z-index: -2; } .img:hover + * + * + * { transform: rotateY(8deg); filter: grayscale(0.6) brightness(0.7); z-index: -3; } .img:hover + * + * + * + * { transform: translateZ(1.1rem) rotateY(25deg); filter: grayscale(0.8) brightness(0.6); z-index: -4; } .img:has(+ :hover) { transform: translateZ(6.77rem) rotateY(-25deg); filter: grayscale(0.2) brightness(0.9); } .img:has(+ * + :hover) { transform: translateZ(0.73rem) rotateY(-10deg); filter: grayscale(0.4) brightness(0.8); } .img:has(+ * + * + :hover) { transform: rotateY(-8deg); filter: grayscale(0.6) brightness(0.7); } .img:has(+ * + * + * + :hover) { transform: translateZ(1.1rem) rotateY(-25deg); filter: grayscale(0.8) brightness(0.6); } .open { width: 25vw; transform: translateZ(17.375rem); filter: inherit; z-index: 1; margin: 0 0.45vw; } @media (max-width: 820px) { .img { width: 4.0rem; height: 19rem; } .img:hover { transform: translateZ(17.375rem); filter: inherit; } .open { width: 20vw; transform: translateZ(7.375rem); filter: inherit; z-index: 1; margin: 0 0.45vw; } /* Mindre tekst og knap på mindre skærme */ h3 { font-size: 8px; } .btn { font-size: 8px; padding: 2px 5px; border-radius: 10px; } } document.body.addEventListener("click", (event) => { const clickedElement = event.target, imgs = document.querySelectorAll(".img"); if (!clickedElement.classList.contains("img")) { imgs.forEach((img) => img.classList.remove("open")); return; } if (clickedElement.classList.contains("open")) { clickedElement.classList.remove("open"); return; } imgs.forEach((img) => img.classList.remove("open")); clickedElement.classList.add("open"); }); document.body.addEventListener("click", (event) => {});

body { overflow-x: hidden; } .tag { backdrop-filter: blur(20px); } .scroll-container { overflow: visible; will-change: transform; transition: transform 0.2s ease; /* Smooth transition for transform */ } .panel { will-change: transform; aspect-ratio: 1.5; transition: background-size 0.2s ease; } .panel:hover { background-size: 130% !important; transition: 0.2s; } .overflow-hidden { overflow: hidden; } .sticky-section { transition: position 0.2s ease; /* Smooth transition for position change */ } document.addEventListener('DOMContentLoaded', function() { const scrollContainerParent = document.querySelector('.scroll-container-parent'); const scrollContainer = document.querySelector('.scroll-container'); const stickySection = document.querySelector('.sticky-section'); const panels = document.querySelectorAll('.panel'); let totalPanelWidth = 0; panels.forEach(panel => { totalPanelWidth += panel.offsetWidth; }); const panelLeftSpace = panels[0].getBoundingClientRect().left; const viewportWidth = window.innerWidth; function handleScroll() { const isSticky = stickySection.classList.contains('elementor-sticky--active'); const isPositionFixed = window.getComputedStyle(stickySection).position === 'fixed'; const isPositionAbsolute = window.getComputedStyle(stickySection).position === 'absolute'; if (isSticky && isPositionFixed) { const scrollTop = window.scrollY; const rect = scrollContainerParent.getBoundingClientRect(); const elementTop = scrollTop + rect.top; const parentHeight = scrollContainerParent.offsetHeight; const viewportHeight = window.innerHeight; const startScroll = elementTop; const endScroll = elementTop + parentHeight - viewportHeight; let percentage = ((scrollTop - startScroll) / (endScroll - startScroll)) * 100; percentage = Math.max(0, Math.min(percentage, 100)); const translateX = -(totalPanelWidth - viewportWidth + (panelLeftSpace * 2) + viewportWidth / 3) * (percentage / 100); // Use requestAnimationFrame to apply the transform requestAnimationFrame(() => { scrollContainer.style.transform = `translateX(${translateX}px)`; }); } else if (!isSticky && !isPositionAbsolute) { // Reset transform when not sticky and not absolute requestAnimationFrame(() => { scrollContainer.style.transform = 'translateX(0)'; }); } } if (scrollContainer && scrollContainerParent && stickySection) { window.addEventListener('scroll', handleScroll); // Initial call to set up the correct transform handleScroll(); } else { console.error('.scroll-container, .scroll-container-parent, or .sticky-section not found!'); } });

L'actualité
de Fulani

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ajoutez votre titre ici

ils temoignent ...

This is due to their excellent service, competitive pricing and customer support. It’s throughly refresing to get such a personal touch. Duis aute lorem ipsum is simply free text irure dolor in reprehenderit in esse nulla pariatur.

Jessica Brown

Customer

Caleb Hoffman

Customer

Bradley Kim

Customer

From the blog post

Latest News & Articles Directly from Blog

Lorem ipsum is simply free text available. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur.

14 Oct

Nadia Gouda

We Care About Our Agriculture Growth

There are many variations of passages of Lorem Ipsum available,
but the majority have suffered in some form, by injected humour words.

CONTACTEZ-NOUS

Laissez-nous un message

casino50

Laiterie
Saine & Eco

Laiterie
Saine & Eco

Un savoir-faire
ancestral

Une harmonie avec la
nature

Un appui pour les
populations locales

L'univers de
Fulani

Une histoire de
passion

Goûtez nos
Délices