How to do page / content transitions


Tags: javascript,html,css,css-transitions

Problem :

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...



Solution :

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>

    CSS Howto..

    CSS: How to have only 100% with fluid layout and border?

    How to (and how not to) load a css file that uses @font-face

    how to overwrite inline styles in print css?

    How to correctly align fixed header fully to top and left in CSS

    How to make rotating shape look thick?

    How to achieve “background-image: cover” CSS effect for dynamic images?

    How do people make sections in HTML pages? [closed]

    How to remove dropdown active color in bootstrap 3.0?

    jQuery hide() method do show element with display:none !important

    How to design the web page for minimum format loss when pasting into MS Word

    How to call apk font use CSS in android?

    How to make lightbox scroll the lightbox and not the page

    How to find out if an element is in a fixed positioned container?

    How to align text vertical CSS

    Nine divs in columns. How to design this?

    Do East Asian (e.g. Chinese) characters have baselines? How do they align with English in CSS?

    How to style this button in CSS to appear pushed down?

    How to overide CSS style of a class using jquery? [closed]

    How to make table by CSS?

    How do I create a DIV based on the browser size?

    how to set CSS border-left outside of box

    CSS3 Transitions in Stylus - how to degrade for IE9

    How do horizontally align text next to an image with CSS

    Telling LESS CSS how to behave with .active li

    How can i create a hexagon shape with an image inside? [duplicate]

    How to change css class according to the name attribute of a parent

    How to select text within li using css [duplicate]

    How to position bottom of div above top of its container

    How CSS Positions work, why absolute elements stack up on each other instead of stacking one after other

    How can a div be aligned center using jquery [closed]