Nowaki Hiroshi Thèmiste
Nombre de messages : 167 Localisation : Dans le forum Date d'inscription : 04/09/2006
| Sujet: 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> |
|