Parallaxe tutoriels et des exemples: Scrolling pages Web avec une différence

Ceux qui veulent construire un site Web que vous voulez vous démarquer des autres, utilise le défilement parallaxe. le défilement parallaxe est basé sur le principe de parallaxe de mouvement. Si un objet se déplace dans une direction à une certaine vitesse, se déplace en même temps un second objet à une vitesse différente dans l'autre sens. mis en œuvre sur les sites Web, cela signifie que les graphiques changent lors du défilement sur le site Web de sa position - mais pas dans le sens prévisible vers le haut, ni dans la vitesse de défilement.

Parallaxe tutoriels et des exemples: Scrolling pages Web avec une différence

déplacer les sections individuelles d'une page web à une vitesse différente, le lecteur une impression de profondeur est créé, semblable à tout en regardant la fenêtre pendant la conduite. Ici, les objets proches semblent aller plus vite que les objets éloignés. Dans la conception web de cet effet est appelé défilement parallaxe.

Parallaxe Tutoriels: Les sites Scrolling défilement meilleur

Pionnier dans l'introduction du défilements Parallax sur les sites Web est le fabricant d'articles de sport américain Nike, qui a mis sur le site de Nike Better World 2011 sur le défilement parallaxe.

l'utilisation de l'élément de conception grâce à l'utilisation de HTML 5 et CSS 3, de nouvelles possibilités dans la création de sites Parallax Scrolling proposés a été favorisée. Voulez-vous vous créer des pages scrolling parallaxe, jeter un coup d'œil sur les tutoriels suivants:

  • journal PHP: Dans le journal de PHP, vous trouverez une des instructions détaillées et illustrées pour créer des effets de défilement parallaxe. Dans ce cas, à l'exception Cadre jQuery accessible a pas d'autres aides.
  • Tympanus: Ce tutoriel Parallax Scrolling explique comment peut être assemblé à l'aide d'un diaporama CSS3 y compris des éléments de parallaxe.
  • Egstudio: les nouveaux arrivants à la question de parallaxe devraient jeter un oeil à ce tutoriel à Egstudio. Ici aussi, en collaboration avec jQuery.
  • Ihatetomates: Dans le blog par Petr Tichy vous pouvez trouver quelques exemples de fichiers à télécharger et vous pouvez regarder son travail dans une démo. Toutes les étapes de création d'un site Parallax sont expliqués en détail ici.
parallaxe-scrolling tutorielconstruire leurs propres pages Parallax Scrolling &# 8211; avec des tutoriels sans problème (Source: ihatetomates.net)

Des exemples impressionnants pour Parallax Scrolling

Incitation à développer votre propre page Web défilement parallaxe, vous trouverez dans les exemples suivants:

  • Ala: Le studio de design suisse utilise le défilement parallaxe pour la présentation de ses projets
  • Ben La Garde du corps: Cet exemple de Parallax Scrolling vous conduit dans la parcelle pour l'application iOS
  • Mode dans les temps de navigateur présenté différemment: Manufacturedessai
  • Comme la parallaxe de mouvement peut présenter dans le navigateur est impressionnant, vous pouvez voir à iutopi
  • le trafic rickshaw dans le navigateur: Parallax permet
  • Dangerosoffracking montre non seulement comment le défilement parallaxe peut améliorer un site Web visuellement, mais souligne également les dangers de Frackings
ituopi-capture d'écranUn exemple de Parallax Scrolling (Source: iutopi.com)

 

avez-vous "Parallaxe tutoriels et des exemples: Scrolling pages Web avec une différence" tombé de Martin Maciej?Ecrivez-nous dans les commentaires ou partager l'article.Nous attendons avec impatience votre opinion - et bien sûr, vous devez nous comme sur Facebook,twitter ou Google+.

14.11.2017

Posted In: logiciel

map