Far scorrere il contenuto/transizione di pagina

sto cercando di ricreare something like they've got over at gimmebar.com.Far scorrere il contenuto/transizione di pagina

Quando si fa clic su un'immagine, la pagina corrente contenuti fuoriesce sinistra e si spegne. La pagina di destinazione si affievolisce e scivola da destra.

Ho provato un paio di cose, come creare due div in un contenitore con una larghezza del 200% e scorrere il contenuto per visualizzare e usare JqueryUI e far scorrere i div. Lo scorrimento non è riuscita con il div non si muove a tutti e srollLeft essere sempre 0 non importa cosa. La diapositiva ha funzionato un po 'meglio ma a me sembra che non vengano eseguiti contemporaneamente. Il secondo div si apre all'esistenza invece di scivolare piacevolmente dietro al primo.

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>slide demo</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> 
    <style> 
    .container { 
     width: 100%; 
     float: left; 
     height: 800px; 
    } 
    #one { 
     background-color: red; 
    } 
    #two { 
     background-color: #333; 
     display: none; 
    } 
    </style> 
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script> 
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
</head> 
<body> 
    <div class="container" id="one"></div> 
    <div class="container" id="two"></div> 
<script> 
$(document).click(function() { 
      $("#one").hide("slide", { direction: "left" }, 1000); 
      $("#two").show("slide", { direction: "left" }, 1000); 
}); 
</script> 
</body> 
</html>

Sembra che dovrebbe essere così facile da raggiungere ma sono bloccato.

Fare attenzione.

Modifica: Ho avuto modo di funzionare come potete vedere in this fiddle. La diapositiva è lì ma non riesco a vedere nessuna dissolvenza. Ci potrebbe essere anche un modo migliore di raggiungere questo ma sono abbastanza soddisfatto di non dover caricare un terzo lib/plugin solo per far scorrere un div.

http://webadvent.org/2012/css-sliding-panels-by-bedrich-rios Trovato un tutorial scritto dal proprio sviluppatore. Pensa che conterebbe come soluzione.

fonte

2012-12-01 Oskar

vi consiglio di utilizzare questo script jQuery non usato molto tempo fa in un sito web e ha funzionato come un fascino la sua chiamata CODA SLIDER, è stata fatta da Kevin Batdorf e l'installazione dei suoi appena 5 righe di codice.

Buona fortuna

fonte

2012-12-01 03:17:00 Minnen

Lo sviluppatore ora si collega a un progetto di follow-up chiamato [Liquid Slider] (http://liquidslider.com/). –

Una soluzione javascript puro: nel CSS:

div.wrap {visibility: hidden; position: absolute; overflow: hidden; 
    top: 0; left: 0; width: 100%; height: 100%} 
div.wrap div.newContent {visibility: visible; position: relative; left: 100%;}

nel codice HTML:

<div class="initContent"> 
    This is the content that is initially displayed 
</div> 
<div class="wrap"> 
    <div class="newContent"> 
     Put the content you want to be revealed here 
    </div> 
</div>

Il div newContent è inizialmente nascosto perché il suo bordo sinistro è al bordo destro del suo genitore (wrap) div, e il CSS dice al browser di nascondere qualsiasi contenuto che trabocca il div padre.

Quindi per rivelare il contenuto nascosto impostare un timer che diminuisce progressivamente la style.left per il div interno da 100% a 0% e aumenta l'opacità da 0 a 1. feci una class for opening/closing swipey menus che può essere adattato leggermente per farlo. (EDIT: a newer version)

fonte

2012-12-01 17:09:28 Stuart

Far scorrere il contenuto/transizione di pagina

risposta

Problemi correlati