ExploreThe World

Discover amazing destinations and create unforgettable memories. Our curated collection of experiences awaits your next adventure.

div class="container_02"> div class="split-left"> div class="content_02"> h1>Explorebr>The World p>Discover amazing destinations and create unforgettable memories. Our curated collection of experiences awaits your next adventure. div class="split-right"> div class="image-container"> div class="scroll-image image-1"> div class="scroll-image image-2"> div class="scroll-image image-3"> div class="scroll-image image-4"> .container_02 position: relative; height: 100vh; display: flex; overflow: hidden; > .split-left, .split-right position: relative; width: 50%; height: 100%; opacity: 0; transform: translateX(-100%); animation: slideIn 1.2s ease-out forwards; > .split-left background: #2c3e50; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; color: white; padding: 0 5%; > .content_02 opacity: 0; transform: translateY(30px); animation: fadeInUp 0.8s forwards; animation-delay: 1s; > .content_02 h1 font-size: 3.5em; margin-bottom: 20px; font-weight: 700; > .content_02 p font-size: 1.2em; line-height: 1.6; margin-bottom: 30px; opacity: 0.8; > .split-right transform: translateX(100%); animation-delay: 0.3s; overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none; > .split-right::-webkit-scrollbar display: none; > .image-container height: 200%; /* 画像エリアを大きくしてスクロール可能に */ display: flex; flex-direction: column; > .scroll-image width: 100%; height: 400px; background-size: cover; background-position: center; opacity: 0; transform: translateY(30px); animation: fadeInUp 0.8s forwards; > .image-1 background-image: url('/image-1.jpg'); animation-delay: 1.2s; > .image-2 background-image: url('/image-2.jpg'); animation-delay: 1.4s; > .image-3 background-image: url('/image-3.jpg'); animation-delay: 1.6s; > .image-4 background-image: url('/image-4.jpg'); animation-delay: 1.8s; > @keyframes slideIn to opacity: 1; transform: translateX(0); > > @keyframes fadeInUp to opacity: 1; transform: translateY(0); > > @keyframes fadeIn to opacity: 1; > >

タイピングエフェクト

Welcome to Our Creative Studio. Where Innovation Meets Design div class="container_03"> div class="hero"> div class="hero-text"> div class="typing-container"> span class="typing-text">Welcome to Our Creative Studio. div class="subtitle">Where Innovation Meets Design div class="scroll-indicator">↓ .container_03 margin: 0; padding: 0; height: 100%; background: #0f172a; > .hero height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; overflow: hidden; background: linear-gradient(43deg, #4158d0 0%, #c850c0 46%, #ffcc70 100%); > .hero::before content: ""; position: absolute; width: 200%; height: 200%; background: linear-gradient( 45deg, transparent 0%, rgba(59, 130, 246, 0.1) 50%, transparent 100% ); animation: gradient-shift 8s linear infinite; > .hero-text font-size: 2.5rem; font-weight: 700; margin: 0; padding: 0; color: #fff; text-align: center; opacity: 0; animation: fadeIn 1s ease forwards; > .typing-container display: inline-block; position: relative; > .typing-text display: inline-block; border-right: 0.15em solid #fff; white-space: nowrap; overflow: hidden; background: #fff; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite; > .subtitle text-align: center; color: #fff; font-size: 1.1rem; margin-top: 40px; opacity: 0; transform: translateY(20px); animation: slideUp 0.8s ease forwards 3.5s; > @keyframes typing from width: 0; > to width: 100%; > > @keyframes blink-caret from, to border-color: transparent; > 50% border-color: #fff; > > @keyframes gradient-shift 0% transform: translate(-50%, -50%) rotate(0deg); > 100% transform: translate(-50%, -50%) rotate(360deg); > > @keyframes fadeIn from opacity: 0; > to opacity: 1; > > @keyframes slideUp from opacity: 0; transform: translateY(20px); > to opacity: 1; transform: translateY(0); > > .scroll-indicator position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); color: #fff; font-size: 1.5rem; opacity: 0; animation: bounce 2s infinite, fadeIn 1s ease forwards 4s; cursor: pointer; > @keyframes bounce 0%, 20%, 50%, 80%, 100% transform: translateX(-50%) translateY(0); > 40% transform: translateX(-50%) translateY(-10px); > 60% transform: translateX(-50%) translateY(-5px); > > JavaScript // スムーズスクロール document.querySelector('.scroll-indicator').addEventListener('click', () => window.scrollTo( top: window.innerHeight, behavior: 'smooth' >); >); // テキストの再生アニメーション document.querySelector('.typing-text').addEventListener('animationend', (e) => if (e.animationName === 'typing') e.target.style.width = '100%'; > >);

パララックス効果

div class="container_04"> div class="parallax_boxes"> div class="parallax_section background_img_01">CONTENT1 div class="parallax_section background_img_02">CONTENT2 div class="parallax_section background_img_03">CONTENT3 div class="parallax_section background_img_04">CONTENT4 div class="parallax_section background_img_05">CONTENT5 .container_04 margin: 0; padding: 0; width: 100%; color: #fff; font-size: 1.2rem; > .parallax_section display: flex; height: 100vh; justify-content: center; align-items: center; background-attachment: fixed; background-position: center; background-size: cover; background-repeat: no-repeat; > .background_img_01 background-image: url('/image/01.jpg'); > .background_img_02 background-image: url('/image/02.jpg'); > .background_img_03 background-image: url('/image/03.jpg'); > .background_img_04 background-image: url('/image/04.jpg'); > .background_img_05 background-image: url('/image/05.jpg'); >

【コピペで使用OK！】おしゃれなスクロールダウンアニメーションのデザインこんにちは、ウェブデザインパレットのmisaです。 Webサイトのトップページで、「Scroll Down」のボタンを見たことはありますか？「Scroll Down」のボタンはアニメーシ…

【コピペで使用OK！】ページトップへ戻る、ページトップリンクボタンの実装方法こんにちは、ウェブデザインパレットのmisaです。みなさんは、ページトップリンクボタンを実装したことはありますか？最近ではほとんどのWebサイトで実装されているよ…

【コピペで使用OK！】シンプルでおしゃれなCSSボタンデザイン（ホバーアニメーション付き）こんにちは、ウェブデザインパレットのmisaです。シンプルでおしゃれなボタンのデザインをまとめました。どのボタンもHTMLとCSSのみで表示できます。ホバーアニメーシ…

まとめ

URLをコピーする URLをコピーしました！

【Relumeの使い方】効率的なWebデザイン制作をサポートするAIツールを使ってみた感想
SVG背景画像に色を付ける簡単テクニック【mask-image】

ABOUT ME

現役インハウスWebデザイナー。 35歳、2児の母。今までの経験を活かし、コーディングやWebデザインについての情報を発信しています。

📎📎📎📎📎📎📎📎📎📎