index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://verticalscroll.pub
+ metaTags
+ editButton /edit.html
+ title Vertical Scroll | Smooth Scrolling Experience
+ style.css
+ header
+ class hero
+ div
+ class scroll-indicator
+ span Scroll Down
+ class arrow
+ main
+ section
+ class panel one
+ h1 Welcome
+ p Experience the smooth scroll
+ section
+ class panel two
+ h2 Design
+ p Clean and minimal aesthetics
+ section
+ class panel three
+ h2 Innovation
+ p Modern web techniques
+ section
+ class panel four
+ h2 Performance
+ p Optimized for all devices
+ footer
+ nav
+ a Home
+ href #
+ a About
+ href #
+ a Contact
+ href #
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "msg_016im8smhduUWtXGN43V81r8",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a vertical scrolling website with smooth animations and sections. For the domain, I suggest:\n\n---domain---\nverticalscroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://verticalscroll.pub\nmetaTags\neditButton /edit.html\ntitle Vertical Scroll | Smooth Scrolling Experience\nstyle.css\nheader\n class hero\n div\n class scroll-indicator\n span Scroll Down\n class arrow\nmain\n section\n class panel one\n h1 Welcome\n p Experience the smooth scroll\n section\n class panel two\n h2 Design\n p Clean and minimal aesthetics\n section\n class panel three\n h2 Innovation\n p Modern web techniques\n section\n class panel four\n h2 Performance\n p Optimized for all devices\nfooter\n nav\n a Home\n href #\n a About\n href #\n a Contact\n href #\nscript.js\n---style.css---\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nhtml {\n scroll-behavior: smooth;\n}\n\nbody {\n font-family: 'Inter', system-ui, sans-serif;\n line-height: 1.6;\n overflow-x: hidden;\n}\n\n.hero {\n height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n background: linear-gradient(135deg, #1a1a1a, #4a4a4a);\n}\n\n.scroll-indicator {\n position: absolute;\n bottom: 2rem;\n color: white;\n display: flex;\n flex-direction: column;\n align-items: center;\n animation: bounce 2s infinite;\n}\n\n.arrow {\n width: 20px;\n height: 20px;\n border-right: 2px solid white;\n border-bottom: 2px solid white;\n transform: rotate(45deg);\n margin-top: 1rem;\n}\n\n.panel {\n height: 100vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n padding: 2rem;\n opacity: 0;\n transform: translateY(50px);\n transition: all 0.8s ease-out;\n}\n\n.panel.visible {\n opacity: 1;\n transform: translateY(0);\n}\n\n.one {\n background: linear-gradient(45deg, #ff6b6b, #feca57);\n}\n\n.two {\n background: linear-gradient(45deg, #48dbfb, #1dd1a1);\n}\n\n.three {\n background: linear-gradient(45deg, #5f27cd, #341f97);\n}\n\n.four {\n background: linear-gradient(45deg, #ee5253, #ff9f43);\n}\n\nh1, h2 {\n font-size: clamp(2rem, 8vw, 4rem);\n margin-bottom: 1rem;\n color: white;\n}\n\np {\n font-size: clamp(1rem, 4vw, 1.5rem);\n color: rgba(255, 255, 255, 0.9);\n max-width: 600px;\n}\n\nfooter {\n background: #1a1a1a;\n padding: 2rem;\n}\n\nfooter nav {\n display: flex;\n justify-content: center;\n gap: 2rem;\n}\n\nfooter a {\n color: white;\n text-decoration: none;\n transition: color 0.3s ease;\n}\n\nfooter a:hover {\n color: #ff6b6b;\n}\n\n@keyframes bounce {\n 0%, 20%, 50%, 80%, 100% {\n transform: translateY(0);\n }\n 40% {\n transform: translateY(-20px);\n }\n 60% {\n transform: translateY(-10px);\n }\n}\n\n@media (max-width: 768px) {\n .panel {\n padding: 1rem;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const panels = document.querySelectorAll('.panel');\n \n const observerOptions = {\n root: null,\n threshold: 0.3,\n rootMargin: \"0px\"\n };\n\n const observer = new IntersectionObserver((entries, observer) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n }\n });\n }, observerOptions);\n\n panels.forEach(panel => {\n observer.observe(panel);\n });\n\n let scrollTimeout;\n window.addEventListener('scroll', () => {\n clearTimeout(scrollTimeout);\n const indicator = document.querySelector('.scroll-indicator');\n indicator.style.opacity = '0';\n indicator.style.transition = 'opacity 0.3s ease';\n \n scrollTimeout = setTimeout(() => {\n if (window.scrollY < 100) {\n indicator.style.opacity = '1';\n }\n }, 1000);\n });\n});\n---end---\n\nThis website features:\n1. Smooth vertical scrolling with scroll-snap\n2. Animated scroll indicator\n3. Intersection Observer for fade-in animations\n4. Beautiful gradient backgrounds\n5. Responsive design\n6. Clean, semantic HTML\n7. Accessible navigation\n8. Performance optimized animations\n9. Modern CSS features\n10. Smooth transitions and transforms\n\nEach section takes up the full viewport height and animates in as you scroll. The scroll indicator at the top fades out when scrolling begins and reappears when back at the top. The design is minimal but impactful, with smooth gradients and clean typography."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 818,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 1471
+ }
+ }
readme.scroll
Changed around line 1
+ # verticalscroll.pub.scroll.pub
+
+ website generated by Claude from prompt: vertical scroll
script.js
Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ const panels = document.querySelectorAll('.panel');
+
+ const observerOptions = {
+ root: null,
+ threshold: 0.3,
+ rootMargin: "0px"
+ };
+
+ const observer = new IntersectionObserver((entries, observer) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.classList.add('visible');
+ }
+ });
+ }, observerOptions);
+
+ panels.forEach(panel => {
+ observer.observe(panel);
+ });
+
+ let scrollTimeout;
+ window.addEventListener('scroll', () => {
+ clearTimeout(scrollTimeout);
+ const indicator = document.querySelector('.scroll-indicator');
+ indicator.style.opacity = '0';
+ indicator.style.transition = 'opacity 0.3s ease';
+
+ scrollTimeout = setTimeout(() => {
+ if (window.scrollY < 100) {
+ indicator.style.opacity = '1';
+ }
+ }, 1000);
+ });
+ });
style.css
Changed around line 1
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ html {
+ scroll-behavior: smooth;
+ }
+
+ body {
+ font-family: 'Inter', system-ui, sans-serif;
+ line-height: 1.6;
+ overflow-x: hidden;
+ }
+
+ .hero {
+ height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ background: linear-gradient(135deg, #1a1a1a, #4a4a4a);
+ }
+
+ .scroll-indicator {
+ position: absolute;
+ bottom: 2rem;
+ color: white;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ animation: bounce 2s infinite;
+ }
+
+ .arrow {
+ width: 20px;
+ height: 20px;
+ border-right: 2px solid white;
+ border-bottom: 2px solid white;
+ transform: rotate(45deg);
+ margin-top: 1rem;
+ }
+
+ .panel {
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ padding: 2rem;
+ opacity: 0;
+ transform: translateY(50px);
+ transition: all 0.8s ease-out;
+ }
+
+ .panel.visible {
+ opacity: 1;
+ transform: translateY(0);
+ }
+
+ .one {
+ background: linear-gradient(45deg, #ff6b6b, #feca57);
+ }
+
+ .two {
+ background: linear-gradient(45deg, #48dbfb, #1dd1a1);
+ }
+
+ .three {
+ background: linear-gradient(45deg, #5f27cd, #341f97);
+ }
+
+ .four {
+ background: linear-gradient(45deg, #ee5253, #ff9f43);
+ }
+
+ h1, h2 {
+ font-size: clamp(2rem, 8vw, 4rem);
+ margin-bottom: 1rem;
+ color: white;
+ }
+
+ p {
+ font-size: clamp(1rem, 4vw, 1.5rem);
+ color: rgba(255, 255, 255, 0.9);
+ max-width: 600px;
+ }
+
+ footer {
+ background: #1a1a1a;
+ padding: 2rem;
+ }
+
+ footer nav {
+ display: flex;
+ justify-content: center;
+ gap: 2rem;
+ }
+
+ footer a {
+ color: white;
+ text-decoration: none;
+ transition: color 0.3s ease;
+ }
+
+ footer a:hover {
+ color: #ff6b6b;
+ }
+
+ @keyframes bounce {
+ 0%, 20%, 50%, 80%, 100% {
+ transform: translateY(0);
+ }
+ 40% {
+ transform: translateY(-20px);
+ }
+ 60% {
+ transform: translateY(-10px);
+ }
+ }
+
+ @media (max-width: 768px) {
+ .panel {
+ padding: 1rem;
+ }
+ }