/!\ Revenir à la page d'accueil du plugin wSlide
/!\ Autres pages de demo: wSlide - tests sans effets | wSlide - tests avec effets
/!\ Pour les styles css des exemples, explorez le code source de la page, ils sont écrit en dur et séparés distinctement !
/!\ Autres pages de demo: wSlide - tests sans effets | wSlide - tests avec effets
/!\ Pour les styles css des exemples, explorez le code source de la page, ils sont écrit en dur et séparés distinctement !
Diaporama 360
Code et explications
Dans cet exemple, j'ai juste appliqué une image au format 360° en background de l'élément "li". Ce qui donne un fond sans fin.#parent1 ul{
background-image: url(image/panorama-360.jpg);
}
- Lorem ipsum ad delenit omittam his, habeo justo ad sea! Eu mel volumus noluisse disputando! Cu prompta moderatius sit? Et iuvaret suavitate vix, ne eum audiam luptatum, nam in epicuri adipisci scripserit.
- His ad copiosae erroribus, has eu mucius cotidieque concludaturque. No appareat iracundia complectitur eum, pri an euismod corrumpit, zzril animal mnesarchum id sed. Ex duis erat persius est, ne vis assum timeam tamquam, rebum quaeque civibus in qui. Populo animal dissentiunt in eos. Ludus molestie ut vix, eum eros lobortis id.
- Quodsi dissentiunt cu eos, duo cu clita veritus, mei quot velit scriptorem ea? At kasd dolorum facilisi per, te discere inermis patrioque duo. Integre nominati sapientem has et? Ad erat essent ius, pro quando menandri definitiones te?
- Indoctum moderatius cum te? In dictas hendrerit eam. Vel meliore fuisset perpetua et? Nibh debitis erroribus mea te, sed cu virtute volutpat periculis. Omnium integre philosophia ut quo, et detracto honestatis sed.
- In eum natum facete, in eum vero vidit consectetuer. Alii oportere signiferumque id nam, mandamus recteque pro at? Eu perpetua sadipscing pro, pro omittam invenire ex. Sit no nemore omnium accommodare, sit in idque inani! Ut quo ubique dictas nostrud. Eum at quis pericula repudiandae, usu ne ornatus explicari vulputate.
- Simul tantas nostrum at has, his id postulant cotidieque, in eum omnium mediocrem moderatius! Pro oratio scriptorem ei, causae accusata est te. Ex quod nonummy has, usu et omnium probatus deterruisset! Ea impetus percipit takimata has. No qui probo dolore convenire. Et conceptam intellegat sententiae sit, has ex tota nobis.
- Nostrum volutpat cu ius. Sed affert aliquyam ea? An quo verear accumsan voluptaria. Id graeci audire sit.
- Pri petentium definitiones ad? Utinam delenit eos ex? Vim ea discere officiis conclusionemque, ad his lorem ponderum praesent? Ut vim consul timeam iracundia, mel civibus posidonium et, nam ea audire evertitur. An docendi pertinacia eum, utroque officiis his ne?
Visionneuse
Code et explications
Ici j'ai juste rempli les éléments 'li' avec des images, pour en faire une galerie (j'ai utilisé la mème image par simplicité). Arrangé vous juste pour donner des dimensions suffisantes au bloc, pour ne pas rogner des images. Il faut evidement ne pas appliquer de padding !#parent2 li{
padding: 0;
}
Cercles
Code et explications
En donnant une image de fond originale aux éléments 'li', on peut obtenir des effet interessants. J'ai joué sur le padding pour placer le texte.#parent3 li{
background-image: url(image/step3_circle.gif);
padding: 120px 75px;
color: white;
}
- Lorem ipsum ad delenit omittam his, habeo justo ad sea! Eu mel volumus noluisse disputando! Cu prompta moderatius sit? Et iuvaret suavitate vix, ne eum audiam luptatum, nam in epicuri adipisci scripserit.
- His ad copiosae erroribus, has eu mucius cotidieque concludaturque. No appareat iracundia complectitur eum, pri an euismod corrumpit, zzril animal mnesarchum id sed. Ex duis erat persius est, ne vis assum timeam tamquam, rebum quaeque civibus in qui.
- Quodsi dissentiunt cu eos, duo cu clita veritus, mei quot velit scriptorem ea? At kasd dolorum facilisi per, te discere inermis patrioque duo. Integre nominati sapientem has et? Ad erat essent ius, pro quando menandri definitiones te?
- Indoctum moderatius cum te? In dictas hendrerit eam. Vel meliore fuisset perpetua et? Nibh debitis erroribus mea te, sed cu virtute volutpat periculis. Omnium integre philosophia ut quo, et detracto honestatis sed.
- In eum natum facete, in eum vero vidit consectetuer. Alii oportere signiferumque id nam, mandamus recteque pro at? Eu perpetua sadipscing pro, pro omittam invenire ex. Sit no nemore omnium accommodare, sit in idque inani!
- Simul tantas nostrum at has, his id postulant cotidieque, in eum omnium mediocrem moderatius! Pro oratio scriptorem ei, causae accusata est te. Ex quod nonummy has, usu et omnium probatus deterruisset! Ea impetus percipit takimata has.
- Nostrum volutpat cu ius. Sed affert aliquyam ea? An quo verear accumsan voluptaria. Id graeci audire sit.
- Pri petentium definitiones ad? Utinam delenit eos ex? Vim ea discere officiis conclusionemque, ad his lorem ponderum praesent? Ut vim consul timeam iracundia, mel civibus posidonium et, nam ea audire evertitur. An docendi pertinacia eum, utroque officiis his ne?
Fixed
Code et explications
Ici j'ai donné un effet de fond "fixe" en appliquand une image de fond sur le div qui contient la liste ...#parent4-wrap{
background-image: url(image/blancheur.jpg);
}
- Lorem ipsum ad delenit omittam his, habeo justo ad sea! Eu mel volumus noluisse disputando! Cu prompta moderatius sit? Et iuvaret suavitate vix, ne eum audiam luptatum, nam in epicuri adipisci scripserit.
- His ad copiosae erroribus, has eu mucius cotidieque concludaturque. No appareat iracundia complectitur eum, pri an euismod corrumpit, zzril animal mnesarchum id sed. Ex duis erat persius est, ne vis assum timeam tamquam, rebum quaeque civibus in qui.
- Quodsi dissentiunt cu eos, duo cu clita veritus, mei quot velit scriptorem ea? At kasd dolorum facilisi per, te discere inermis patrioque duo. Integre nominati sapientem has et? Ad erat essent ius, pro quando menandri definitiones te?
- Indoctum moderatius cum te? In dictas hendrerit eam. Vel meliore fuisset perpetua et? Nibh debitis erroribus mea te, sed cu virtute volutpat periculis. Omnium integre philosophia ut quo, et detracto honestatis sed.
- In eum natum facete, in eum vero vidit consectetuer. Alii oportere signiferumque id nam, mandamus recteque pro at? Eu perpetua sadipscing pro, pro omittam invenire ex. Sit no nemore omnium accommodare, sit in idque inani!
- Simul tantas nostrum at has, his id postulant cotidieque, in eum omnium mediocrem moderatius! Pro oratio scriptorem ei, causae accusata est te. Ex quod nonummy has, usu et omnium probatus deterruisset! Ea impetus percipit takimata has.
- Nostrum volutpat cu ius. Sed affert aliquyam ea? An quo verear accumsan voluptaria. Id graeci audire sit.
- Pri petentium definitiones ad? Utinam delenit eos ex? Vim ea discere officiis conclusionemque, ad his lorem ponderum praesent? Ut vim consul timeam iracundia, mel civibus posidonium et, nam ea audire evertitur. An docendi pertinacia eum, utroque officiis his ne?
/!\ Revenir à la page d'accueil du plugin wSlide
/!\ Autres pages de demo: wSlide - tests sans effets | wSlide - tests avec effets
/!\ Pour les styles css des exemples, explorez le code source de la page, ils sont écrit en dur et séparés distinctement !
/!\ Autres pages de demo: wSlide - tests sans effets | wSlide - tests avec effets
/!\ Pour les styles css des exemples, explorez le code source de la page, ils sont écrit en dur et séparés distinctement !