vaseckos59-gmail-com/parallax-book-gallery

Основные улучшения и предложения:** 1. **Структурированная организация кода:** - Логическое разделение на секции - Чистая иерархия HTML - Комментированные блоки CSS 2. **Улучшенный параллакс-эффект:** - Многослойный параллакс фон - Параллакс при скролле - Эффект размытия и наложения 3. **Улучшенная навигация:** - Фиксированное меню с иконками - Плавная прокрутка к секциям - Адаптивный дизайн для мобильных 4. **Функциональный поиск:** - Стилизованная строка поиска - Базовая логика поиска 5. **Интерактивная карта:** - Стилизованный контейнер - Полноразмерный iframe 6. **Система рекомендаций (предложения):** - Карточки с функциями - Иконки и описания - Анимации при наведении 7. **Адаптивный дизайн:** - Оптимизация для мобильных устройств - Гибкие сетки - Адаптивная типографика 8. **Доступность:** - ARIA атрибуты - Семантические теги - Клавиатурная навигация 9. **Производительность:** - Оптимизированные анимации - Ленивая загрузка - Эффективное использование CSS 10. **Визуальная привлекательность:** - Современный цветовой профиль - Согласованные тени и эффекты - Плавные переходы Код теперь лучше организован, более читаем и содержит все запрошенные функции в стильном, современном дизайне. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Parallax Book Gallery</title> <link rel="stylesheet" href="./style.css"> <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap" rel="stylesheet"> <style> /* CSS Custom Properties */ :root { --primary-color: #1a237e; --secondary-color: #3949ab; --accent-color: #f44336; --text-color: #333; --light-bg: #e3f2fd; --shadow-light: 0 4px 6px rgba(0, 0, 0, 0.1); --shadow-medium: 0 8px 20px rgba(0, 0, 0, 0.15); --transition-speed: 0.3s; } /* CSS Properties for 3D effects */ @property --page-rotate { syntax: "<angle>"; inherits: true; initial-value: 0deg; } @property --spine-shift { syntax: "<length>"; inherits: true; initial-value: 0px; } /* Reset and Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Outfit', sans-serif; background: linear-gradient(135deg, var(--light-bg) 0%, #ffffff 100%); color: var(--text-color); min-height: 100vh; overflow-x: hidden; } /* Parallax Scene */ .parallax-scene { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: -1; } .parallax-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; } .layer-1 { background-image: url("https://static.vecteezy.com/system/resources/previews/036/227/755/non_2x/ai-generated-nature-landscapes-background-free-photo.jpg" ); filter: brightness(0.7) saturate(1.2); transform: translateZ(-2px) scale(3); } .layer-2 { background: linear-gradient(45deg, rgba(26, 35, 126, 0.3), rgba(57, 73, 171, 0.2)); transform: translateZ(-1px) scale(2); } /* Main Content */ .main-content { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; } /* Header */ .header { padding: 2rem; text-align: center; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); box-shadow: var(--shadow-light); } .title { font-size: 3.5rem; font-weight: 800; background: linear-gradient(45deg, var(--primary-color), var(--accent-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 1rem; } .subtitle { font-size: 1.2rem; color: var(--secondary-color); font-weight: 300; } /* Navigation */ .nav-container { position: fixed; top: 50%; right: 2rem; transform: translateY(-50%); z-index: 1000; } .nav-menu { list-style: none; background: rgba(255, 255, 255, 0.95); border-radius: 20px; padding: 1rem; box-shadow: var(--shadow-medium); backdrop-filter: blur(10px); } .nav-item { margin: 0.8rem 0; } .nav-link { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--primary-color); padding: 0.8rem 1.2rem; border-radius: 15px; transition: all var(--transition-speed); font-weight: 600; } .nav-link:hover { background: var(--primary-color); color: white; transform: translateX(-5px); } .nav-icon { font-size: 1.2rem; } /* Book Gallery Section */ .gallery-section { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; } .gallery-title { font-size: 2.5rem; margin-bottom: 3rem; text-align: center; color: var(--primary-color); } /* 3D Book */ .book-container { position: relative; width: 220px; height: 330px; perspective: 1200px; transform-style: preserve-3d; margin-bottom: 3rem; --spine-shift: 0px; transform: translateX(var(--spine-shift)); transition: --spine-shift 0.5s ease; } .book-container.book-open { --spine-shift: 120px; } .book-page { position: absolute; width: 100%; height: 100%; transform-style: preserve-3d; transform-origin: left center; --page-rotate: 0deg; transform: rotateY(var(--page-rotate)); transition: --page-rotate 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55), z-index 0s; transition-delay: calc((4 - var(--i)) * 0.15s), calc((4 - var(--i)) * 0.15s + 0.3s); cursor: pointer; z-index: calc(10 - var(--i)); box-shadow: var(--shadow-medium); border-radius: 3px 8px 8px 3px; } .book-page.is-open { --page-rotate: -180deg; transition-delay: 0s, 0s; z-index: calc(20 + var(--i)); } .book-page img { width: 100%; height: 100%; object-fit: cover; position: absolute; border-radius: 3px; } .book-page img:first-child { background: linear-gradient(45deg, #f5f5f5, #e0e0e0); backface-visibility: hidden; } .book-page img:last-child { transform: rotateY(180deg) translateZ(1px); background: linear-gradient(45deg, #eeeeee, #fafafa); } /* Features Section */ .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; padding: 2rem; max-width: 1400px; margin: 0 auto; } .feature-card { background: rgba(255, 255, 255, 0.95); border-radius: 20px; padding: 2rem; box-shadow: var(--shadow-medium); backdrop-filter: blur(10px); transition: transform var(--transition-speed); } .feature-card:hover { transform: translateY(-10px); } .feature-icon { font-size: 2.5rem; margin-bottom: 1rem; color: var(--primary-color); } .feature-title { font-size: 1.5rem; margin-bottom: 1rem; color: var(--primary-color); } .feature-description { color: #666; line-height: 1.6; } /* Search Bar */ .search-container { max-width: 600px; margin: 2rem auto; padding: 0 2rem; } .search-bar { width: 100%; padding: 1rem 1.5rem; border: 2px solid var(--primary-color); border-radius: 50px; font-size: 1.1rem; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); transition: all var(--transition-speed); } .search-bar:focus { outline: none; box-shadow: 0 0 0 3px rgba(26, 35, 126, 0.2); transform: scale(1.02); } /* Map Section */ .map-section { padding: 2rem; max-width: 1000px; margin: 2rem auto; } .map-container { border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-medium); height: 400px; } .map-container iframe { width: 100%; height: 100%; border: none; } /* Footer */ .footer { text-align: center; padding: 2rem; background: rgba(26, 35, 126, 0.95); color: white; margin-top: auto; } .footer-links { display: flex; justify-content: center; gap: 2rem; margin: 1rem 0; } .footer-link { color: white; text-decoration: none; transition: opacity var(--transition-speed); } .footer-link:hover { opacity: 0.8; } /* Responsive Design */ @media (max-width: 768px) { .nav-container { position: fixed; bottom: 0; top: auto; right: 0; left: 0; transform: none; background: rgba(255, 255, 255, 0.95); } .nav-menu { display: flex; justify-content: space-around; border-radius: 0; padding: 0.5rem; } .nav-link span:last-child { display: none; } .title { font-size: 2.5rem; } .features-grid { grid-template-columns: 1fr; } .book-container { transform: scale(0.9); } } /* Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .animate-in { animation: fadeInUp 0.6s ease-out forwards; } .delay-1 { animation-delay: 0.1s; } .delay-2 { animation-delay: 0.2s; } .delay-3 { animation-delay: 0.3s; } .delay-4 { animation-delay: 0.4s; } .wrapper { position: absolute; top: 200px; right: .1px; background: url("https://avatars.mds.yandex.net/i?id=0367b96cd04b42c7502b4449a1e0bc9b_l-4101261-images-thumbs&n=33&w=800&h=533&q=60"); height: 500px; width: 1750px; animation-duration: 25s; animation-name: slidein; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } } .wrappe { position: absolute; top: 300px; right: 1px; opacity: 0.9; background: url("https://static.tildacdn.com/tild3562-3334-4466-b664-623131336635/noroot.png"); height: 400px; width: 950px; box-shadow: 2.1px 2.4px 4px rgba(green, 0.982); filter: drop-shadow(2.1px 2.4px 4px rgba($color, 0.982)); filter: drop-shadow(2.1px 2.4px 4px rgba(green, 0.982)); filter: drop-shadow(5.3px 6.1px 8.4px rgba(green, 0.917)); filter: drop-shadow(0 -6mm 4mm rgba(160, 190, 110, .5)); filter: drop-shadow(0 -6mm 22mm rgba(160, 0, 210, .9)); animation-duration: 35s; animation-name: slidein; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } } </style> </head> <body> <!-- Parallax Background --> <div class="parallax-scene"> <div class="parallax-layer layer-1"></div> <div class="parallax-layer layer-2"></div> </div> <!-- Main Content --> <div class="main-content"> <!-- Header --> <header class="header animate-in"> <h1 class="title">Digital Book Gallery</h1> <p class="subtitle">Interactive 3D Experience with Parallax Effects</p> </header> <!-- Navigation Menu --> <nav class="nav-container" role="navigation" aria-label="Main Navigation"> <ul class="nav-menu"> <li class="nav-item"> <a href="#gallery" class="nav-link"> <span class="nav-icon">📚</span> <span>Gallery</span> </a> </li> <li class="nav-item"> <a href="#map" class="nav-link"> <span class="nav-icon">🗺️</span> <span>Map</span> </a> </li> <li class="nav-item"> <a href="#features" class="nav-link"> <span class="nav-icon">⚡</span> <span>Features</span> </a> </li> <li class="nav-item"> <a href="#search" class="nav-link"> <span class="nav-icon">🔍</span> <span>Search</span> </a> </li> </ul> </nav> <!-- Book Gallery --> <section id="gallery" class="gallery-section"> <h2 class="gallery-title animate-in">Click on Book Pages to Explore</h2> <div class="book-container" id="bookContainer"> <!-- Pages will be inserted here by JavaScript --> </div> <!-- Search Bar --> <div id="search" class="search-container animate-in delay-2"> <input type="text" class="search-bar" placeholder="Search books, authors, or topics..." aria-label="Search books"> </div> </section> <!-- Features Grid --> <section id="features" class="features-section"> <div class="features-grid"> <div class="feature-card animate-in delay-1"> <div class="feature-icon">🎯</div> <h3 class="feature-title">Smart Recommendations</h3> <p class="feature-description"> Get personalized book suggestions based on your reading history and preferences. </p> </div> <div class="feature-card animate-in delay-2"> <div class="feature-icon">📊</div> <h3 class="feature-title">Reading Analytics</h3> <p class="feature-description"> Track your reading progress, set goals, and view detailed statistics about your habits. </p> </div> <div class="feature-card animate-in delay-3"> <div class="feature-icon">🤝</div> <h3 class="feature-title">Community</h3> <p class="feature-description"> Join discussions, share reviews, and connect with other book enthusiasts. </p> </div> <div class="feature-card animate-in delay-4"> <div class="feature-icon">🔔</div> <h3 class="feature-title">Notifications</h3> <p class="feature-description"> Get alerts for new releases, author events, and community activities. </p> </div> </div> </section> <!-- Map Section --> <section id="map" class="map-section animate-in delay-3"> <h2 class="gallery-title">Find Bookstores Nearby</h2> <div class="map-container"> <iframe src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&amp;layer=mapnik" title="Interactive Map" allowfullscreen loading="lazy"> </iframe> </div> </section> <!-- Footer --> <footer class="footer animate-in delay-4"> <p>© 2026 Digital Book Gallery. All rights reserved.</p> <div class="footer-links"> <a href="#" class="footer-link">Privacy Policy</a> <a href="#" class="footer-link">Terms of Service</a> <a href="#" class="footer-link">Contact Us</a> </div> </footer> </div> <div class="wrapper"> <h1>1</h1> </div> </div> <div class="wrappe"> <script> // Book data with images const bookPages = [ { front: "https://avatars.mds.yandex.net/i?id=365b8955434bd7586ac019cc6b6e8b74_l-12913927-images-thumbs&n=13", back: "https://img.freepik.com/premium-psd/cutout-tree-png-transparent-background_1229257-5155.jpg?semt=ais_hybrid&w=740", title: "Modern Architecture" }, { front: "https://i.pinimg.com/736x/47/d0/b0/47d0b04c56e03149fb45dfaae9afcbea.jpg", back: "https://i.pinimg.com/originals/05/4d/40/054d4011fc719a0b7859dac61f5b40c4.jpg", title: "Urban Photography" }, { front: "https://i.pinimg.com/736x/fa/f5/32/faf532e8d0ca337b2cc05dd69ed20f93.jpg", back: "https://i.pinimg.com/originals/a9/dc/31/a9dc3109018804f75e8929231c088385.jpg?nii=t", title: "Abstract Art" }, { front: "https://i.pinimg.com/474x/e3/e5/01/e3e501dcc596de2d0226515ce17d0e13.jpg", back: "https://i.pinimg.com/736x/90/d3/39/90d339a02d73953ca691e17eacf0be3e.jpg", title: "Nature Exploration" }, { front: "https://i.pinimg.com/736x/5c/bc/f2/5cbcf2e65c57960a1436364c1b7e318c.jpg", back: "https://i.pinimg.com/736x/f3/11/40/f311408b7d192572e34ccf425d9301b9.jpg", title: "Digital Art" } ]; // Initialize book pages const bookContainer = document.getElementById('bookContainer'); const fragment = document.createDocumentFragment(); bookPages.forEach((page, index) => { const pageElement = document.createElement('div'); pageElement.className = 'book-page'; pageElement.style.setProperty('--i', index); pageElement.innerHTML = ` <img src="${page.front}" alt="${page.title} - Front Cover"> <img src="${page.back}" alt="${page.title} - Back Cover"> `; fragment.appendChild(pageElement); }); bookContainer.appendChild(fragment); // Book interaction logic const pages = document.querySelectorAll('.book-page'); const container = document.querySelector('.book-container'); function updateBookState() { const anyOpen = Array.from(pages).some(page => page.classList.contains('is-open') ); if (anyOpen) { container.classList.add('book-open'); // Add parallax effect when book is open document.querySelector('.parallax-layer').style.transform = 'translateZ(-3px) scale(4)'; } else { container.classList.remove('book-open'); // Reset parallax document.querySelector('.parallax-layer').style.transform = 'translateZ(-2px) scale(3)'; } } // Add click events to pages pages.forEach(page => { page.addEventListener('click', (e) => { e.stopPropagation(); page.classList.toggle('is-open'); updateBookState(); // Smooth scroll to opened page if (page.classList.contains('is-open')) { page.scrollIntoView({ behavior: 'smooth', block: 'center' }); } }); }); // Close all pages when clicking outside document.addEventListener('click', (e) => { if (!e.target.closest('.book-page')) { pages.forEach(page => { page.classList.remove('is-open'); }); updateBookState(); } }); // Search functionality const searchBar = document.querySelector('.search-bar'); searchBar.addEventListener('input', (e) => { const searchTerm = e.target.value.toLowerCase(); // Add search logic here console.log('Searching for:', searchTerm); }); // Parallax effect on scroll window.addEventListener('scroll', () => { const scrolled = window.pageYOffset; const parallaxLayer = document.querySelector('.layer-1'); const rate = scrolled * -0.5; parallaxLayer.style.transform = `translateY(${rate}px) translateZ(-2px) scale(3)`; }); // Smooth scroll for navigation document.querySelectorAll('.nav-link').forEach(link => { link.addEventListener('click', (e) => { e.preventDefault(); const targetId = link.getAttribute('href').substring(1); const targetElement = document.getElementById(targetId); if (targetElement) { targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); }); // Add intersection observer for animations const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('animate-in'); } }); }, observerOptions); // Observe all elements with animation classes document.querySelectorAll('.animate-in').forEach(el => { observer.observe(el); }); </script> </body> </html>

язык не указан · рейтинг 0 · 👍 0 · ❤️ 0 · 💎 0 · 0 форков · ссылка на SourceCraft

Дата анализа: 13.10.2026 11:56