Question
Slide show application with effects and animations for a travel agency (max. 100%) Sunshine Beach travel agency needs to make their website more attractive and
Slide show application with effects and animations for a travel agency (max. 100%) Sunshine Beach travel agency needs to make their website more attractive and interactive by implementing some effects and animations. The requirements are: Using the images provided by the agency create a slide show. The slide show should show the slides by fading In and hide by fading out. At the same time, the caption of the slide should appear with animation of the font size, left property and opacity. Study the HTML (index.html) and CSS (in styles folder). Notice that in HTML the slides are in img elements and their captions are in their title attributes. Follow these steps to implement the slide show: 1) Create a jQuery ready event handler in the empty vacations-in-pictures.js file which is in the scripts folder; 2) In that ready event handler, get the first image (within div with id "slides") with jQuery and show it using jQuery fading in effect within 1 second. 3) At the same time, get the title of the first slide, set the text of h2 element with id "caption" to this title and show this h2 element by animating those properties within 1 second: Font size: 100% Left: 0 Opacity: completely opaque (visible) 4) Create a function expression which, when called, hides the current caption (h2 element) and current slide, gets next slide and caption, and shows next caption and next slide. Current caption is hidden by animating the following properties within 0.5 seconds: Font size: 50% Left: -300 Opacity: completely transparent (invisible) Within the function expression the current image is hidden with fade out effect within 0.5 seconds. As soon as the current image is hidden, you need to get next slide in the list of slides and fade in within 1 second (you should check if you are at the last slide already, and if not, get next slide, otherwise get first slide because you need to restart the slide show from first slide when you are at the last slide) At the same time of showing next slide, get next images title, set the text of h2 element to this title and show it by animating the same properties as in step 3. 5) Create an interval timer that calls the function expression that you created in step 4 every 4 seconds
Step by Step Solution
There are 3 Steps involved in it
Step: 1
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started