Spaces:
Running
Running
Please create two sections one section should fade out and other section is in fade in on scroll with the smooth transition
c85c27d verified | @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&family=Playfair+Display:wght@400;600;700&display=swap'); | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| } | |
| .font-sans { | |
| font-family: 'Montserrat', sans-serif; | |
| } | |
| .font-serif { | |
| font-family: 'Playfair Display', serif; | |
| } | |
| /* Animation classes */ | |
| .animate-fade-in { | |
| animation: fadeIn 1.5s ease-in-out; | |
| } | |
| .animate-slide-up { | |
| animation: slideUp 1s ease-out; | |
| } | |
| .animate-slide-right { | |
| animation: slideRight 1s ease-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| @keyframes slideUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(50px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes slideRight { | |
| from { | |
| opacity: 0; | |
| transform: translateX(-50px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| } | |
| /* Section styling */ | |
| section { | |
| min-height: 100vh; | |
| width: 100%; | |
| position: relative; | |
| background-size: cover; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| overflow: hidden; | |
| } | |
| /* Scroll snap */ | |
| html { | |
| scroll-snap-type: y mandatory; | |
| scroll-behavior: smooth; | |
| } | |
| /* Section transitions */ | |
| section { | |
| transition: opacity 0.8s ease, transform 0.8s ease; | |
| } | |
| section.active { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| section.inactive { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| pointer-events: none; | |
| } | |
| /* Animation classes */ | |
| [data-animate] { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| transition: all 0.8s ease-out; | |
| } | |
| [data-animate].animate { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| /* Header styling */ | |
| :host { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| z-index: 1000; | |
| transition: all 0.3s ease; | |
| } | |
| /* Content container */ | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 2rem; | |
| position: relative; | |
| z-index: 2; | |
| } | |
| /* Overlay */ | |
| .overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(0,0,0,0.4); | |
| z-index: 1; | |
| } | |