VOOP - Sporcu Besinleri, Vitaminler, Kozmetik

İstanbul

Türkiye

Küçükçekmece

Default

Menü Linkleri

Menü Link

Ana Link

Renk

Link Sütunları

Görsel Sütunları

Görseller

Görsel Objesi

Alt Linkler

Alt Link

Metin Listesi

Metin Verisi

Metin

Başlık

Görsel ve Linkler

Görsel ve Link

Görsel

Link

Oran

Açıklama

Buton

Pozisyon

Görsel ve Link Simple Listesi

Görsel ve Link Simple

Sekmeler ve Ürünler

Sekme ve Ürünler

Sekme Adı

Ürünler

Başlık ve Link Listesi

Başlık ve Linkler

Linkler

Afişler

Afiş Verisi

Mobil Oran

Timer

Satırlar

Sütunlar

Mobil Satılar

Mobil Sütunlar

Özellikler

Özellik

Genişlik (Ürün Detay)

FAQ Veri

Yorumlar

Yorum

Yıldız

Yorum Sayısı

CTA Slider

İkon

Numaralı İçerik

İçerik

Etiketler

Etiket

Yazı Rengi

İkon (Ürün Detay)

Özel Alan ve İçerik Listesi

Özel Alan ve İçerik

Özel Alan

Bar Verisi

Fiyat

Yazı

%10 Niacinamid Serum 30 ml | Gözenek Sıkılaştırıcı Cilt Bakım Serumu

Beta Glukan Kara Mürver, C Vitamini, Çinko 30 Kapsül | Bağışıklık Sistemi Desteği

Bromelain 500 mg Vegan 30 Kapsül

C Vitamini 1000 mg 30 Tablet

Collagen Beauty Tip 1 ve Tip 3 Kolajen 30 Tablet | Saç, Cilt ve Tırnak Desteği

Collagen Serum 30 ml | Yaşlanma Karşıtı Kolajen Serum

El & Ayak Onarıcı ve Besleyici Bakım Kremi 300 gr | Manikür Pedikür Peeling

Gözenek Arındırıcı ve Canlandırıcı Tonik 200 ml | Aha - Bha, Glikolik Asit & Pantenol

Hyaluronik Asit Mini Serum + B5 10 ml | Yoğun Nemlendirici Cilt Bakım Serumu

Hyaluronik Asit Serum + B5 30 ml | Yoğun Nemlendirici Cilt Bakım Serumu

Magnezyum 200 mg 30 Tablet

Pet Glucosamine Paste Kedi Eklem Ve Kas Desteği 100 gr

Pet Multi Paste Multi-Vitamin Macun 100 gr

Pet Plus B Kedi Tüy Dökülmesi Engelleyici Vitamin 50 ml

Propolis + C Vitamini Sprey-Damla 20 ml

Red Peeling Serum 30 ml | Cilt Tonu Eşitleyici ve Yenileyici

Retinol Serum 30 ml | Bariyer Onarıcı ve Yenileyici Cilt Bakım Serumu

Vitamin B12, Biotin ve Folik Asit - Takviye Edici Gıda 30 Kapsül

Vitamin C Mini Serum 10 ml (Su Bazlı) | Yoğun Aydınlatıcı Cilt Bakım Serumu

Vitamin D3K2 Sprey-Damla | Kemik & Bağışıklık Desteği - 20 ml

Whitening Ton Eşitleyici Mini Serum 10 ml | Beyazlatıcı Cilt Bakım Serumu

Whitening Ton Eşitleyici Serum 30 ml | Beyazlatıcı Cilt Bakım Serumu

Collagen Beauty Yüksek Biyoaktif Hidrolize Tip 1 & Tip 3 Kolajen Takviyesi | 10 Toz Saşe

Multivitamin Multimineral Portakal Aromalı Şurup 150 ml  | 11 Vitamin & 5 Mineral

VOOP Probiyotik Mikroorganizma İçeren 10'lu Saşe Takviye Edici Gıda

C Vitamini, D3 Vitamini ve Çinko 20 Saşe

Kafein Serum 30 ml | Göz Altı Morlukları & Torbalanma Karşıtı | %5 Caffeine, %2 Vitamin C

Glukozamin Tip-2 Kolajen Peptitleri | Kompleks Formül - 7 Toz Saşe

Omega 3 Kids Balık Yağı Şurup Portakal Aromalı 150 ml

Omega 3 Balık Yağı Yüksek EPA & DHA 500 mg 60 Kapsül

Dermokozmetik

Gıda Takviyeleri

SETLER

Tüm Ürünler

İçeriğe Göre

Bitkisel Ürünler

Mineral

Multivitamin

Vitamin

Cilt İhtiyaçlarına Göre

Bariyer Onarıcı

Cilt Sıkılaştırma

Cilt Yenileyici

Göz Çevresi

Gözenek Sıkılaştırıcı

Kırışıklık ve İnce Çizgiler

Leke

Nemlendirme

Renk Tonu Eşitsizliği

Sivilce - Akne

Aktif İçeriğe Göre

AHA - BHA

Arbutin

B Vitamini

Beta Glukan

Bromelain

C Vitamini

D Vitamini

E Vitamini

Glikolik Asit

Hyaluronik Asit

Kafein

Koenzim Q10

Kolajen

Kolajen Peptitleri

Krom

Magnezyum

Niacinamid

Omega3

Propolis

Retinol

Ürün Formuna Göre

Kapsüller

Likit - Sıvı

softgel

Sprey ve Damlalar

Tabletler

Toz Saşeler

Fiyat Aralığı

Stok Durumu

in-stock

out-of-stock

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&amp;family=Poppins:wght@300;400;500&amp;display=swap" rel="stylesheet">

<div id="voop-showcase-wrapper" style="width: 100%; height: 650px; position: relative; overflow: hidden; background-color: #ffecd2; transition: background-color 1.5s ease; font-family: 'Poppins', sans-serif; cursor: default;">
    
    
    <div id="canvas-container" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;"></div>

    
    <div id="ui-container" style="position: absolute; top: 50%; left: 8%; transform: translateY(-50%); z-index: 10; width: 40%; pointer-events: none; user-select: none;">
        
        <div class="product-info active" id="info-0" style="position: absolute; opacity: 1; transition: all 1s ease;">
            <div style="display: inline-block; padding: 5px 12px; background: rgba(0,0,0,0.05); border-radius: 20px; font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; color: #d35400; font-weight: 600;">C Vitamini Serumu</div>
            <h1 style="font-family: 'Playfair Display', serif; font-size: 3.5rem; line-height: 1.1; color: #222; margin-bottom: 15px;">Aydınlık Bir<br>Görünüm</h1>
            <p style="font-size: 1rem; color: #555; line-height: 1.6; margin-bottom: 25px; max-width: 350px;">Cildinizi canlandıran ve doğal bir ışıltı katan premium formül.</p>
            <div style="font-size: 0.8rem; color: #888; font-style: italic;">* İncelemek için ürüne basılı tutup sürükleyin</div>
        </div>
        
        
        <div class="product-info" id="info-1" style="position: absolute; opacity: 0; visibility: hidden; transition: all 1s ease;">
            <div style="display: inline-block; padding: 5px 12px; background: rgba(0,0,0,0.05); border-radius: 20px; font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; color: #8e44ad; font-weight: 600;">Gıda Takviyesi</div>
            <h1 style="font-family: 'Playfair Display', serif; font-size: 3.5rem; line-height: 1.1; color: #222; margin-bottom: 15px;">Premium<br>Kolajen</h1>
            <p style="font-size: 1rem; color: #555; line-height: 1.6; margin-bottom: 25px; max-width: 350px;">İçten dışa güzellik için güçlendirilmiş hidrolize kolajen desteği.</p>
            <div style="font-size: 0.8rem; color: #888; font-style: italic;">* İncelemek için ürüne basılı tutup sürükleyin</div>
        </div>

        
        <div class="product-info" id="info-2" style="position: absolute; opacity: 0; visibility: hidden; transition: all 1s ease;">
            <div style="display: inline-block; padding: 5px 12px; background: rgba(0,0,0,0.05); border-radius: 20px; font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; color: #2980b9; font-weight: 600;">Hyaluronik Asit</div>
            <h1 style="font-family: 'Playfair Display', serif; font-size: 3.5rem; line-height: 1.1; color: #222; margin-bottom: 15px;">Derinlemesine<br>Nemlendirme</h1>
            <p style="font-size: 1rem; color: #555; line-height: 1.6; margin-bottom: 25px; max-width: 350px;">Nemi hapseden ve cildi dolgunlaştıran özel asit kompleksi.</p>
            <div style="font-size: 0.8rem; color: #888; font-style: italic;">* İncelemek için ürüne basılı tutup sürükleyin</div>
        </div>
    </div>

    
    <div style="position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 10; opacity: 0.5; text-align: center; pointer-events: none;">
        <div style="width: 24px; height: 38px; border: 2px solid #333; border-radius: 12px; margin: 0 auto 8px; position: relative;">
            <div style="width: 4px; height: 6px; background: #333; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); border-radius: 2px; animation: scrollAnim 2s infinite;"></div>
        </div>
        <span style="font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: #333;">Ürün Değiştir</span>
    </div>
</div>

<style>
    @keyframes scrollAnim {
        0% { transform: translate(-50%, 0); opacity: 1; }
        100% { transform: translate(-50%, 15px); opacity: 0; }
    }
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

<script>
(function() {
    let scene, camera, renderer, productGroups = [];
    let currentIndex = 0;
    let isAnimating = false;
    let isInspecting = false;
    
    let mouseX = 0, mouseY = 0;
    let targetRotationX = 0, targetRotationY = 0;
    
    const wrapper = document.getElementById('voop-showcase-wrapper');
    const container = document.getElementById('canvas-container');

    const products = [
        { color: 0xff8c00, bgColor: '#fff4e6' },
        { color: 0xffaebc, bgColor: '#fdf0f3' },
        { color: 0x4fc3f7, bgColor: '#f0faff' }
    ];

    function init() {
        if (typeof THREE === 'undefined' || typeof gsap === 'undefined' || !container.clientWidth) {
            setTimeout(init, 100);
            return;
        }

        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera(38, container.clientWidth / container.clientHeight, 0.1, 1000);
        camera.position.set(0, 0, 9);

        renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
        renderer.setSize(container.clientWidth, container.clientHeight);
        renderer.setPixelRatio(window.devicePixelRatio);
        container.appendChild(renderer.domElement);

        // Aydınlatma
        scene.add(new THREE.AmbientLight(0xffffff, 0.8));
        const spotLight = new THREE.SpotLight(0xffffff, 0.5);
        spotLight.position.set(10, 10, 10);
        scene.add(spotLight);
        
        const frontLight = new THREE.DirectionalLight(0xffffff, 0.4);
        frontLight.position.set(0, 0, 5);
        scene.add(frontLight);

        // Ürün Gruplarını Oluştur (Ürün + Platform)
        products.forEach((prod, i) => {
            const masterGroup = new THREE.Group(); // Tüm yapı
            const itemGroup = new THREE.Group();   // Sadece havaya kalkan ürün kısmı

            // 1. Platform (Mermerimsi Silindir)
            const platGeo = new THREE.CylinderGeometry(1.5, 1.6, 0.3, 40);
            const platMat = new THREE.MeshStandardMaterial({ 
                color: 0xffffff, 
                roughness: 0.1, 
                metalness: 0.1 
            });
            const platform = new THREE.Mesh(platGeo, platMat);
            platform.position.y = -2.2;
            masterGroup.add(platform);

            // 2. Ürün Gövdesi
            const bodyGeo = new THREE.CylinderGeometry(0.75, 0.75, 2.4, 32);
            const bodyMat = new THREE.MeshPhongMaterial({ 
                color: prod.color, 
                shininess: 100, 
                transparent: true, 
                opacity: 0.95 
            });
            const body = new THREE.Mesh(bodyGeo, bodyMat);
            
            // Kapak
            const capGeo = new THREE.CylinderGeometry(0.35, 0.35, 0.7, 32);
            const capMat = new THREE.MeshStandardMaterial({color: 0x222222, metalness: 0.9, roughness: 0.2});
            const cap = new THREE.Mesh(capGeo, capMat);
            cap.position.y = 1.5;

            itemGroup.add(body, cap);
            itemGroup.position.y = -0.7; // Platformun üstüne hizala
            
            masterGroup.add(itemGroup);
            
            // Başlangıç Pozisyonu
            const isMobile = container.clientWidth < 768;
            masterGroup.position.x = (i === 0) ? (isMobile ? 0 : 2.8) : 15;
            masterGroup.rotation.y = (i === 0) ? 0 : Math.PI / 2;
            
            scene.add(masterGroup);
            productGroups.push({
                master: masterGroup,
                item: itemGroup
            });
        });

        // Kontroller
        setupInteractions();
        animate();
    }

    function setupInteractions() {
        // Kaydırma
        wrapper.addEventListener('wheel', (e) => {
            if (isInspecting) return;
            if (Math.abs(e.deltaY) < 30) return;
            e.preventDefault();
            e.deltaY > 0 ? navigate(1) : navigate(-1);
        }, {passive: false});

        // Mouse Down / Touch Start
        const onDown = (e) => {
            if (isAnimating) return;
            isInspecting = true;
            wrapper.style.cursor = 'grabbing';
            
            // Ürünü Havaya Kaldır
            gsap.to(productGroups[currentIndex].item.position, {
                y: 0.5,
                duration: 0.6,
                ease: "power2.out"
            });
        };

        const onUp = () => {
            isInspecting = false;
            wrapper.style.cursor = 'default';
            
            // Ürünü Platforma Geri Oturt
            gsap.to(productGroups[currentIndex].item.position, {
                y: -0.7,
                duration: 0.8,
                ease: "bounce.out"
            });
            
            // Rotasyonu sıfırla (yumuşakça)
            gsap.to(productGroups[currentIndex].item.rotation, {
                x: 0,
                y: 0,
                duration: 1,
                ease: "power2.out"
            });
            targetRotationX = 0;
            targetRotationY = 0;
        };

        const onMove = (e) => {
            if (!isInspecting) return;
            const clientX = e.touches ? e.touches[0].clientX : e.clientX;
            const clientY = e.touches ? e.touches[0].clientY : e.clientY;
            
            // İnceleme Rotasyonu
            targetRotationY += (clientX - mouseX) * 0.01;
            targetRotationX += (clientY - mouseY) * 0.01;
            
            mouseX = clientX;
            mouseY = clientY;
        };

        wrapper.addEventListener('mousedown', (e) => { mouseX = e.clientX; mouseY = e.clientY; onDown(e); });
        window.addEventListener('mouseup', onUp);
        window.addEventListener('mousemove', onMove);

        wrapper.addEventListener('touchstart', (e) => { mouseX = e.touches[0].clientX; mouseY = e.touches[0].clientY; onDown(e); }, {passive: true});
        window.addEventListener('touchend', onUp);
        window.addEventListener('touchmove', onMove, {passive: true});
    }

    function navigate(direction) {
        if (isAnimating) return;
        let nextIndex = currentIndex + direction;
        if (nextIndex < 0 || nextIndex >= products.length) return;

        isAnimating = true;
        currentIndex = nextIndex;

        // Arkaplan Rengi
        wrapper.style.backgroundColor = products[currentIndex].bgColor;

        // Metin Güncelleme
        document.querySelectorAll('.product-info').forEach((el, i) => {
            if(i === currentIndex) {
                el.style.opacity = "1";
                el.style.visibility = "visible";
                el.style.transform = "translateY(0)";
            } else {
                el.style.opacity = "0";
                el.style.visibility = "hidden";
                el.style.transform = "translateY(30px)";
            }
        });

        // 3D Animasyon
        productGroups.forEach((group, i) => {
            const isMobile = container.clientWidth < 768;
            let targetX = (i === currentIndex) ? (isMobile ? 0 : 2.8) : (i < currentIndex ? -15 : 15);
            let targetRotY = (i === currentIndex) ? 0 : (i < currentIndex ? -Math.PI/2 : Math.PI/2);
            let targetTilt = (i === currentIndex) ? 0 : (i < currentIndex ? -0.5 : 0.5);

            // Daha yavaş ve yumuşak geçiş (2 saniye)
            gsap.to(group.master.position, { 
                x: targetX, 
                duration: 2, 
                ease: "expo.inOut" 
            });

            gsap.to(group.master.rotation, { 
                y: targetRotY,
                z: targetTilt,
                duration: 2.2, 
                ease: "power2.inOut"
            });
        });

        setTimeout(() => { isAnimating = false; }, 2000);
    }

    function animate() {
        requestAnimationFrame(animate);
        
        productGroups.forEach((group, i) => {
            if(i === currentIndex) {
                if (isInspecting) {
                    // Kullanıcı kontrolü (İnceleme Modu)
                    group.item.rotation.y += (targetRotationY - group.item.rotation.y) * 0.1;
                    group.item.rotation.x += (targetRotationX - group.item.rotation.x) * 0.1;
                } else {
                    // Otomatik Dönüş ve Hafif Süzülme
                    group.item.rotation.y += 0.008;
                    if (!isAnimating) {
                        group.item.position.y = -0.7 + Math.sin(Date.now() * 0.0015) * 0.1;
                    }
                }
            }
        });
        
        renderer.render(scene, camera);
    }

    window.addEventListener('resize', () => {
        camera.aspect = container.clientWidth / container.clientHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(container.clientWidth, container.clientHeight);
    });

    init();
})();
</script>

Aydınlık Bir
Görünüm

Premium
Kolajen

Derinlemesine
Nemlendirme

Aydınlık BirGörünüm

PremiumKolajen

DerinlemesineNemlendirme

Aydınlık Bir
Görünüm

Premium
Kolajen

Derinlemesine
Nemlendirme