Images / Graphisme

Retrouvez ici tous les meilleurs téléchargements Images / Graphisme
Ajouter un nouvel élément

    Faire defiler des images horizontalement

    Licence : Autre - 04/10/2011 - Téléchargé 19 x
    Lancement du défilement quand la souris passe sur la zone.
    Plus la souris se rapproche des extrémités, plus la vitesse est rapide.
    Le sens de défilement change quand le curseur arrive à la moitié de l'image.
    Un clic sur la zone désactive / relance le défilement.
    Pour l'exemple, pendant les pauses, les images deviennent des liens actifs vers une popup.

    Faire defiler des images manuellement

    Licence : Autre - 04/10/2011 - Téléchargé 13 x
    Faire defiler des images manuellement

    Responsive Nav

    Éditeur : viljamis + 103ko
    Responsive Nav est un plugin JavaScript qui vous permet de rendre vos menus de navigation responsive.
    Pour cela il utilise les transitions CSS3. Il permet également de gérer le tactile et rend ainsi votre menu accessible aux smartphones et tablettes.

    Attirer l'attention sur un lien

    Licence : Autre - 04/10/2011 - Téléchargé 10 x
    Attirer l'attention sur un lien, 2 versions

    Zoom IMG

    Licence : BSD - 07/02/2017 - Téléchargé 8 x
    Une simple lib pour afficher en grand une image avec des contrôles de zoom et des raccourcis clavier !
    Pour l'utilisation:
    1. avoir une image(l'évidence même, non ?)
    <img src="mon_url_image" id="id_image">
    OU
    <img src="mon_url_mignature_image" data="mon_url_image" id="id_image">
    2. lier au clic sur l'image la fonction [b]img_zoom_open[/b] comme par exemple:
    document.querySelector('#mon_id_image').addEventListener('click',function(){img_zoom_open('mon_id_image');},false);

    RefineSlide

    Éditeur : Alex Dunphy +
    RefineSlide vous permet de créer un caroussel d'images responsive.

    En effet, ce script JavaScript utilise les transitions et les transformations CSS3 pour afficher un caroussel d'images original, attractif et personnalisé. Il utilise également un fallback JavaScript pour le fondu. Il supporte les miniatures, les légendes et possède également une API.

    Le caroussel ainsi créé propose des images responsive, qui s'adapteront à la navigation sur mobile.

    RefineSlide est supporté sur tous les navigateurs récents (IE7+).

    Remplir une liste ddslick (plugin liste avec image)

    Licence : Autre - 17/10/2013 - Téléchargé 6 x
    Sur le site http://designwithpc.com/Plugins/ddSlick, vous trouverez un plugin intéressant permettant de faire une liste avec libellé, image, description ...

    Mais comment le remplir ...
    Ici j'appelle une fonction qui me renvoie les éléments à afficher dans la liste et je rajoute un item correspondant à "aucun"

    Fondu enchainé

    Licence : Gratuit - 30/12/2010 - Téléchargé 5 x
    Suite à cette discussion, je me suis amusé à réaliser un script assez simple de fondu enchainé.

    Le fonctionnement est plutôt simple (enfin... je pense) : vous positionnez vos images les unes par-dessus les autres (dans l'exemple, en les positionnant en absolute) et vous lancez le script en passant en paramètre le nom de classe CSS des élément à enchainer.
    Ensuite, le script modifie les propriétés z-index et d'opacité pour réaliser l'effet.

    Exemple en ligne

    Comment récupérer les dimensions d'une image affichée à l'écran ?

    Licence : Autre - 04/10/2011 - Téléchargé 5 x
    Comment récupérer les dimensions d'une image affichée à l'écran ?

    Windy

    Éditeur : codrops +
    Windy permet de faire défiler rapidement des éléments. L'effet fera s'envoler les éléments comme un jeu de cartes ou des feuilles qui, pris dans un coup de vent, s'envolent. D'où le nom du plugin. Ceci est réalisé en utilisant des transformations CSS 3D et des transitions.

    Il y a plusieurs options disponibles, comme la plage de propagation des éléments, la vitesse, l'ajout de navigations personnalisées, etc.

    Pour les navigateurs qui ne supportent pas les transformations CSS 3D ou les transitions, il y a une navigation simple par défaut, c'est à dire faire apparaître/disparaître les éléments sans effet.

    jQuery Picture

    Éditeur : Abban Dunne +
    Grâce à ce plugin, jQuery très léger vous pourrez passer en douceur aux images responsive.
    En effet, ce mot est très à la mode ces derniers temps dans le développement Web. Il s'agit en fait tout simplement de pouvoir adapter vos contenus en fonction de la résolution d'écran de l'utilisateur (et donc du type d'appareil avec lequel il visite votre site).

    Pour se faire, ce plugin vous offre deux solutions qui sont actuellement à l'étude pour devenir le standard des images responsive : l'élément et la nouvelle balise récemment proposée .

    Une mise en garde cependant : ce plugin utilise des éléments qui ne sont pas encore considérés comme valide par le w3c !

    Holder.js

    Éditeur : Ivan Malopinsky +
    Grâce à ce script JavaScript, vous pourrez désormais utiliser des images de remplacement aussi bien en mode en ligne qu'en mode déconnexion !

    En effet, Holder.js permet de remplacer des images dans vos pages en se basant sur l'élément HTML 5 canvas ainsi que sur une API chaînable.
    Ces deux points permettant d'afficher et de styliser simplement vos images placeholder (images de substitution).

    jquery.snipe

    Éditeur : RayFranco +
    Ce plugin jQuery présente un agréable effet de loupe sur les images selon les mouvements de la souris. L'image de « zoom » est séparée, ce qui vous permet de créer des effets.

    Parmi les options que vous pouvez manipuler, il y a la taille de la loupe, une paramétrisation CSS, la gestion d'événements, etc.

    Instafeed.js

    Éditeur : Steven Schobert +
    Instafeed est une bibliothèque CoffeeScript qui vous permet de manière on ne peut plus simple d'intégrer des images provenant d'Instagram dans vos pages Web.

    Ce script va automatiquement chercher la et la remplir avec toutes les images Instagram tagguées "awesome". Vous pouvez bien évidemment modifier le comportement en utilisant les options standards et avancées.

    Conversion couleur RGB en hexa

    Licence : Autre - 04/10/2011 - Téléchargé 2 x
    Mozilla renvoie les couleurs d'un élément sous format "RGB(xx,yy,zz)".
    Voici une fonction qui transforme ce résultat en standard hexadécimal...

    DDSLICK passe au-dessus d'un containeur

    Licence : Autre - 19/03/2014 - Téléchargé 2 x
    Beaucoup utilise le plugin ddslick, pour avoir une liste avec des images et description.
    Malheureusement, quand on l'utilise dans une popup ou une div ou tout autre limiteur d'espace et qu'on veut la dérouler ... appaît un scroll...

    Resemble.js

    Éditeur : James Cryer +
    Resemble.js est une bibliothèque JavaScript très légère (environ 11kb) créée par James Cryer pour faire de l'analyse et de la comparaison d'images directement dans le navigateur.

    Cette librairie requiert l'API HTML5 file ainsi que l'utilisation des canvas HTML5 pour le rendu des différences.
    Grâce à Resemble.js vous pourrez soit analyser une image seule, soit comparer deux images pour trouver leurs différences.

    Alpha Image

    Éditeur : Ilker Guller + 55,5ko
    Alpha Image est un plugin jQuery qui permet de modifier simplement la couleur de vos images.

    Différentes options sont disponibles et vous pouvez choisir d'utiliser un code hexadécimal ou bien du RGB pour modifier la couleur.
    Le retour de la fonction peut également contenir les données relatives à l'image en plus de l'image elle-même.

    img_zoom

    Éditeur : Boulain Kévin +
    Une simple lib pour afficher en grand une image avec des contrôles de zoom et des raccourcis clavier !
    Pour l'utilisation:
    1. avoir une image(l'évidence même, non ?)
    [code=html][/code]
    OU
    [code=html][/code]
    2. lier au clic sur l'image la fonction [b]img_zoom_open[/b] comme par exemple
    [code=Javascript]document.querySelector('#mon_id_image').addEventListener('click',function(){img_zoom_open('mon_id_image');},false);[/code]

    Zoom IMG

    Éditeur : Boulain Kévin +
    Une simple lib pour afficher en grand une image avec des contrôles de zoom et des raccourcis clavier !
    Pour l'utilisation:
    1. avoir une image(l'évidence même, non ?)
    [code=html][/code]
    OU
    [code=html][/code]
    2. lier au clic sur l'image la fonction [b]img_zoom_open[/b] comme par exemple
    [code=Javascript]document.querySelector('#mon_id_image').addEventListener('click',function(){img_zoom_open('mon_id_image');},false);[/code]

21 éléments

Responsable bénévole de la rubrique JavaScript : Xavier Lecomte -