Un código de adonis1887

Abrir en el editor Publica tu código

Recomendado

22 December 2024

Animación de carga CSS con imagen de fondo

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iPhone 16 Pro - Apple</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@300;400;500;600;700&display=swap');

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
        }

:root {
            --primary: #2997ff;
            --hover: #0077ed;
            --background: #000000;
            --text: #f5f5f7;
        }

body {
            background-color: var(--background);
            color: var(--text);
            overflow-x: hidden;
            line-height: 1.47059;
            font-weight: 400;
            letter-spacing: -.022em;
        }

.header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 44px;
            background: rgba(22, 22, 23, 0.8);
            backdrop-filter: saturate(180%) blur(20px);
            z-index: 1000;
            display: flex;
            justify-content: center;
            align-items: center;
        }

.nav {
            display: flex;
            gap: 2.5rem;
            align-items: center;
            max-width: 980px;
            margin: 0 auto;
            padding: 0 22px;
        }

.nav a {
            color: var(--text);
            text-decoration: none;
            font-size: 12px;
            opacity: 0.8;
            transition: opacity 0.3s;
        }

.nav a:hover {
            opacity: 1;
        }

.hero {
            padding-top: 44px;
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            position: relative;
            overflow: hidden;
            background: #000;
        }

.hero-content {
            text-align: center;
            padding-top: 50px;
            position: relative;
            z-index: 1;
            width: 100%;
        }

.hero h1 {
            font-size: 56px;
            line-height: 1.07143;
            font-weight: 600;
            letter-spacing: -.005em;
            margin-bottom: 6px;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeUp 1s forwards;
        }

.hero p {
            font-size: 28px;
            line-height: 1.10722;
            font-weight: 400;
            letter-spacing: .004em;
            margin-bottom: 0.5em;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeUp 1s 0.2s forwards;
        }

.hero-image {
            width: 100%;
            height: calc(100vh - 200px);
            position: relative;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeUp 1s 0.4s forwards;
            overflow: hidden;
        }

.hero-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }

.cta-buttons {
            display: flex;
            gap: 35px;
            justify-content: center;
            margin-top: 1.6em;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeUp 1s 0.6s forwards;
        }

.button {
            font-size: 21px;
            line-height: 1.381;
            font-weight: 400;
            letter-spacing: .011em;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
        }

.button-primary {
            color: var(--primary);
        }

.button-primary:hover {
            text-decoration: underline;
        }

.button-primary::after {
            content: ">";
            margin-left: 0.5em;
            font-family: 'SF Pro Icons';
        }

.products {
            background: #fbfbfd;
            color: #1d1d1f;
            padding: 100px 0;
        }

.products-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            max-width: 980px;
            margin: 0 auto;
            padding: 0 22px;
        }

.product-card {
            background: white;
            border-radius: 18px;
            padding: 30px;
            text-align: center;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            opacity: 0;
            transform: translateY(30px);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
        }

.product-card.animate {
            animation: fadeUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }

.product-card:hover {
            transform: scale(1.02);
        }

.product-card img {
            width: 100%;
            height: 200px;
            object-fit: contain;
            margin-bottom: 35px;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

.product-card h3 {
            font-size: 24px;
            line-height: 1.16667;
            font-weight: 600;
            letter-spacing: .009em;
            margin-bottom: 8px;
        }

.product-card p {
            font-size: 14px;
            line-height: 1.42859;
            font-weight: 400;
            letter-spacing: -.016em;
            color: #86868b;
            margin-bottom: 12px;
        }

.product-card .price {
            font-size: 17px;
            line-height: 1.23536;
            font-weight: 400;
            letter-spacing: -.022em;
            margin-bottom: 20px;
        }

.buy-button {
            background: var(--primary);
            color: white;
            padding: 8px 16px;
            border-radius: 980px;
            font-size: 12px;
            line-height: 1.33337;
            font-weight: 400;
            letter-spacing: -.01em;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s;
        }

.buy-button:hover {
            background: var(--hover);
        }

.footer {
            background: #f5f5f7;
            color: #86868b;
            padding: 40px 0;
            font-size: 12px;
        }

.footer-content {
            max-width: 980px;
            margin: 0 auto;
            padding: 0 22px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.footer-links {
            display: flex;
            gap: 20px;
        }

.footer-links a {
            color: #515154;
            text-decoration: none;
            transition: color 0.3s;
        }

.footer-links a:hover {
            color: #000;
        }

@keyframes fadeUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

@media (max-width: 1068px) {
            .hero h1 {
                font-size: 48px;
            }

.hero p {
                font-size: 24px;
            }

.button {
                font-size: 19px;
            }

.products-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

@media (max-width: 734px) {
            .hero h1 {
                font-size: 40px;
            }

.hero p {
                font-size: 19px;
            }

.button {
                font-size: 17px;
            }

.products-grid {
                grid-template-columns: 1fr;
            }

.nav {
                gap: 1rem;
            }

.hero-image {
                height: calc(100vh - 300px);
            }

.footer-content {
                flex-direction: column;
                gap: 20px;
            }
        }
    </style>
</head>
<body>
    <header class="header">
        <nav class="nav">
            <a href="#" class="logo">
                <svg height="44" viewBox="0 0 14 44" width="14" xmlns="http://www.w3.org/2000/svg">
                    <path d="m13.0729 17.6825a3.61 3.61 0 0 0 -1.7248 3.0365 3.5132 3.5132 0 0 0 2.1379 3.2223 8.394 8.394 0 0 1 -1.0948 2.2618c-.6816.9812-1.3943 1.9623-2.4787 1.9623s-1.3633-.63-2.613-.63c-1.2187 0-1.6525.6507-2.644.6507s-1.6834-.9089-2.4787-2.0243a9.7842 9.7842 0 0 1 -1.6628-5.2776c0-3.0984 2.014-4.7405 3.9969-4.7405 1.0535 0 1.9314.6919 2.5924.6919.63 0 1.6112-.7333 2.8092-.7333a3.7579 3.7579 0 0 1 3.1604 1.5802zm-3.7284-2.8918a3.5615 3.5615 0 0 0 .8469-2.22 1.5353 1.5353 0 0 0 -.031-.32 3.5686 3.5686 0 0 0 -2.3445 1.2084 3.4629 3.4629 0 0 0 -.8779 2.1585 1.419 1.419 0 0 0 .031.2892 1.19 1.19 0 0 0 .2169.0207 3.0935 3.0935 0 0 0 2.1586-1.1368z" fill="currentColor"/>
                </svg>
            </a>
            <a href="#">Store</a>
            <a href="#">Mac</a>
            <a href="#">iPad</a>
            <a href="#">iPhone</a>
            <a href="#">Watch</a>
            <a href="#">Vision</a>
            <a href="#">AirPods</a>
        </nav>
    </header>

<section class="hero">
        <div class="hero-content">
            <h1>iPhone 16 Pro Max</h1>
            <p>Titanium. So strong. So light. So Pro.</p>
            <div class="hero-image">
                <img src="https://www.apple.com/v/iphone-16-pro/c/images/overview/media-card/highlights_apple_intelligence_endframe__esdley4zqkya_xlarge.jpg" alt="iPhone 16 Pro">
            </div>
        </div>
    </section>

<section class="products">
        <div class="products-grid">
            <div class="product-card">
                <img src="https://itechcolombia.co/wp-content/uploads/2024/09/233664-233669-233674-iphone-16-ultramarine.webp" alt="iPhone 16">
                <h3>iPhone 16</h3>
                <p>The most powerful iPhone ever.</p>
                <p class="price">From $999</p>
                <a href="#" class="buy-button">Buy</a>
            </div>
            <div class="product-card">
                <img src="https://d1erhn8sljv386.cloudfront.net/k59w083BQadPW6HmRvP3LcVSSt0=/fit-in/1000x1000/filters:format(webp)/https://s3.amazonaws.com/lmbucket0/media/product/t-mobile-apple-iphone-16-pro-frontimage-white-titanium.png" alt="iPhone 16 Pro">
                <h3>iPhone 16 Pro</h3>
                <p>A total powerhouse.</p>
                <p class="price">From $799</p>
                <a href="#" class="buy-button">Buy</a>
            </div>
            <div class="product-card">
                <img src="https://itechcolombia.co/wp-content/uploads/2024/09/233709-233717-iphone-16-pro-max-desert.webp" alt="iPhone 16 Pro Max">
                <h3>iPhone 16 Pro Max</h3>
                <p>As amazing as ever.</p>
                <p class="price">From $699</p>
                <a href="#" class="buy-button">Buy</a>
            </div>
        </div>
    </section>

<footer class="footer">
        <div class="footer-content">
            <p>© 2024 Apple Inc. All rights reserved.</p>
            <div class="footer-links">
                <a href="#">Privacy Policy</a>
                <a href="#">Terms of Use</a>
                <a href="#">Sales and Refunds</a>
                <a href="#">Legal</a>
                <a href="#">Site Map</a>
            </div>
        </div>
    </footer>

cards.forEach(card => observer.observe(card));

// Parallax effect on hero image
        const heroImage = document.querySelector('.hero-image img');
        window.addEventListener('scroll', () => {
            const scrolled = window.pageYOffset;
            if (heroImage && scrolled < window.innerHeight) {
                heroImage.style.transform = `scale(${1 + scrolled * 0.0005}) translateY(${scrolled * 0.5}px)`;
            }
        });
    </script>
</body>
</html>

Un código de adonis1887

Recomendado

directorios de coches

Un código de simohdrca

Animación de carga CSS con imagen de fondo

HTML

CSS

JS

Recomendado

directorios de coches

Un código de simohdrca

Animación de carga CSS con imagen de fondo

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS