Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

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

blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image

Step: 3

blur-text-image

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

Advances In Databases And Information Systems 23rd European Conference Adbis 2019 Bled Slovenia September 8 11 2019 Proceedings Lncs 11695

Authors: Tatjana Welzer ,Johann Eder ,Vili Podgorelec ,Aida Kamisalic Latific

1st Edition

3030287297, 978-3030287290

More Books

Students also viewed these Databases questions