Royal Code Library - Complete Documentation

🎯 Overview

Royal Code is a comprehensive, lightweight library that provides everything you need to build modern, animated websites with minimal effort.

🎨 100+ CSS Animations

Extensive collection of scroll-triggered animations with easy-to-use classes and the rc- prefix.

⚡ 20+ JS Components

Pre-built components for hamburger menus, modals, forms, toasts, and more.

🚀 Zero Dependencies

Completely standalone library. No jQuery, no external dependencies.

📱 Fully Responsive

Works perfectly on all devices with mobile-first approach.

⚙️ Easy to Customize

Simple API and well-structured code for easy customization.

📖 Well Documented

Comprehensive documentation with examples and best practices.

💡 Pro Tip: All animation classes use the rc- prefix to avoid conflicts with other libraries.

📦 Installation

Direct Include

HTML

<!-- CSS Animation Library -->
<link rel="stylesheet" href="path/to/royal-code-animations.css">

<!-- JavaScript Library -->
<script src="path/to/royal-code.js"></script>

Quick Start

HTML

<!-- Add animation to any element -->
<div class="rc-fade-up">
  This content fades up when scrolled into view
</div>

<!-- Initialize JavaScript -->
<script>
  // Auto-initialize all components
  RoyalCode.init();
</script>

✅ That's it! You're ready to start building amazing animated websites.

🎨 CSS Animation Library

Royal Code includes 100+ animation classes that automatically trigger when elements scroll into view. All classes use the rc- prefix.

1. Fade Animations

Smooth opacity transitions with directional movement.

Class	Description	Variants
`rc-fade`	Basic fade in	-
`rc-fade-up`	Fade in from bottom	sm, lg
`rc-fade-down`	Fade in from top	sm, lg
`rc-fade-left`	Fade in from right	sm, lg
`rc-fade-right`	Fade in from left	sm, lg

Example:

HTML

<div class="rc-fade-up">Fades up</div>
<div class="rc-fade-left-lg">Large fade from right</div>

2. Zoom Animations

Scale-based entrance effects.

Class	Description
`rc-zoom-in`	Zoom in from small
`rc-zoom-out`	Zoom in from large
`rc-zoom-in-up`	Zoom + move up
`rc-zoom-in-down`	Zoom + move down
`rc-zoom-in-left`	Zoom + move left
`rc-zoom-in-right`	Zoom + move right

3. Rotate Animations

Spinning entrance effects.

HTML

<div class="rc-rotate-in">Rotates 180°</div>
<div class="rc-rotate-45">Rotates 45°</div>
<div class="rc-rotate-360">Full rotation</div>

4. Special Effects

Unique animations for modern designs.

rc-glitch

Glitch distortion effect

rc-pulse

Pulsing animation

rc-shake

Shaking effect

rc-swing

Swinging motion

rc-wobble

Wobbling effect

rc-heartbeat

Heartbeat pulse

💡 Full List: The library includes 100+ animations. Check the CSS file for the complete list.

⚙️ Animation Modifiers

Speed Control

Class	Duration
`rc-speed-instant`	0.2s
`rc-speed-fast`	0.4s
`rc-speed-normal`	0.8s (default)
`rc-speed-slow`	1.2s
`rc-speed-slower`	1.8s
`rc-speed-ultra-slow`	2.5s

Delay Control

Add delays before animation starts:

HTML

<div class="rc-fade-up rc-delay-100">100ms delay</div>
<div class="rc-fade-up rc-delay-300">300ms delay</div>
<div class="rc-fade-up rc-delay-500">500ms delay</div>

Available delays: 50, 100, 150, 200, 250, 300, 400, 500, 600, 700, 800, 900, 1000, 1200, 1500, 2000 (ms)

Easing Functions

HTML

<div class="rc-fade-up rc-ease-linear">Linear</div>
<div class="rc-fade-up rc-ease-bounce">Bounce</div>
<div class="rc-fade-up rc-ease-elastic">Elastic</div>

Stagger Animations

Animate multiple children sequentially:

HTML

<div class="rc-stagger-200">
  <div class="rc-fade-up">Item 1</div>
  
   <div class="rc-fade-up">Item 2</div>
  <div class="rc-fade-up">Item 3</div>
</div>

⚡ JavaScript Components

Royal Code includes 20+ pre-built, production-ready components for common website functionality.

1. Hamburger Menu

Responsive mobile menu with smooth animations.

HTML

<button data-rc-hamburger>☰</button>
<nav data-rc-menu>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Services</a>
</nav>
<div data-rc-overlay></div>

JAVASCRIPT

new RoyalCode.HamburgerMenu({
  closeOnLinkClick: true,
  closeOnEsc: true,
  bodyScrollLock: true
});

Advanced modal system with multiple instances, queueing, and callbacks.

HTML

<button data-rc-modal-trigger="myModal">
  Open Modal
</button>

<div data-rc-modal="myModal">
  <div data-rc-modal-overlay></div>
  <div class="modal-content">
    <button data-rc-modal-close>✕</button>
    <h2>Modal Title</h2>
    <p>Modal content here</p>
  </div>
</div>

JAVASCRIPT

const modal = new RoyalCode.ModalManager({
  closeOnEsc: true,
  sequential: true
});

3. Toast Notifications

Non-blocking notifications with multiple positions and types.

JAVASCRIPT

const toast = new RoyalCode.Toast({
  position: 'top-right',
  duration: 3000
});

toast.success('Operation successful!');
toast.error('An error occurred');
toast.warning('Please be careful');
toast.info('This is information');

4. Form Validation

Real-time form validation with custom error messages.

HTML

<form id="contactForm">
  <input type="text" name="name" required />
  <input type="email" name="email" required />
  <textarea name="message" required minlength="10"></textarea>
  <button type="submit">Submit</button>
</form>

JAVASCRIPT

new RoyalCode.FormValidator('#contactForm', {
  onSubmit: (data) => {
    console.log('Form data:', data);
  }
});

5. Other Components

Component	Purpose	Usage
ScrollAnimations	Auto-trigger animations on scroll	`new RoyalCode.ScrollAnimations()`
SmoothScroll	Smooth anchor scrolling	`new RoyalCode.SmoothScroll()`
Tabs	Tab navigation	`new RoyalCode.Tabs()`
Accordion	Collapsible content	`new RoyalCode.Accordion()`
LazyLoad	Lazy load images	`new RoyalCode.LazyLoad()`
CounterAnimation	Animated counters	`new RoyalCode.CounterAnimation()`
StickyHeader	Sticky navigation	`new RoyalCode.StickyHeader()`
Lightbox	Image gallery	`new RoyalCode.Lightbox()`
CursorFollower	Custom cursor	`new RoyalCode.CursorFollower()`
ScrollToTop	Scroll to top button	`new RoyalCode.ScrollToTop()`

📚 Real-World Examples

Complete Landing Page Setup

HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="royal-code-animations.css">
</head>
<body>

  <!-- Hero Section -->
  <section class="hero">
    <h1 class="rc-fade-down">Welcome</h1>
    <p class="rc-fade-up rc-delay-300">Amazing animations</p>
  </section>

  <!-- Features -->
  <section class="features rc-stagger-200">
    <div class="rc-zoom-in">Feature 1</div>
    <div class="rc-zoom-in">Feature 2</div>
    <div class="rc-zoom-in">Feature 3</div>
  </section>

  <script src="royal-code.js"></script>
  <script>
    RoyalCode.init();
  </script>
</body>
</html>

Advanced Modal with Callbacks

JAVASCRIPT

const modalManager = new RoyalCode.ModalManager();

modalManager.register('loginModal', 
  document.getElementById('loginModal'), {
  onOpen: () => console.log('Modal opened'),
  onClose: () => console.log('Modal closed'),
  beforeClose: () => {
    return confirm('Close without saving?');
  }
});

📖 API Reference

Utils Object

JAVASCRIPT

// Select elements
RoyalCode.Utils.select('.selector');
RoyalCode.Utils.selectAll('.selectors');

// Event handlers
RoyalCode.Utils.on(element, 'click', handler);
RoyalCode.Utils.off(element, 'click', handler);

// Utility functions
RoyalCode.Utils.debounce(func, 300);
RoyalCode.Utils.throttle(func, 300);
RoyalCode.Utils.isInViewport(element);
RoyalCode.Utils.getOffset(element);

Global Init Method

JAVASCRIPT

RoyalCode.init({
  hamburger: true,
  modal: true,
  scrollAnimations: true,
  smoothScroll: true,
  stickyHeader: true,
  lazyLoad: true,
  counterAnimation: true,
  parallax: true,
  dropdown: true,
  scrollToTop: true,
  preloader: true,
  copyToClipboard: true,
  lightbox: true
});

✅ Shorthand: Use RC as an alias for RoyalCode

🔧 Troubleshooting

Animations not triggering?

Make sure the CSS file is loaded before the HTML
Verify JavaScript is initialized with RoyalCode.init()
Check browser console for errors
Ensure elements have the correct class names (rc-prefix)

Components not working?

Verify data attributes are correctly applied
Check that element IDs match the trigger references
Ensure JavaScript file is loaded after HTML content
Test in different browsers for compatibility

Performance issues?

Reduce the number of simultaneous animations
Use rc-once for scroll animations that should only trigger once
Disable animations on mobile with rc-mobile-disable
Use hardware acceleration with will-change

⚠️ Browser Support: Royal Code works on all modern browsers (Chrome, Firefox, Safari, Edge). For IE11 support, use polyfills.

⚡ Quick Reference

Most Used Animation Classes

Use Case	Class	Modifier
Simple fade in	`rc-fade`	`rc-speed-slow`
Bottom to top slide	`rc-fade-up`	`rc-delay-300`
Zoom entrance	`rc-zoom-in`	`rc-ease-bounce`
Rotate effect	`rc-rotate-in`	`rc-speed-fast`
Special effect	`rc-glitch`	`rc-ease-elastic`

🎯 Overview

🎨 100+ CSS Animations

⚡ 20+ JS Components

🚀 Zero Dependencies

📱 Fully Responsive

⚙️ Easy to Customize

📖 Well Documented

📦 Installation

Direct Include

Quick Start

🎨 CSS Animation Library

1. Fade Animations

2. Zoom Animations

3. Rotate Animations

4. Special Effects

rc-glitch

rc-pulse

rc-shake

rc-swing

rc-wobble

rc-heartbeat

⚙️ Animation Modifiers

Speed Control

Delay Control

Easing Functions

Stagger Animations

⚡ JavaScript Components

1. Hamburger Menu

2. Modal Manager

3. Toast Notifications

4. Form Validation

5. Other Components

📚 Real-World Examples

Complete Landing Page Setup

Advanced Modal with Callbacks

📖 API Reference

Utils Object

Global Init Method

🔧 Troubleshooting

Animations not triggering?

Components not working?

Performance issues?

⚡ Quick Reference

Most Used Animation Classes