Vous pouvez utiliser des transitions CSS3 ou peut-être des animations CSS3 pour insérer un élément.

Pour le support du navigateur: http://caniuse.com/

J’ai fait deux exemples rapides pour vous montrer comment je veux dire.

Transition CSS (en survol)

Une démo

Code pertinent

 .wrapper:hover #slide { transition: 1s; left: 0; } 

Dans ce cas, je left: -100px; juste la transition de la position de left: -100px; à 0; avec un 1 durée. Il est également possible de déplacer l’élément en utilisant transform: translate();

Animation CSS

Démo Deux

 #slide { position: absolute; left: -100px; width: 100px; height: 100px; background: blue; -webkit-animation: slide 0.5s forwards; -webkit-animation-delay: 2s; animation: slide 0.5s forwards; animation-delay: 2s; } @-webkit-keyframes slide { 100% { left: 0; } } @keyframes slide { 100% { left: 0; } } 

Même principe que ci-dessus (Demo One), mais l’animation démarre automatiquement après 2s, et dans ce cas, j’ai placé animation-fill-mode en forwards , ce qui persistera dans l’état final, maintenant le div visible lorsque l’animation se termine.

Comme je l’ai dit, deux exemples rapides pour vous montrer comment cela pourrait être fait.

EDIT: Pour plus de détails concernant les animations CSS et les transitions, voir:

Des animations

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

Transitions

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

J’espère que cela a aidé.

Utiliser la transform 2D CSS3 pour éviter les problèmes de performances (mobile)

Un piège courant consiste à animer les propriétés left / top / right / bottom au lieu d’utiliser css-transform pour obtenir le même effet. Pour diverses raisons, la sémantique des transformations les rend plus faciles à décharger, mais les opérations left / top / right / bottom sont beaucoup plus difficiles.

Source: Réseau de développeurs Mozilla (MDN)

Démo:

 var $slider = document.getElementById('slider'); var $toggle = document.getElementById('toggle'); $toggle.addEventListener('click', function() { var isOpen = $slider.classList.contains('slide-in'); $slider.setAtsortingbute('class', isOpen ? 'slide-out' : 'slide-in'); }); 

 #slider { position: absolute; width: 100px; height: 100px; background: blue; transform: translateX(-100%); -webkit-transform: translateX(-100%); } .slide-in { animation: slide-in 0.5s forwards; -webkit-animation: slide-in 0.5s forwards; } .slide-out { animation: slide-out 0.5s forwards; -webkit-animation: slide-out 0.5s forwards; } @keyframes slide-in { 100% { transform: translateX(0%); } } @-webkit-keyframes slide-in { 100% { -webkit-transform: translateX(0%); } } @keyframes slide-out { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } } @-webkit-keyframes slide-out { 0% { -webkit-transform: translateX(0%); } 100% { -webkit-transform: translateX(-100%); } } 

 
 
 
Lorem
 
Ipsum
 
Dolor
 
 
 Toggle 

Voici une autre solution utilisant la transformation css (à des fins de performances sur les mobiles, voir la réponse de @ mate64) sans avoir à utiliser d’animations et d’images clés.

J’ai créé deux versions à insérer de chaque côté.

 $('#toggle').click(function() { $('.slide-in').toggleClass('show'); }); 

 .slide-in { z-index: 10; /* to position it in front of the other content */ position: absolute; overflow: hidden; /* to prevent scrollbar appearing */ } .slide-in.from-left { left: 0; } .slide-in.from-right { right: 0; } .slide-in-content { padding: 5px 20px; background: #eee; transition: all .5s ease; /* our nice transition */ } .slide-in.from-left .slide-in-content { transform: translateX(-100%); -webkit-transform: translateX(-100%); } .slide-in.from-right .slide-in-content { transform: translateX(100%); -webkit-transform: translateX(100%); } .slide-in.show .slide-in-content { transform: translateX(0); -webkit-transform: translateX(0); } 

  
 
 
 
Lorem
 
Ipsum
 
Dolor
 
 
 
 
 
 
 
One
 
Two
 
Three
 
 
 
 Toggle 

UTILISEZ CE POUR DROIT À GAUCHE:

HTML:

  
 
 
HOME
 
ABOUT
 
SERVICES
 
CONTACT
 
  

CSS:

 /*nav*/ .nav{ position: fixed; right:0; top: 70px; width: 250px; height: calc(100vh - 70px); background-color: #333; transform: translateX(100%); transition: transform 0.3s ease-in-out; } .nav-view{ transform: translateX(0); } .nav ul{ margin: 0; padding: 0; } .nav ul li{ margin: 0; padding: 0; list-style-type: none; } .nav ul li a{ color: #fff; display: block; padding: 10px; border-bottom: solid 1px rgba(255,255,255,0.4); text-decoration: none; } 

JS:

  $(document).ready(function(){ $('a#click-a').click(function(){ $('.nav').toggleClass('nav-view'); }); }); 

FICHIER TUTORIAL ET SOURCE: [REGARDEZ CETTE VIDÉO] [1]

DEMO: http://www.themeswild.com/read/slide-navigation-left-to-right