A sophisticated, automated slideshow system built with jQuery that creates dynamic presentations with complex animations, transitions, and visual effects.
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.
- 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
- Modern web browser
- Web server (local or hosted)
- Clone or Download the project files
- Open
index.html
in your web browser - View the automated slideshow in action
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
- Create HTML Structure:
<div id="slider18">
<img class="sliderElm1" src="images/your-image.png"/>
<img class="sliderElm2" src="images/another-image.png"/>
</div>
- 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
}
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) |
startIndex
: Controls animation sequence (lower numbers animate first)duration
: Animation duration in millisecondspauseTime
: Time slide remains visible before transitioningeasing
: Animation easing function (optional)
- Custom jQuery plugin for orchestrating animations
- Automatic timing calculations
- State preservation and restoration
- Continuous loop management
- JSON-based configuration
- Separate start and end animations
- Flexible effect definitions
- Easy modification and extension
- Cross-browser rotation support
- Smooth rotation animations
- IE compatibility layer
- β Chrome (recommended)
- β Firefox
- β Safari
- β Edge
β οΈ Internet Explorer (limited support)
$(document).ready(function() {
// Start animation after 700ms delay
setTimeout(function(){
$('.sliderwrapper').setAnimation();
}, 700);
});
// Trigger animation on button click
$('#startButton').click(function() {
$('.sliderwrapper').setAnimation();
});
- Elements slide in from different directions
- Staggered opacity transitions
- Smooth position changes
- 30-degree rotation effects
- Dynamic size changes
- Complex timing sequences
- 90-degree text rotations
- Opacity-based transitions
- Multi-element coordination
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
This project is open source and available under the MIT License.
- jQuery Team for the core library
- Wilq32 for the jQueryRotate plugin
- jQuery UI Team for additional components
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