• A la une
  • Catégories
  • Dossiers
  • Rédacteurs
  • +

7 ressources Javascript pour créer un site full-page ou parallax

par Benjamin SANCHEZle 03/10/2013

Aujourd'hui sur le Blog du Webdesign, découvrez 7 ressources javascript et jQuery pour créer des sites fullpage ou parallax.

Une des grosses difficultés à gérer sur les sites de type full page, ou en construction au scroll est que tous les utilisateurs n'ont pas tous la même résolution d'écran. Comment, dans ces conditions-là, faire en sorte que les sections de pages ressemblent toutes exactement à la maquette, fournis dans une seule taille, évidemment ? En utilisant les bonnes ressources pardi !

Pour vous simplifier la tâche sur votre prochain projet de ce type, le Blog du Webdesign a déniché pour vous 7 ressources vous permettant de faire divers types de sites full-page ou parallax.

Parallax.js

Parallax.js, comme son nom ne l'indique pas, n'est pas spécialisé dans le parallax mais dans la création de navigation entre "écrans" de taille définis.

One Page Scroll

Cette ressource javascript vous permettra de mettre en place un effet comparable à celui du site de l'iPhone 5S.

Fullpage.js

Fullpage.js vous offre les mêmes possibilités que OnePageScroll, mais permet en plus de se déplacer horizontalement ou verticalement

Parallax.js

Cette lib javascript vous aidera à faire des sites parallax comme on a l'habitude d'en croiser depuis deux ans très simplement. Il suffit de choisir ses images de background et son contenu, et la ressource s'occupe de tout !

 

Parallax.js (non, ce n'est pas une erreur ^^)

Parallax.js (encore un, qu'ils sont inventifs ses dev, pour trouver des noms) est une lib permettant de faire un effet parallax qui réagit aux fonctions gyroscopiques de votre appareil. Penchez votre ipad, et admirez le résultat!

Cool Kitten

Kool Kitten est un framework simplifiant la création de sites parallax.

Skrollr

Scrollr est une library vous permettant de faire des sites se construisant au scroll. Un peu délicat à prendre en main, mais le résultat est vraiment intéressant.

  • Partager l'article en 1 clic !

    N'hésitez pas à aider le BlogDuWebdesign
Avatar_thumbAuteur : Benjamin voir son blog

Développeur autodidacte depuis quelques années, déjà, je suis le développeur du blog du webdesign, où mon rôle est de concretiser les différentes idées et maquettes.

Devenez membre !

Rejoignez la communauté des créatifs du web !
- Partagez vos créations
- Gagnez en visibilité
- Créez votre blog facilement
> En savoir plus

Créer mon compte

4Commentaires

  • Avatar_thumb
    Gil

    le 13/06/2014 | #1

    WOW !!!

    Merci pour cette compilation de bonne adresse !
    J'ai tous ce qu'il me faut pour commencer mon site perso... et meme plus !

  • Avatar_thumb
    Sylvain

    le 22/10/2014 | #2

    Bonjour, et merci pour ces ressources (et tant d'autres).
    J'ai une question concernant parallaxjs, le 1er de votre liste . J'aime beaucoup ce truc, néanmoins un détail me chiffonne : l'impossibilité de naviguer avec le scroll de la souris. On peut naviguer via les fleches du clavier grace à une configuration dans le script qui assigne les liens aux touches du clavier.
    ma question est, peut on associer ces lien aux défilements (haut et bas) de la souris ?
    Merci.

  • Avatar_thumb
    Benjamin SANCHEZ

    le 23/10/2014 | #3

    @sylvain Oui, il serait possible de faire un changement de page au scroll, mais le soucis se pose au niveau des pages gauches/droites. Toutes les souris ne permettent pas le scroll horizontal, et il reste assez peu ergonomique je trouve.

  • Avatar_thumb
    Sylvain

    le 24/10/2014 | #4

    Merci Benjamin pour ta réponse :)
    Je suis tout à fait d'accord avec ta remarque, néanmoins, j'aimerais pouvoir configurer le scroll à la souris (haut et bas uniquement, et laisser les flèches pour gauche/droite).

    Si je reprends ce bout de script :
    topKey = function(){
    parallax[page].top();

    Saurais tu me dire par quoi remplacer topKey pour définir le scroll molette vers le haut ? (idem pour le bas)

    Mes recherches google n'ont rien donné (faut dire aussi que je m’énerve vite quand google ne répond pas du tac au tac !)

    Le top serait une page web qui regroupe toutes les touches du clavier et de la souris...mais la j'abuse peut-être de ta gentillesse :D

Ecrire un commentaire

captcha

Ouvrir