Parallax - dit ... Parallax effect: voorbeelden

De bewegingsparallax een wijziging in de locatie van een object op de achtergrond ten opzichte van de waarnemer, die ter plaatse. De term aan populariteit gewonnen op het internet. In het bijzonder is het interessant om te kijken naar de plaatsen, die in het ontwerp van dynamische elementen. Parallax - een manier om pagina's op het internet die wordt gebruikt door webmasters om een groot aantal bezoekers te trekken te ontwerpen.

Wat is de parallax

Parallax scrollen verticaal en in een rechte lijn worden gebruikt. Als voorbeeld, de meest geschikte Nintendo. Velen van ons met nostalgie computerspelletjes vertegenwoordigd de beweging van de belangrijkste personages uit de linkerkant naar de rechterkant van het scherm. Het is ook mogelijk om naar beneden door een verticaal geplaatste rechte uitgevoerd. Parallax effect op het netwerk wordt vaak gebruikt. U kunt JavaScript of CSS 3 te gebruiken om een verticale schuifbalk te creëren.

Voor hen, net eigenaardige beschreef de drie-dimensionale ruimtelijk effect. De makers van spellen meerdere achtergrond lagen werden gebruikt. Ze verschillen in textuur, de beweging wordt uitgevoerd met een andere snelheid worden uitgevoerd.

Denk niet dat parallax - dit is alleen mogelijk om een 3D-effect te creëren. bestaande iconen kunnen verplaatst worden op de pagina. Zeker, het ziet er heel aantrekkelijk. Vooral de beste optie is om een individueel traject te gebruiken voor elk van hen. In dit geval is het gebruik van verschillende pictogrammen om door de verschillende paden te navigeren. Dit ontwerp trekt de aandacht.

de heropleving van de foto

Het is moeilijk om een site zonder afbeeldingen te vinden. Kwalitatief gemaakt en indicatieve cijfers trekken bezoekers. Maar de meeste aandacht oorzaak allerlei dynamisch beeld van. Sterker nog, als de waargenomen beweging, trekt de aandacht bij een bezoek aan de site. Aanzienlijk verhoogt de kans op terugkerende bezoeker van de bron om een dynamisch beeld. En het leek niet verplaatsen of? Daarom, om bezoekers naar de site te trekken moet zoiets als de parallax effect bestudeerd worden.

Voorbeelden van websites met bewegende beelden:

• hvorostovsky.com;
• www.kagisointeractive.com.

Zoals getoond in de voorbeelden, de perceptie verbetert bij het pulldown menu-item. Een dergelijk element bespaart tijd bezoekers zo aantrekkelijk voor hen.

jQuery bibliotheek

Term jQueryParallax bepalen de gelijknamige bibliotheek. Dankzij het gemakkelijk is om het effect in 3D-beweging te bereiken. JQuery bibliotheek van drie-dimensionale waarneming op verschillende wijzen gemaakt. Een van hen is horizontaal tijdens het verplaatsen achtergrond objecten op verschillende snelheden. Voor deze bibliotheek hebben de neiging om het grote aantal verschillende soorten woningen. En de hier beschreven verplaatsing vertegenwoordigt slechts een klein deel van de mogelijkheden.

Het ziet er heel aantrekkelijk site, die is het creëren van een verscheidenheid aan moderne elementen zijn gebruikt. Een van hen - de parallax. Voorbeelden van sites kunnen er als volgt uitzien:

• www.grabandgo.pt;
• www.fishy.com.br;
• www.noleath.com;
• buysellwebsite.com.

jParallax gepresenteerd lagen, de muis wordt verplaatst. Voor de dynamische eigenschap van de absolute positioneerelementen (positie: absoluut;). Elk van hen wordt gekenmerkt door zijn grootte en beweging aan het individu rate. Dit kan een tekst of een afbeelding (optioneel resource makers) zijn.

De beleving van de bezoeker van de website

Na dat, mensen meestal betalen aandacht op het feit dat de pagina wordt omlijst hoge kwaliteit, handig en vakkundig. Dit feit is meestal een kwestie van respect. Soms nieuwsgierigheid naar de ervaring van de andere elementen ontstaan. Op het internet is er een groot aantal identieke sites. Hoe je je leven speciaal te maken?

Als het ontwerp dat u wilt, dan zal de bezoeker voor een langere periode blijven. Zo is de kans vergroot dat het zal aantrekken Uploaded Informatie, toont hij belangstelling. Op het einde, zullen de mensen gebruik maken van de aangeboden diensten, producten of promotionele aanbiedingen te nemen.

Favoriete oude games

Het begrip "parallax" zou aan alle fans van de consoles 80-90s zijn. Dit geldt voor spelletjes:

1. Mario Bros.
2. Mortal Kombat.
3. Streets of Rage.
4. Moon Patrol.
5. Turtles in Time.

Dat wil zeggen dat de parallax - een techniek die een voldoende lange periode wordt gebruikt. Deze spellen zijn echt herinneren met enige nostalgie. Immers, als ze doordrongen van het karakter van de periode.

Afbeeldingen op het scherm worden geproduceerd door technieken zoals parallax scrollen. Er is niets verrassends in het feit dat deze methode een welverdiende populariteit gewonnen. Dit ontwerp concept is warm genoeg is waargenomen door mensen die in de 80-90 jaren gespeeld en keek vrije tijd vrienden.

Parallax Scrolling

Marketeers van toonaangevende merken hebben lang gebruikt allerlei technologische ontwikkelingen. Zo is het mogelijk om zelfs de toevallige bezoeker website interesseren.

Parallax scrolling al behoorlijk succesvol gebruikt in Nike's. De ontwikkeling van de oorspronkelijke site van het bedrijf betrokken ontwerpers Weiden en Kennedy. Echter, dit ontwerp niet behouden. Bron geleidelijk aangepast aan de moderne trends. Activatedrinks.com - voorbeeld van een site waarvan het ontwerp doet denken aan decoratie gebruikt door marketeers Nike bepaalde periode.

Luidsprekers moet niet veel worden

Vergeet niet dat het ontwerp van de site is vaak een belangrijk criterium dat de bezoekers gidsen. Slecht maakte het leven de indruk zijn van onachtzaamheid van de eigenaar van het bedrijf verlaat meestal de gebruiker. En hier is een site met allerlei aantrekkelijke design elementen suggereert een poging om eigenaars organisatie geïnteresseerde bezoekers.

Het is de moeite waard om de parallax onthouden. Het is een prachtig hulpmiddel. Maar ook hebben ze niet veel nodig om mee te doen. Omdat de pagina waar er een groot aantal verschillende soorten mobiele elementen, is vrij ingewikkeld om te begrijpen. Het beste is om een afstand tot de beste van de stijlvolle en intuïtief te maken.

Dynamic moeten afzonderlijke elementen die isolatie nodig zijn. Ook kan het onderhavige tekening, die is gemaakt met moving opzichte van de andere lagen. Vergeet niet dat de gebruiker website in de eerste plaats wordt gemaakt voor bezoekers. Het moet niet een webmaster meesterwerk, zet al zijn kennis. Immers, een dergelijke aanpak alleen maar ingewikkelder waarneming.

Hoe maak je een beweging online creëren

Hoe maak je een parallax te maken? Deze kwestie is zeer geïnteresseerd in de vele website makers. Niet nodig om de fijne kneepjes van het schrijven labels kennen. Het is erg handig om speciale middelen te gebruiken op het internet. Van het grote aantal bestaande voorstellen zijn de volgende dochterondernemingen:

1. Plax - programma, dat is vrij eenvoudig te gebruiken. Ze hebben de neiging om de mobiliteit van de pagina geven door het bewegen van de muis.
2. jQuery Parallax Afbeelding Slider - jQuery plugin gebruikt om de afbeelding sliders te creëren.
3. JQuery Afbeelding Parallax - geschikt voor decoratie van transparante afbeeldingen. Dankzij het gebruik van PNG, GIF verwerven diepte, levendige beweging.
4. Curtain.js gebruikt om de pagina, uitgerust met een vast panel. In dit geval is er het gevolg van het openen van de gordijnen.
5. Scrollen Parallax: Een jQuery plugin is om een parallax effect maken wanneer u het muiswiel te scrollen.

Slechts een paar handige plugins

Zoals bekend, de meest waardevolle is de informatie. En hoe groter het aantal manieren om de gewenste bekend is, hoe dichter de kans op het verkrijgen van een correct resultaat te bereiken. Handige plug-ins gebruikt om de dynamiek van te maken:

1. jQuery Scroll Path - wordt gebruikt om objecten op het opgegeven pad te plaatsen.
2. Scrollorama - jQuery-plugin. Het wordt gebruikt als een instrument voor aantrekkelijke presentatie materiaal. Het maakt het mogelijk eenvoudig scrollen te wijten aan "herleven" de tekst op de pagina.
3. Scrolldeck - jQuery-plugin. Het is een geweldige oplossing voor gebruik als een presentatie voor de site, ontworpen als een enkele pagina.
4. jParallax beweegt lagen afhankelijk van de beweging van de muis.
5. Stellar.js - plug waarbij elk element is voorzien van de toevoeging van parallax effect scrollen.

Parallax met betrekking tot de cursor

Het volstaat effectief ziet er een parallax. Nog steeds op de eerste pagina van een site voorwerpen worden verplaatst bij de nadering van de muisaanwijzer. Het komt tot leven en volgt het beweegbare element.

De eerste stop moet het cijfer zijn. Het gewenste beeld wordt geplaatst in het frame, met de randen die u wilt verbergen. De methode is zeer eenvoudig, en het aldus verkregen patroon ziet er heel aantrekkelijk.

Parallax effect voor een site - het is een prachtige manier om te ontwerpen. Het gebruik ervan suggereert dat de oprichting van een resource voldoende aandacht wordt gegeven. Daarom is het noodzakelijk om aandacht te besteden aan de aangeboden diensten of informatie te lezen. Deze sites kijken meer voordeel tegen de achtergrond van identieke, maar eenvoudig ingericht middelen.