<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Cool Website</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(45deg, #0f0f23, #1a1a2e, #16213e);
color: white;
overflow-x: hidden;
min-height: 100vh;
}
.container {
position: relative;
min-height: 100vh;
}
/* 背景の動く粒子 */
.particles {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.particle {
position: absolute;
width: 2px;
height: 2px;
background: rgba(255, 255, 255, 0.5);
border-radius: 50%;
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(180deg); }
}
/* ヘッダー */
header {
position: relative;
z-index: 10;
text-align: center;
padding: 100px 20px;
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
}
.logo {
font-size: 4em;
font-weight: bold;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1);
background-size: 200% 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradientShift 3s ease-in-out infinite;
margin-bottom: 20px;
}
@keyframes gradientShift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.subtitle {
font-size: 1.5em;
opacity: 0.8;
animation: fadeInUp 1s ease-out 0.5s both;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 0.8;
transform: translateY(0);
}
}
/* メインコンテンツ */
.main-content {
position: relative;
z-index: 5;
padding: 80px 20px;
max-width: 1200px;
margin: 0 auto;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 50px;
}
.feature-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 15px;
padding: 30px;
text-align: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.feature-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transform: rotate(45deg);
transition: all 0.5s;
opacity: 0;
}
.feature-card:hover::before {
animation: shimmer 0.5s ease-in-out;
}
@keyframes shimmer {
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); opacity: 0; }
50% { opacity: 1; }
100% { transform: translateX(100%) translateY(100%) rotate(45deg); opacity: 0; }
}
.feature-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.feature-icon {
font-size: 3em;
margin-bottom: 20px;
display: inline-block;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
/* インタラクティブボタン */
.interactive-btn {
display: inline-block;
margin: 50px auto;
padding: 15px 40px;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
border: none;
border-radius: 50px;
color: white;
font-size: 1.2em;
font-weight: bold;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
text-decoration: none;
}
.interactive-btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: all 0.5s ease;
}
.interactive-btn:hover::before {
width: 300px;
height: 300px;
}
.interactive-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
/* フローティング要素 */
.floating-shapes {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2;
}
.shape {
position: absolute;
border-radius: 50%;
background: linear-gradient(45deg, rgba(255, 107, 107, 0.1), rgba(78, 205, 196, 0.1));
animation: floatAround 20s linear infinite;
}
.shape:nth-child(1) {
width: 80px;
height: 80px;
top: 20%;
left: 10%;
animation-delay: 0s;
}
.shape:nth-child(2) {
width: 120px;
height: 120px;
top: 60%;
right: 15%;
animation-delay: -5s;
}
.shape:nth-child(3) {
width: 60px;
height: 60px;
bottom: 20%;
left: 20%;
animation-delay: -10s;
}
@keyframes floatAround {
0% { transform: rotate(0deg) translateX(100px) rotate(0deg); }
100% { transform: rotate(360deg) translateX(100px) rotate(-360deg); }
}
/* レスポンシブ */
@media (max-width: 768px) {
.logo {
font-size: 2.5em;
}
.subtitle {
font-size: 1.2em;
}
.feature-grid {
grid-template-columns: 1fr;
}
}
/* スクロール時のアニメーション */
.scroll-animate {
opacity: 0;
transform: translateY(50px);
transition: all 0.8s ease;
}
.scroll-animate.active {
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body>
<div class="container">
<!-- 背景パーティクル -->
<div class="particles" id="particles"></div>
<!-- フローティング図形 -->
<div class="floating-shapes">
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
</div>
<!-- ヘッダー -->
<header>
<h1 class="logo">DYNAMIC</h1>
<p class="subtitle">未来を創造する革新的なWebサイト</p>
</header>
<!-- メインコンテンツ -->
<div class="main-content">
<div class="feature-grid">
<div class="feature-card scroll-animate">
<div class="feature-icon">🚀</div>
<h3>革新的なデザイン</h3>
<p>最新のWebテクノロジーを使用した、視覚的に美しいインターフェースを提供します。</p>
</div>
<div class="feature-card scroll-animate">
<div class="feature-icon">⚡</div>
<h3>高速パフォーマンス</h3>
<p>最適化されたコードにより、スムーズで高速な動作を実現しています。</p>
</div>
<div class="feature-card scroll-animate">
<div class="feature-icon">🎨</div>
<h3>アニメーション</h3>
<p>魅力的なアニメーションとトランジションで、ユーザー体験を向上させます。</p>
</div>
</div>
<div style="text-align: center; margin-top: 50px;">
<button class="interactive-btn" onclick="showMessage()">
体験してみる
</button>
</div>
</div>
</div>
<script>
// パーティクル生成
function createParticles() {
const particlesContainer = document.getElementById('particles');
const particleCount = 50;
for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
particle.style.left = Math.random() * 100 + '%';
particle.style.top = Math.random() * 100 + '%';
particle.style.animationDelay = Math.random() * 6 + 's';
particle.style.animationDuration = (Math.random() * 4 + 4) + 's';
particlesContainer.appendChild(particle);
}
}
// スクロールアニメーション
function handleScrollAnimation() {
const elements = document.querySelectorAll('.scroll-animate');
elements.forEach(element => {
const elementTop = element.getBoundingClientRect().top;
const elementVisible = 150;
if (elementTop < window.innerHeight - elementVisible) {
element.classList.add('active');
}
});
}
// インタラクティブボタンの処理
function showMessage() {
const messages = [
'🎉 素晴らしい！',
'✨ 魔法のような体験',
'🚀 未来へようこそ',
'💫 革新的な技術',
'🎨 美しいデザイン'
];
const randomMessage = messages[Math.floor(Math.random() * messages.length)];
// 一時的なメッセージ表示
const messageDiv = document.createElement('div');
messageDiv.textContent = randomMessage;
messageDiv.style.cssText = `
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 20px 40px;
border-radius: 10px;
font-size: 1.5em;
z-index: 1000;
animation: messageAppear 2s ease-in-out;
`;
document.body.appendChild(messageDiv);
setTimeout(() => {
messageDiv.remove();
}, 2000);
}
// マウス追従エフェクト
document.addEventListener('mousemove', (e) => {
const cursor = document.querySelector('.cursor');
if (!cursor) {
const newCursor = document.createElement('div');
newCursor.className = 'cursor';
newCursor.style.cssText = `
position: fixed;
width: 20px;
height: 20px;
background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
z-index: 9999;
transition: all 0.1s ease;
`;
document.body.appendChild(newCursor);
}
const actualCursor = document.querySelector('.cursor');
actualCursor.style.left = e.clientX - 10 + 'px';
actualCursor.style.top = e.clientY - 10 + 'px';
});
// 初期化
document.addEventListener('DOMContentLoaded', () => {
createParticles();
handleScrollAnimation();
// スクロールイベントリスナー
window.addEventListener('scroll', handleScrollAnimation);
// メッセージアニメーション用CSS追加
const style = document.createElement('style');
style.textContent = `
@keyframes messageAppear {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
20% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
`;
document.head.appendChild(style);
});
</script>
</body>
</html>
目次
コメント