How Is This Effect Achieved? HTML/CSS/jQuery [closed]


Tags: jquery,html,css,animation

Problem :

If you go to this site here: http://alexdunphy.github.com/refineslide/#installation

And click on the menu buttons "Installation", "Tuning", "FAQ", "About" etc... you'll notice there is a nice transition between each page, without the entire page reloading.

I just started web development and I want to try and achieve a similar effect.

Here's my guess on how he is doing it:

  1. iFrame with that content, button triggers each iFrame to be loaded. Each iFrame's top level <div> has some -webkit- or -moz- animation in.

  2. The entire content is in a div, each button simply fades the previous div out and fades the next div in with some CSS animation.

I will try these both, unless you guys know how it is done.

Out of 1 and 2 which is the more appealing choice?



Solution :

It uses a pseudo-selector called target, the links append #pagename to the url, and the appropriate animations take place from there.

The HTML might look something like:

<p id='pagename'>This is some text</p>

The links look like:

<a href='#pagename'>This link goes to pagename</a>

And then in the CSS, you can define:

#pagename:target {
    font-weight: bold;
}

This would make the text inside #pagename be bold when you click the link. From here you can extend it to include animations, something like giving all divs opacity 0 and position left: 50px;

And then whenever a div is targeted, you animate the opacity to 1 and the left to 0px

Edit: Here's a quick example I whipped up which emulates the exact effect you're going for: http://jcolicchio.latestdot.net/test_target.html#page1


    CSS Howto..

    htmlAttributes: How do I add a CSS class rule for the below?

    How to inline style an embedded gist with CSS

    How to top-level a rich:panelMenu with it's rich:outputPanel with an h:panelGrid?

    How to Scale Down a Large Image Using HTML and/or CSS

    How do I detect box-sizing border-box support with Modernizr

    How to get global selector inside emulated view encapsulation (CSS / Angular2)

    How to get UiBinder Styles to Act The Same as From a .css File?

    In GWT, how to reference an external (obfuscated) CSS in another CSS file

    How to solve the disapearing of top margins in element when using CSS3 Pie in IE7

    Using CSS to create custom borders with just the corners showing

    How to make a div snap to min or max size, without any sizes in-between?

    How can I force each piece of a quadrant to inhabit only its fourth of the area (HTML/CSS)?

    How can I make my icon
    s show up next to each other, rather than underneath each other?

    How can I make the left div expand and the right div have constant width?

    How do you make 2 different views for logged in/not logged in like facebook's newsfeed/login pages?

    How to force free CSS resize on input element when its width is specified?

    How can I make kinetic.js full screen background view

    How to achieve this layout with CSS?

    How to make first page fullscreen and others not [closed]

    How i can optimize Performance in asp.NET MVC based web application

    How to decode data:image/png:base64… to a real image using javascript

    How to click an element by innerthtml using CSS selectors in Selenium

    How to use knockout and i18next for a specfic screen size?

    How to apply a transition effect to some text when hovering over an icon?

    Background image url is not showing the image

    How to show one Div when the user hovers over another on Tumblr?

    How can I get the second line of text to hide and show on hover? CSS only

    How to fade multiple background colors after few seconds? [duplicate]

    How to combine components in HTML header

    How to add css on elements created through ajax (jquery)?