Cloudinary Scrollytelling Demo

A beautiful scrollytelling experience showcasing Cloudinary's image transformations with D3.js animations and Tailwind CSS.

The little Cloudicorn is generated by ChatGPT and will soon be replaced by an artist's render!

Features

• 🌟 Interactive scrollytelling with D3.js starfield animations
• 🎨 Cloudinary image transformations (background removal, artistic effects, generative AI)
• 🎯 Smooth scroll-triggered image transitions
• 📱 Responsive design with Tailwind CSS
• ⚡ Optimized for performance

Local Development

1. Install dependencies:

   npm install

2. Start development server:

   npm run dev

3. Build for production:

   npm run build

Deployment on Netlify

Option 1: Deploy via Netlify UI

1. Push your code to GitHub/GitLab/Bitbucket
2. Go to netlify.com and sign up/login
3. Click "New site from Git"
4. Connect your repository
5. Configure build settings:
   • Build command: npm run build
   • Publish directory: .
6. Click "Deploy site"

Option 2: Deploy via Netlify CLI

1. Install Netlify CLI:

   npm install -g netlify-cli

2. Login to Netlify:

   netlify login

3. Initialize and deploy:

   netlify init
   netlify deploy --prod

Option 3: Drag & Drop

1. Run npm run build locally
2. Go to netlify.com
3. Drag your project folder to the deploy area

Project Structure

scroll-d3/
├── index.html          # Main HTML file
├── main.js            # D3.js and scroll logic
├── style.css          # Tailwind CSS input
├── dist/output.css    # Compiled CSS (generated)
├── netlify.toml       # Netlify configuration
├── package.json       # Dependencies and scripts
└── README.md          # This file

Cloudinary Transformations

This demo showcases various Cloudinary transformations:

• Background Removal: e_background_removal
• Generative Recolor: e_gen_recolor:prompt_goggles;to-color_red
• Artistic Effects: e_art:aurora
• Opacity Control: o_30
• Generative Background Replace: e_gen_background_replace
• Pixelation: e_pixelate:20

Technologies Used

• D3.js - Data visualization and animations
• Tailwind CSS - Utility-first CSS framework
• Cloudinary - Image transformations and optimization
• Intersection Observer API - Scroll detection
• Netlify - Hosting and deployment

Quiz

There's a simple quiz at the bottom if you want to use this form to award prizes. If the user gets 100% they can show the booth worker and get a prize. Add ?quiz=true to the URL to show the quiz.

New Choice Interface

When the quiz URL parameter is present (?quiz=true), users are now presented with a choice:

1. 🧦 Take Quiz & Win Socks! - Shows the Cloudinary transformation quiz
2. 🦄 Get Unicorn Magic! - Shows a Marketo embed form

New Tab Interface

When the quiz URL parameter is present (?quiz=true), users now see a tabbed interface:

1. 🧦 Quiz & Socks Tab - Shows the Cloudinary transformation quiz
2. 🦄 Unicorn Magic Tab - Shows a Marketo embed form

Users can easily switch between tabs to explore both options, and the quiz tab is selected by default.

Adding Marketo Embed Code

To add your Marketo embed code:

1. Find the Marketo container in index.html (around line 380)
2. Replace the placeholder content with your Marketo embed code:

<!-- Marketo Form Placeholder -->
<div class="bg-gray-800/30 rounded-lg p-8 border border-gray-700">
  <!-- Replace this div with your Marketo embed code -->
  <script src="//app-sj20.marketo.com/js/forms2/js/forms2.min.js"></script>
  <form id="mktoForm_1234"></form>
  <script>MktoForms2.loadForm("//app-sj20.marketo.com", "123-ABC-456", 1234);</script>
</div>

Features

• Choice Interface: Users can choose between quiz or Marketo form
• Back Navigation: Back buttons allow users to return to the choice interface
• Smooth Transitions: CSS animations for a polished user experience
• Responsive Design: Works on both desktop and mobile devices

License

MIT License - feel free to use this template for your own projects!