Skip to content

🎬 Advanced jQuery Animation Slideshow - A sophisticated 17-slide automated presentation system with complex animations, transitions, and visual effects. Features position changes, opacity transitions, rotation effects, and size transformations with precise timing control.

Notifications You must be signed in to change notification settings

0x0Zeus/jquery-animation-slideshow

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

3 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

jQuery Animation Slideshow

A sophisticated, automated slideshow system built with jQuery that creates dynamic presentations with complex animations, transitions, and visual effects.

🎯 Overview

This project demonstrates advanced jQuery animation techniques through a 17-slide automated presentation system. Each slide features carefully choreographed animations including position changes, opacity transitions, rotation effects, and size transformations.

✨ Features

  • 17 Pre-configured Slides: Each with unique animation sequences
  • Advanced Animation System: Complex timing and sequencing controls
  • Multiple Animation Effects:
    • Position transitions (top, left)
    • Opacity changes (fade in/out)
    • Rotation effects (0-360 degrees)
    • Size transformations (width, height)
    • Staggered element animations
  • Automatic Playback: Continuous loop through all slides
  • Responsive Design: Optimized for various screen sizes
  • Cross-browser Compatibility: Works across modern browsers
  • Customizable Timing: Configurable animation durations and delays

πŸš€ Quick Start

Prerequisites

  • Modern web browser
  • Web server (local or hosted)

Installation

  1. Clone or Download the project files
  2. Open index.html in your web browser
  3. View the automated slideshow in action

File Structure

jquery-animation/
β”œβ”€β”€ index.html              # Main HTML file
β”œβ”€β”€ style.css               # Main stylesheet
β”œβ”€β”€ js/
β”‚   β”œβ”€β”€ jquery-1.6.2.js     # jQuery core library
β”‚   β”œβ”€β”€ animationData.js    # Animation configurations
β”‚   β”œβ”€β”€ jQuery.slideranimation.js  # Custom animation plugin
β”‚   β”œβ”€β”€ jQueryRotate.2.2.js # Rotation effects plugin
β”‚   └── [jQuery UI files]   # Additional jQuery UI components
β”œβ”€β”€ css/                    # jQuery UI stylesheets
└── images/                 # Slide assets and backgrounds

🎨 Customization

Adding New Slides

  1. Create HTML Structure:
<div id="slider18">
    <img class="sliderElm1" src="images/your-image.png"/>
    <img class="sliderElm2" src="images/another-image.png"/>
</div>
  1. Add Animation Data in js/animationData.js:
"slider18": {
    "startAnimation": {
        "sliderElm1": {
            "effect": {"top": "100px", "opacity": 1},
            "duration": 300,
            "startIndex": 0
        },
        "sliderElm2": {
            "effect": {"left": "400px", "rotate": 45},
            "duration": 400,
            "startIndex": 1
        }
    },
    "endAnimation": {
        // Define exit animations
    },
    "pauseTime": 2000
}

Animation Properties

Property Description Example
top Vertical position "100px" or "-50px"
left Horizontal position "200px" or "+=100px"
opacity Transparency 0 (invisible) to 1 (visible)
rotate Rotation angle 90 (degrees)
width Element width "300px" or "+=50px"
height Element height "200px" or "+=30px"
duration Animation length 300 (milliseconds)
startIndex Animation sequence 0 (first) to n (last)

Timing Control

  • startIndex: Controls animation sequence (lower numbers animate first)
  • duration: Animation duration in milliseconds
  • pauseTime: Time slide remains visible before transitioning
  • easing: Animation easing function (optional)

πŸ”§ Technical Details

Core Components

Animation Engine (jQuery.slideranimation.js)

  • Custom jQuery plugin for orchestrating animations
  • Automatic timing calculations
  • State preservation and restoration
  • Continuous loop management

Animation Data (animationData.js)

  • JSON-based configuration
  • Separate start and end animations
  • Flexible effect definitions
  • Easy modification and extension

Rotation Plugin (jQueryRotate.2.2.js)

  • Cross-browser rotation support
  • Smooth rotation animations
  • IE compatibility layer

Browser Support

  • βœ… Chrome (recommended)
  • βœ… Firefox
  • βœ… Safari
  • βœ… Edge
  • ⚠️ Internet Explorer (limited support)

πŸ“± Usage Examples

Basic Implementation

$(document).ready(function() {
    // Start animation after 700ms delay
    setTimeout(function(){
        $('.sliderwrapper').setAnimation();
    }, 700);
});

Custom Animation Trigger

// Trigger animation on button click
$('#startButton').click(function() {
    $('.sliderwrapper').setAnimation();
});

🎭 Animation Examples

Slide 1: Fade and Slide

  • Elements slide in from different directions
  • Staggered opacity transitions
  • Smooth position changes

Slide 4: Rotation and Scale

  • 30-degree rotation effects
  • Dynamic size changes
  • Complex timing sequences

Slide 10: Text Rotation

  • 90-degree text rotations
  • Opacity-based transitions
  • Multi-element coordination

🀝 Contributing

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Test thoroughly
  5. Submit a pull request

πŸ“„ License

This project is open source and available under the MIT License.

πŸ™ Acknowledgments

  • jQuery Team for the core library
  • Wilq32 for the jQueryRotate plugin
  • jQuery UI Team for additional components

πŸ“ž Support

For questions, issues, or contributions:

  • Create an issue in the repository
  • Review the animation data structure in js/animationData.js
  • Check browser console for debugging information

Built with ❀️ using jQuery and modern web technologies

About

🎬 Advanced jQuery Animation Slideshow - A sophisticated 17-slide automated presentation system with complex animations, transitions, and visual effects. Features position changes, opacity transitions, rotation effects, and size transformations with precise timing control.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published