animación

Abrir en el editor Publica tu código

Recomendado

10 August 2024

Efecto de animación al pasar el cursor sobre el texto

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

Recomendado

Animación del reloj

animación de coches

Efecto de animación al pasar el cursor sobre el texto

HTML

CSS

JS

Recomendado

Animación del reloj

animación de coches

Efecto de animación al pasar el cursor sobre el texto

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS