0

Im pretty familiar with HTML, CSS, Javascript and JQuery how can I achieve this amazing slide they have on their website where the background fades while the main element on the slide comes in from the side (elements meaning pictures).

Website: http://www.scorpiondesign.com/

Lucas Santos
  • 1,359
  • 3
  • 24
  • 43
  • Well not to sound too incredibly dull but this requires some diligence and careful programming. What I could tell from looking at the page is they layer three or more transparent images over a background. When the tab is changed the background fades to the next slide, and the transparent images all move in at varying speeds. I don't know where you could find a library to provide this but with some effort you could pull it off yourself! – rfoo Sep 21 '13 at 10:50
  • If you're using google chrome you can use Inspect Element to watch this awesome slideshow in action. – rfoo Sep 21 '13 at 10:52

2 Answers2

1

If you are wiling to use jQueryUI effects, then you can easily do this, you need to have png images and any html you want in each slide and have that slide display set to none, outer slider must have overflow property to hidden, now you can slide the images using simply this:

$(".thumb1").click(function(){
     $('#slide1').show('slide', {direction: 'left'}, 1000);     
});

.thumb1 is the thumbnail for slide 1, you can use as many thumbnails as you want and you would have to need to modify the jquery accordingly. #slide1 contains all the html elements you want to slide.

Jamal Khan
  • 471
  • 2
  • 5
  • hmm question would the images for the slide be stacked on top of each other with display set to none or would they be next to each other in a row with the overflow of the slide set to hidden so you cant see the images next to each other? – Lucas Santos Sep 21 '13 at 11:14
  • You can hide the existing slide by using: $('#slide0').hide('slide', {direction: 'left'}, 1000); – Jamal Khan Sep 21 '13 at 11:58
  • You can set the images over each other or any other way you want to style them by using absolute positioning on them, and dont forget to set the position of the container to relative. – Jamal Khan Sep 21 '13 at 12:01
  • cool thanks for the heads up, this all makes sense but it's going to take some time to code up i'll see what I can do.. the idea would be to use the Jquery $('slide1').animate or $('slide1').show – Lucas Santos Sep 23 '13 at 13:09
0

It looks like the background fade is controlled by JavaScript and all the other elements are pngs with transparent backgrounds whose animations are also controlled by javascript

Dex Dave
  • 730
  • 1
  • 6
  • 14