[Tuto] Volet d'accueil, fluidité et abeilles |
Répondre | Page 123 8> |
Auteur |
Sujet Recherche Options des sujets
|
|
Larsene
Admin Group Depuis le: 05 Mar 2012 Pays: France Status: Inactif Points: 5388 |
Options des messages
Thanks(2)
Envoyé : 30 Nov 2014 à 19:25 |
|
Hello,
Ce tutoriel fait partie de la collection des Tuto Vidéos de Larsène Il va vous expliquer comment réaliser une page d'accueil comme celle-ci, avec une photo pleine page avec un menu en bas de la fenêtre, qui va s'ajuster en haut de la fenêtre au scroll et dont la partie haute est fluide et s'ajuste à l'écran d'affichage. Il permet de vois les outils de OpenElement permettant une page fluide, découvrir comment utiliser les panneaux d'élément en mode relative plutôt que absolute, complété par du script jquery, et aborde le principe des éléments "volants" dont la position est définie par un script jquery soit en fixed soit en relative selon un évènement (ici, le scroll sur la page) Sur la capture précédente, on voit bien le menu qui s'ajuste en bas de la fenêtre. On voit moins l'effet au scroll et au redimensionnement ! (les photos sont miennes) L'exemple est visible ici : http://stalagtic.com/BeesDemo.htm Tutoriel disponible ici : https://www.youtube.com/watch?v=wq9inenYV_4 Pour plus de confort, je vous redonne ci-dessous les scripts utilisés. Voir la vidéo pour le déroulé. Code CSS
Code JAVASCRIPT
Et si ce tutoriel vous a plût et qu'il vous apporte de l'aide et des idées, n'hésitez pas à me faire un don, au regard du travail nécessaire pour le construire, le réaliser, le mettre en ligne, le commenter, etc ! Edité par Larsene - 29 Mai 2016 à 21:16 |
||
Larsene
Admin Group Depuis le: 05 Mar 2012 Pays: France Status: Inactif Points: 5388 |
Options des messages
Thanks(0)
|
|
ça y est tuto vidéo chargé !
|
||
brolysan
Admin Group Depuis le: 14 Août 2009 Pays: France Status: Inactif Points: 10144 |
Options des messages
Thanks(0)
|
|
les scripts ont disparus?
edit : non, Chrome qui a "buggé" tu penses qu'il y a moyen de bidouillé ton tuto pour le rendre un brin responsive? Le menu par exemple et les blocs de texte/image?
Edité par brolysan - 01 Dec 2014 à 10:15 |
||
Larsene
Admin Group Depuis le: 05 Mar 2012 Pays: France Status: Inactif Points: 5388 |
Options des messages
Thanks(0)
|
|
Bien sûr, le rendre responsive est assez simple via du jQuery.... Mais dépasse le cadre que je voulais donner à ce tuto.
On a déjà une partie haute qui est presque responsive. Pour le rendre complètement responsive : 1 - ajuster le menu pour le rendre en déroulant passé une certaine taille écran 2 - ajuster le contenu bas sur plusieurs colonnes et modifier celles-ci en fonction de la largeur ecran (côte à côte au dela d'une certaine largeur, en dessous l'une de l'autre en dessous) Je trouve que le livre blanc responsive de Miratech est assez bon à ce sujet : http://miratech.fr/v5bis/wp-content/themes/miratech/blog/Responsive-design-miratech.pdf Edité par Larsene - 01 Dec 2014 à 10:31 |
||
Larsene
Admin Group Depuis le: 05 Mar 2012 Pays: France Status: Inactif Points: 5388 |
Options des messages
Thanks(1)
|
|
Un menu responsive, prochain tutoriel alors !
|
||
brolysan
Admin Group Depuis le: 14 Août 2009 Pays: France Status: Inactif Points: 10144 |
Options des messages
Thanks(0)
|
|
tu vois, en te poussant un peu !!!
|
||
brolysan
Admin Group Depuis le: 14 Août 2009 Pays: France Status: Inactif Points: 10144 |
Options des messages
Thanks(0)
|
|
Cadeau pour te motiver
|
||
Larsene
Admin Group Depuis le: 05 Mar 2012 Pays: France Status: Inactif Points: 5388 |
Options des messages
Thanks(1)
|
|
Merci ! Bon va falloir que je me remette au travail alors ....
Bon en tout cas, j'espère que ça va bien aider les gens à se lancer à utiliser Open Element ! Je trouve que voir faire en vidéo, ça aide pas mal ... |
||
brolysan
Admin Group Depuis le: 14 Août 2009 Pays: France Status: Inactif Points: 10144 |
Options des messages
Thanks(0)
|
|
je vais aussi améliorer mon tuto pour les mobiles tiens...
|
||
Larsene
Admin Group Depuis le: 05 Mar 2012 Pays: France Status: Inactif Points: 5388 |
Options des messages
Thanks(0)
|
|
Un petit édit, spécial brosylan
Oui, j'aborde bien comment scroller spécifiquement vers un élément selon son ID. C'est plus précisément cette partie du code ....
On peut adapter pour scroller spécifiquement vers une position définie :
Rha, là, là, m^me avec la grippe je fait un petit tuto d'entraînement sur OE.... Edité par Larsene - 05 Dec 2014 à 18:17 |
||
Répondre | Page 123 8> |
Tweet
|
Aller au Forum | Permissions du forum Vous ne pouvez pas écrire un nouveau Sujet Vous ne pouvez pas répondre aux Sujets Vous ne pouvez pas effacer vos messages Vous ne pouvez pas éditer vos messages Vous ne pouvez pas créer des sondages Vous ne pouvez pas voter dans les sondages |