Batch Index du Forum
S’enregistrerRechercherFAQMembresGroupesConnexion
Répondre au sujet Page 1 sur 1
[R][HTML/CSS/JS]J'en ai d'autres :]
Auteur Message
Répondre en citant
Message [R][HTML/CSS/JS]J'en ai d'autres :] 
Bonjour ! 
aujourd'hui je vous repose des questions sur ces langages ! 
Q1 :
Comment changer le style de la scrollbar d'un textarea ?
Q2 :
Comment quand je survole un élément une animation se lance (genre agrandissement) et quand la souris se retire l'inverse de celle-ci ?
ui ui,a la base c'était pour ça que je me demandais comment lancer une anim avec du JS ^^
Q3 :
Comment pour un retour au haut de page, faire une animation de scroll ?


Voilà, merci d'avance pour vos réponses Very Happy



Dernière édition par Fluorinx le Sam 29 Oct 2016 - 21:41; édité 1 fois

______________________________________________________
Visiter le site web du posteur
Message Publicité 
PublicitéSupprimer les publicités ?


Répondre en citant
Message [R][HTML/CSS/JS]J'en ai d'autres :] 
Des questions très intéressantes cette fois-ci Mr. Green Okay

Alors je vais répondre à tes questions (et oui je suis gentil, je sais merci merci)
_________________________________________________________________________________________________
QUESTION 1 : Comment changer le style de la scrollbar d'un textarea ?

Alors là, tu as 2 possibilités qui contiennent eux-mêmes une infinité de possibilités (BOOOM lol)
Donc c'est le CSS et je JavaScript Mr. Green
p.s : c'est + simple avec JavaScript, juste 2 lignes à rajouter et c'est bon Okay

Le problème avec le CSS et bin ça va être la comptabilité entre les navigateurs



Voilà ce que tu dois modifier pour personnaliser la scrollbar de n'importe quel élément sous IE :
Code:
[lang=css]scrollbar-base-color: #C0C0C0;
scrollbar-base-color: #C0C0C0;
scrollbar-3dlight-color: #C0C0C0;
scrollbar-highlight-color: #C0C0C0;
scrollbar-track-color: #EBEBEB;
scrollbar-arrow-color: black;
scrollbar-shadow-color: #C0C0C0;
scrollbar-dark-shadow-color: #C0C0C0;


Sous Google Chrome et safari ce n'est pas si différent mais il y a quand même quelques différences :
Code:
[lang=css]::-webkit-scrollbar { width: 3px; height: 3px;}
::-webkit-scrollbar-button {  background-color: #666; }
::-webkit-scrollbar-track {  background-color: #999;}
::-webkit-scrollbar-track-piece { background-color: #ffffff;}
::-webkit-scrollbar-thumb { height: 50px; background-color: #666; border-radius: 3px;}
::-webkit-scrollbar-corner { background-color: #999;}}
::-webkit-resizer { background-color: #666;}


Je suis désolé de te le dire mais....tous les autre navigateurs y compris firefox et opera ne supporte pas la modification des styles des scrollbars Crying or Very sad
Mais ne t'inquiète pas : il y a le javascript Okay Mr. Green


Alors en javascript, il te faudra implémenter (rajouter) 1 librairie en l’occurrence Jquery et 2 petit plugin Mr. Green

Donc je te donne les meilleures plugin :


Alors NiceScroll c'est le meilleure, c'est celui que j'utilise Mr. Green
Il faut que tu mettes ceci dans entre les balises <head> et </head> :
Code:
[lang=html5]<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.6.8-fix/jquery.nicescroll.min.js"></script>

Et voici un lien qui te montre comment l'utiliser : https://github.com/inuyaksa/jquery.nicescroll
Voici un petit exemple : http://areaaperta.com/nicescroll/demo.html

Il est un peu moins bien mais il est quand même bien sinon je ne l'aurais pas mis Laughing Okay
Alors de la même manière que NiceScroll (tout entre les balises <head> et </head>) :
Code:
[lang=html5]<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" />

Je te donne le lien qui te montre comment l'utiliser : https://github.com/mzubala/jquery-custom-scrollbar
Quelques exemples : http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html


Et là je t'en ai donné que 2 ! Voici une petite liste qui pourrait t'intéressée : http://www.jqueryrain.com/2012/07/jquery-scrollbar-plugin-examples/

_________________________________________________________________________________________________



_________________________________________________________________________________________________
QUESTION 2 : Comment quand je survole un élément une animation se lance (genre agrandissement)
et quand la souris se retire l'inverse de celle-ci ? ui ui,a la base c'était pour ça que
je me demandais comment lancer une anim avec du JS ^^


Alors là faut utiliser le CSS, on pourrai le faire avec le JavaScript mais ça ne servirai rien car si c'est pour en arriver au même résultat et en + le faire avec le JavaScript a quelques inconvénients Okay Mr. Green



Il suffit de mettre une transition Laughing Laughing Mr. Green Okay (Attack on smiley)

Petit exemple :
Code:
[lang=html5]<html>
  <head>
    <style>
      #un_element {
        padding: 100px;
        background: #FF0000;
        -webkit-transition: all 2s linear;
           -moz-transition: all 2s linear;
            -ms-transition: all 2s linear;
             -o-transition: all 2s linear;
                transition: all 2s linear;
      }
      #un_element:hover {
        padding: 300px;
      }
     </style>
  </head>
  <body>
    <div id="un_element"></div>
  </body>
</html>

Voici quelques liens pour + de renseignements :
http://css.mammouthland.net/css3/animation-transition.php
https://developer.mozilla.org/fr/docs/Web/CSS/transition
https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS


_________________________________________________________________________________________________



_________________________________________________________________________________________________
QUESTION 3 : Comment pour un retour au haut de page, faire une animation de scroll ?

Alors là tu peux le faire que depuis le Javascript il me semble Okay
On va avoir besoin de Jquery (tu dois commencer à connaître je suppose Mr. Green )

Voici un petit exemple :
Code:
[lang=html5]<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script>
      $(function() {
        $('a[href*="#"]:not([href="#"])').click(function() {
          if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
            if (target.length) {
              $('html, body').animate({
                scrollTop: target.offset().top
              }, 1000);
              return false;
            }
          }
        });
      });
    </script>
  </head>
  <body>
    <div id="top"></div>
   <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
   <a href="#top">YO !!</a>
  </body>
</html>


Ou encore :

Code:
[lang=html5]<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script>
      function Scroll_animate(pos) {
        $('html, body').animate({
          scrollTop: pos
        }, 1000);
     }
    </script>
   <style>
     #link {
       color: #00F;
       text-decoration: underline;
     }
     #link:hover {
      cursor: pointer;
     }
   </style>
  </head>
  <body>
   <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
   <div id="link" onclick="Scroll_animate('500')">YO !!</div>
  </body>
</html>

_________________________________________________________________________________________________


Si tu as d'autres questions n'hésite surtout pas Okay Mr. Green




______________________________________________________
la vie est trop courte pour retirer le périphérique USB en toute sécurité...
Si la statue de la liberté lève le bras depuis 125 ans, c'est parce qu'elle cherche du réseau sur son Blackberry Torches...
Grâce à mon nouveau correcteur automatiste sur mon téléphage, je ne fais plus aucune faute d'orthodontie.
Quelqu'un a t il déjà demandé au drapeau japonais ce qu'il enregistre depuis tout ce temps ?
Visiter le site web du posteur
Répondre en citant
Message [R][HTML/CSS/JS]J'en ai d'autres :] 
Superman du HTML est toujours là ! 
Merci !




______________________________________________________
Visiter le site web du posteur
Répondre en citant
Message [R][HTML/CSS/JS]J'en ai d'autres :] 
Je t'ai fait un petit exemple Okay Mr. Green Mr. Green
ça peut peut-être te donner de l'inspiration Okay

Code source (pastebin) : http://pastebin.com/H7tFk2f6
Démonstration ici : http://batch-external-controls.site88.net/example




______________________________________________________
la vie est trop courte pour retirer le périphérique USB en toute sécurité...
Si la statue de la liberté lève le bras depuis 125 ans, c'est parce qu'elle cherche du réseau sur son Blackberry Torches...
Grâce à mon nouveau correcteur automatiste sur mon téléphage, je ne fais plus aucune faute d'orthodontie.
Quelqu'un a t il déjà demandé au drapeau japonais ce qu'il enregistre depuis tout ce temps ?
Visiter le site web du posteur
Message [R][HTML/CSS/JS]J'en ai d'autres :] 


Montrer les messages depuis:
Répondre au sujet Page 1 sur 1
  



Index | créer un forum | Forum gratuit d’entraide | Annuaire des forums gratuits | Signaler une violation | Conditions générales d'utilisation
Copyright 2008 - 2016 // Batch