The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Splash page technique – how do they do that

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #32272

    New here, hello everyone.

    I came across a site with a neat intro page effect, which I think has been achieved with some clever css.

    Take a look…

    So is it css or perhaps jquery? And how do they do that???

    All input much appreciated.


    AJAX with jquery. If you look at the page source you’ll see all the info of the different slides is there. JS fades out the old content and slides in the new content without requiring a page refresh.


    Thanks DogsGhost. Yes I had looked at the source but noticed that the copy didn’t match exactly. I wondered whether it was some kind of image slider effect with SEO copy hidden behind the divs.



    You’ve contradicted yourself there. As far as I can see there is no AJAX involved in the coding of that website. AJAX is a call to the server to request new content to display, however, like you have said, on that site all of the splash page content is loaded when the page loads and then shown or hidden depending on what slide the user is on.


    A bit of homework overnight and it seems that the scroll effect is executed with jquery.ScrollTo by Ariel Flesler. Code and examples here

    The sliding panes are large images and indeed, SEO copy is to be found in hidden divs residing behind the images.

    Thanks @DogGhost and @TT_Mark for the pointers.

    Speaking of hidden divs, would google be clever enough to realise these had be hidden with risk of penality?


    Thanks for the correction and clarification Mark.

    Regarding hidden content for SEO and being penalized, even though I don’t know exactly how google decides what hidden text is bad (I know they have some documentation on it somewhere), I think I can say text in the code the user can’t see isn’t necessarily bad in itself. If I give my h1 text indent: -9999px or what have you its because I want to use an image in its place but still have it read by the search engines. The important part is about how the code text compares to what you’re actually showing the user. A hidden paragraph about great deals on las vegas hotels has no place on a site about a goat farm.

    Going back to the copywriter site and actually reading the code text and comparing it to the displayed image-text, things are pretty close, though there is a long ul of services (read: keywords) I don’t see in any of the slides. It has me scratching my head a bit wondering why the large image with hidden text was used in the first place, as the slide affect can be done without it. I guess its a copywriter trick o the trade or something I don’t get.
    Edit: Though on the other hand, not to bash solely on the copywriter, its a lot less work from a design pov too if you know the content is going to be static, though probably not best practice.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.