BullGuard Antivirus Sale - 60% Off with openElement !
Accueil Forum Accueil Forum >

openElement

> Scripts pour votre site
  Nouveaux messages Nouveaux messages Fil RSS  - [Tuto] Volet d'accueil, fluidité et abeilles
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

[Tuto] Volet d'accueil, fluidité et abeilles

 Répondre Répondre Page  123 8>
Auteur
Message
Larsene allez vers le bas
Admin Group
Admin Group


Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5388
Options des messages Options des messages   Thanks (2) Thanks(2)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Sujet: [Tuto] Volet d'accueil, fluidité et abeilles
    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
.hand{
cursor:pointer;
}

.titre {
  font-size: 15vw !important;
text-shadow: 0px 0px 3px #000;
}

.soustitre {
  font-size: 3vw !important;
text-shadow: 0px 0px 1px #000;
}

.panneaumenu{
-moz-box-shadow: 0px 02px 2px 0px rgba(255, 192, 0, 0.5);
-webkit-box-shadow: 0px 02px 2px 0px rgba(255, 192, 0, 0.5);
-o-box-shadow: 0px 02px 2px 0px rgba(255, 192, 0, 0.5);
box-shadow: 0px 02px 2px 0px rgba(255, 192, 0, 0.5);
z-index:100000 !important;
}



Code JAVASCRIPT
function larsene() {
 
  var hauteur = $(window).height();
  var largeur = $(window).width();
 
/*redimensionnement panneau élément photo*/
    $("#panneauhaut").css({width:largeur,height:(hauteur-40),top:'0px',left:'0px','z-index':'0','position':'absolute'});
 
/*redimensionnement corps de page*/
  var top = hauteur-40;
    $("#corpspage").css({top:(top+40)+'px',left:'0px'});
 
    /* div ancre ancre*/
    $("#ancre").css({top:top+'px',left:'0px'});
 
  /*placement menu*/
   $("#menu").css({width:largeur,top:top+'px',left:'0px'});

  /*dimensionnement de xBody*/
  var hauteurXBody = $("#corpspage").height();
  if (hauteurXBody<(2*hauteur)){
    $("#XBody").css({height:(2*hauteur)+'px'});
  }
 
  /*repositionnement correct du menu*/
        var scroll = $(window).scrollTop();
        var positioninitiale=$("#ancre").position().top - scroll;

        if (positioninitiale<0){
         $("#menu").css({position: "fixed", top: 0});
        }
       
        if (positioninitiale>0){
          $("#menu").css({position: "relative",top :positioninitiale+scroll});
       
        }
 
}

$(document).ready(function() {
        larsene();

      $(document).on('scroll', function(){
        var scroll = $(window).scrollTop();
        var positioninitiale=$("#ancre").position().top - scroll;

        if (positioninitiale<0){
         $("#menu").css({position: "fixed", top: 0});
        }
       
        if (positioninitiale>0){
          $("#menu").css({position: "relative",top :positioninitiale+scroll});
       
        }
       
});   

});

/*au redimensionement*/
$(window).resize(function() {
larsene();
});

/*clic scroll vers contenu page*/
$("#bouton_page").click(function(){
      $('html, body').animate({
        scrollTop: $("#corpspage").offset().top
    }, 1000);
});

/*clic vers top*/
$("#bouton_top").click(function(){
    $('html, body').animate({
        scrollTop: 0
    });
});


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 !
Faire un don



Edité par Larsene - 29 Mai 2016 à 21:16
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group


Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5388
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 30 Nov 2014 à 22:19
ça y est tuto vidéo chargé !
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 01 Dec 2014 à 10:13
les scripts ont disparus?

edit : non, Chrome qui a "buggé" Big smile

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
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group


Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5388
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 01 Dec 2014 à 10:30
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
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group


Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5388
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 01 Dec 2014 à 10:32
Un menu responsive, prochain tutoriel alors !
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 01 Dec 2014 à 11:05
tu vois, en te poussant un peu !!! Big smile
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 01 Dec 2014 à 11:12
Cadeau pour te motiver Wink
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group


Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5388
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 01 Dec 2014 à 21:13
Merci Big smile ! 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 ...
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 02 Dec 2014 à 09:05
je vais aussi améliorer mon tuto pour les mobiles tiens...Wink
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group


Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5388
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 05 Dec 2014 à 18:13
Un petit édit, spécial brosylan Wink

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 ....
/*clic scroll vers contenu page*/
$("#bouton_page").click(function(){
      $('html, body').animate({
        scrollTop: $("#corpspage").offset().top
    }, 1000);
});


On peut adapter pour scroller spécifiquement vers une position définie :

/*clic scroll vers contenu page*/
$("#bouton_page").click(function(){
      $('html, body').animate({
        scrollTop: 850
    }, 1000);
});


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
Haut de la page
 Répondre Répondre Page  123 8>
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

Cette page a été affichée en 0.076 secondes.