Partagez | 
 

 Bloc & Défillement

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Nowaki Hiroshi
Thèmiste
avatar

Nombre de messages : 192
Localisation : Dans le forum
Date d'inscription : 04/09/2006

MessageSujet: Bloc & Défillement   25.08.15 15:49



Code original : ℓa∂у aqυaяιυѕ | La remercier

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper varius neque lacinia faucibus. Vivamus consequat elementum turpis, eu rhoncus massa cursus ut. Etiam semper tellus a ex faucibus placerat. Duis sagittis mollis nunc, et lobortis enim fringilla eget. Nam non nulla vel odio sagittis convallis et vitae tortor. Quisque gravida tempor neque ac aliquam. Quisque finibus dolor at lorem tempor ultricies. Duis sed lacus commodo, feugiat ligula eu, sollicitudin est. Etiam sed blandit nunc. Vivamus id ante gravida, interdum nunc id, luctus dolor. In eget nisl lacus. Fusce ante nunc, tincidunt eu felis at, aliquet scelerisque magna. Mauris facilisis dui at arcu consectetur, sed tincidunt mi ornare. Sed nec hendrerit elit. Pellentesque interdum nibh ut elit sagittis semper. Nunc vel ex eget tellus imperdiet laoreet eget sit amet urna.Zone de texte n°2.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper varius neque lacinia faucibus. Vivamus consequat elementum turpis, eu rhoncus massa cursus ut. Etiam semper tellus a ex faucibus placerat. Duis sagittis mollis nunc, et lobortis enim fringilla eget. Nam non nulla vel odio sagittis convallis et vitae tortor. Quisque gravida tempor neque ac aliquam. Quisque finibus dolor at lorem tempor ultricies. Duis sed lacus commodo, feugiat ligula eu, sollicitudin est. Etiam sed blandit nunc. Vivamus id ante gravida, interdum nunc id, luctus dolor. In eget nisl lacus. Fusce ante nunc, tincidunt eu felis at, aliquet scelerisque magna. Mauris facilisis dui at arcu consectetur, sed tincidunt mi ornare. Sed nec hendrerit elit. Pellentesque interdum nibh ut elit sagittis semper. Nunc vel ex eget tellus imperdiet laoreet eget sit amet urna.


Défilement sur la gauche :

Code:
<style type="text/css">.blackmove {margin:auto; padding:0px; text-align:justify; width:500px; height:200px; background:#FFF url(http://i39.servimg.com/u/f39/11/59/31/05/rxttnp10.jpg); color:#666; line-height:12px;} .textes {margin:0px; padding:0px; width:500px; float:left; display:block;} .texte2 {margin-top:-132px; margin-left:500px; padding:0px; width:0px; height:200px; position:absolute; float:left; overflow:hidden; display:block; background:#FFF url(http://i39.servimg.com/u/f39/11/59/31/05/rxttnp10.jpg); transition:0.7s all ease;} .textes:hover .texte2 { margin-top:-132px; margin-left:0px; width:500px; height:200px; background:#FFF url(http://i39.servimg.com/u/f39/11/59/31/05/rxttnp10.jpg); transition:1s;}</style>

Défilement sur la droite :


Code:
<style type="text/css">.blackmove {margin:auto; padding:0px; text-align:justify; width:500px; height:200px; background:#FFF url(http://i39.servimg.com/u/f39/11/59/31/05/rxttnp10.jpg); color:#666; line-height:12px;} .textes {margin:0px; padding:0px; width:500px; float:left; display:block;} .texte2 {margin-top:-132px; margin-right:0px; padding:0px; width:0px; height:200px; position:absolute; float:right; overflow:hidden; display:block; background:#FFF url(http://i39.servimg.com/u/f39/11/59/31/05/rxttnp10.jpg); transition:0.7s all ease;} .textes:hover .texte2 { margin-top:-132px; margin-right:0px; width:500px; height:200px; background:#FFF url(http://i39.servimg.com/u/f39/11/59/31/05/rxttnp10.jpg); transition:1s;}</style>

Corps de l'article :

Code:

<div class="blackmove"><div class="textes"><span class="texte1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper varius neque lacinia faucibus. Vivamus consequat elementum turpis, eu rhoncus massa cursus ut. Etiam semper tellus a ex faucibus placerat. Duis sagittis mollis nunc, et lobortis enim fringilla eget. Nam non nulla vel odio sagittis convallis et vitae tortor. Quisque gravida tempor neque ac aliquam. Quisque finibus dolor at lorem tempor ultricies. Duis sed lacus commodo, feugiat ligula eu, sollicitudin est. Etiam sed blandit nunc. Vivamus id ante gravida, interdum nunc id, luctus dolor. In eget nisl lacus. Fusce ante nunc, tincidunt eu felis at, aliquet scelerisque magna. Mauris facilisis dui at arcu consectetur, sed tincidunt mi ornare. Sed nec hendrerit elit. Pellentesque interdum nibh ut elit sagittis semper. Nunc vel ex eget tellus imperdiet laoreet eget sit amet urna.</span><span class="texte2">Zone de texte n°2.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper varius neque lacinia faucibus. Vivamus consequat elementum turpis, eu rhoncus massa cursus ut. Etiam semper tellus a ex faucibus placerat. Duis sagittis mollis nunc, et lobortis enim fringilla eget. Nam non nulla vel odio sagittis convallis et vitae tortor. Quisque gravida tempor neque ac aliquam. Quisque finibus dolor at lorem tempor ultricies. Duis sed lacus commodo, feugiat ligula eu, sollicitudin est. Etiam sed blandit nunc. Vivamus id ante gravida, interdum nunc id, luctus dolor. In eget nisl lacus. Fusce ante nunc, tincidunt eu felis at, aliquet scelerisque magna. Mauris facilisis dui at arcu consectetur, sed tincidunt mi ornare. Sed nec hendrerit elit. Pellentesque interdum nibh ut elit sagittis semper. Nunc vel ex eget tellus imperdiet laoreet eget sit amet urna.</span></div></div>

_________________
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://canal-graphessay.editboard.com
 
Bloc & Défillement
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» [Bloc SoA] jund "ramp"
» L''effondrement du bloc de l''Est
» Deck Bloc
» Bloc noir sur le fil d'alimentation
» Dirt 3 - Vidéo de Ken Bloc et mini Ken Bloc !

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Canal-graph :: Partie codage :: Mémos Pratiques-
Sauter vers: