animación

Abrir en el editor Publica tu código

25 August 2024

Animación Onscroll: desplazamiento dinámico de contenido con ScrollMagic

5 August 2024

Lista con animaciones

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Gerçekçi Uçak İniş Simülasyonu</title>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        // Sahne, kamera ve renderer
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor(0x87CEEB); // Mavi gökyüzü
        document.body.appendChild(renderer.domElement);

// Işık
        const light = new THREE.DirectionalLight(0xffffff, 1);
        light.position.set(0, 10, 10);
        scene.add(light);
        scene.add(new THREE.AmbientLight(0x404040));

// Pist ve çevre düzenleme
        createEnvironment();

// Detaylı uçak modeli
        const airplane = createDetailedAirplane();
        airplane.position.set(0, 10, 50);
        airplane.rotation.x = Math.PI / 8;
        scene.add(airplane);

// Yolcular için küçük noktalar (uçaktan çıkacaklar)
        const passengers = [];
        
        // Kamera pozisyonu
        camera.position.set(5, 8, 40);
        camera.lookAt(0, 0, 0);

// Animasyon kontrol değişkenleri
        let animationPhase = 0; // 0: uçuş, 1: iniş, 2: durma, 3: yolcular iniyor
        let passengerTimer = 0;

function createEnvironment() {
            // Pist
            const runwayGeometry = new THREE.PlaneGeometry(20, 100);
            const runwayMaterial = new THREE.MeshStandardMaterial({ color: 0x333333, roughness: 0.7 });
            const runway = new THREE.Mesh(runwayGeometry, runwayMaterial);
            runway.rotation.x = -Math.PI / 2;
            runway.position.z = -30;
            scene.add(runway);

// Pist çizgileri (daha gerçekçi)
            for (let i = 0; i < 20; i++) {
                const lineGeometry = new THREE.PlaneGeometry(1.5, 5);
                const lineMaterial = new THREE.MeshStandardMaterial({ color: 0xF1C40F });
                const line = new THREE.Mesh(lineGeometry, lineMaterial);
                line.rotation.x = -Math.PI / 2;
                line.position.set(0, 0.1, -80 + i * 8);
                scene.add(line);
            }

// Terminal binası (basit)
            const terminalGeometry = new THREE.BoxGeometry(15, 3, 8);
            const terminalMaterial = new THREE.MeshStandardMaterial({ color: 0x3498DB });
            const terminal = new THREE.Mesh(terminalGeometry, terminalMaterial);
            terminal.position.set(12, 1.5, -40);
            scene.add(terminal);

// Çim alan
            const grassGeometry = new THREE.PlaneGeometry(200, 200);
            const grassMaterial = new THREE.MeshStandardMaterial({ color: 0x27AE60 });
            const grass = new THREE.Mesh(grassGeometry, grassMaterial);
            grass.rotation.x = -Math.PI / 2;
            grass.position.y = 0.01;
            scene.add(grass);
        }

// Animasyon
        function animate() {
            requestAnimationFrame(animate);

// Uçak animasyonu
            if (animationPhase === 0) {
                // Yaklaşma
                airplane.position.z -= 0.25;
                if (airplane.position.z < 20) {
                    animationPhase = 1;
                }
            } else if (animationPhase === 1) {
                // İniş
                airplane.position.z -= 0.15;
                airplane.position.y = Math.max(0.5, airplane.position.y - 0.03);
                
                if (airplane.rotation.x > 0) {
                    airplane.rotation.x -= 0.001;
                }
                
                // Kanatlar hafifçe sallansın
                const wingWave = Math.sin(Date.now() * 0.003) * 0.05;
                airplane.children[1].rotation.z = wingWave; // Sol kanat
                airplane.children[2].rotation.z = -wingWave; // Sağ kanat
                
                if (airplane.position.z < -25) {
                    animationPhase = 2;
                }
            } else if (animationPhase === 2) {
                // Durma
                if (airplane.position.z > -28) {
                    airplane.position.z -= 0.05;
                } else {
                    animationPhase = 3;
                }
            } else if (animationPhase === 3) {
                // Yolcular iniyor
                passengerTimer += 0.1;
                if (passengerTimer > 1 && passengers.length < 20) {
                    createPassenger();
                    passengerTimer = 0;
                }
                
                // Yolcuları hareket ettir
                passengers.forEach(p => {
                    const dx = p.targetX - p.mesh.position.x;
                    const dz = p.targetZ - p.mesh.position.z;
                    
                    p.mesh.position.x += dx * p.speed;
                    p.mesh.position.z += dz * p.speed;
                    
                    // Yolcuları pist üzerinde tut
                    p.mesh.position.y = 0.2;
                });
            }

// Kamera takibi
            if (animationPhase < 3) {
                camera.position.z = airplane.position.z + 10;
                camera.lookAt(airplane.position);
            }

renderer.render(scene, camera);
        }

// Pencere boyutu değişikliği
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });

animate();
    </script>
</body>
</html>

animación

Animación Onscroll: desplazamiento dinámico de contenido con ScrollMagic

Lista con animaciones

HTML

CSS

JS

Animación Onscroll: desplazamiento dinámico de contenido con ScrollMagic

Lista con animaciones

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS