CODEWITHSUNDEEP
javascripthtmlcsscss-transitions
Benjamin
Benjamin

Reputation: 655

How to do page / content transitions

I'm quite new to this all so sorry for my lack of terminology.

I was looking at this site and I was wondering how I do the content/page change without reloading the page.

Could someone point me in the right direction? What is that JavaScript? CSS transitions? jQuery? Or could you show me some code? Any help would be amazing; I've been looking around for a while can't find anything like it...

Upvotes: 2

Views: 344

Answers (3)

Tomas Ramirez Sarduy
Tomas Ramirez Sarduy

Reputation: 17471

That's a simple slider, just instead of slide images, it slide content (nested divs, img, lists). I checked the code for you and is using this jQuery plugin: SudoSlider plugin

Do not reinvent the wheel by writing your own plugin, you can see few demos here, but this one is very close to the example using auto height. This is how you can use it on your site:

Jquery

<script type="text/javascript" >
    $(document).ready(function(){   
        var sudoSlider = $("#slider").sudoSlider();
    });
</script>

HTML

<div id="slider" >
    <ul>
        <li><div> .... </div></li>
        <li>Lorem ipsum text + image</li>
        <li>List, maps, ...</li>
    </ul>
</div>

Upvotes: 3

McGarnagle
McGarnagle

Reputation: 102723

It's JQuery animation. It's a (very slick, but still) typical carousel effect, where you have a slider div that extends beyond the visible screen, and its left margin is animated to create the effect.

It's straightforward to create the basic effect (but of course a lot of work to create something that looks as good as the link):

  1. Set overflow-x: hidden to a container div
  2. Add a slider div inside the container, and slide elements within the slider
  3. Add navigation buttons, and on click animate the slider's left offset (keeping track of the current position)

Here's a really basic example.

Upvotes: 2

Vytautas Butkus
Vytautas Butkus

Reputation: 5535

I could say that it's possible to use all of the mentioned options :)

Basically you can use something like http://bxslider.com/ to achieve what you want just instead using of img elements inside list items use some content items.

Upvotes: 0

Related Questions