{"id":3246,"date":"2015-03-02T13:07:46","date_gmt":"2015-03-02T15:07:46","guid":{"rendered":"https:\/\/www.kadunew.com\/blog\/?p=3246"},"modified":"2015-03-02T13:07:46","modified_gmt":"2015-03-02T15:07:46","slug":"criando-efeito-parallax-com-jquery-simples-rapido-e-facil","status":"publish","type":"post","link":"https:\/\/www.kadunew.com\/blog\/jquery\/criando-efeito-parallax-com-jquery-simples-rapido-e-facil","title":{"rendered":"Criando efeito Parallax com jQuery – simples, r\u00e1pido e f\u00e1cil"},"content":{"rendered":"

PagePiling.js<\/a> \u00e9 um plugin para jQuery que facilita muito o processo para criar efeitos Parallax. O plugin da suporte a navegadores antigos e tamb\u00e9m a celulares e tablets. Como qualquer outro plugin sua instala\u00e7\u00e3o e personaliza\u00e7\u00e3o \u00e9 f\u00e1cil e r\u00e1pida.<\/p>\n

Ao contr\u00e1rio de outras alternativas semelhantes, achei o pagePilling<\/em> com um resultado final de \u00f3tima qualidade e ainda a possibilidade de personalizar o plugin de forma bem simples. Sua utiliza\u00e7\u00e3o tem um processo bem comum, s\u00f3 precisa usar o elemento div<\/em> para criar as se\u00e7\u00f5es de sua p\u00e1gina, depois o plugin faz o trabalho para voc\u00ea criando aquela bela rolagem suave do parallax.<\/p>\n

Compatibilidade<\/h2>\n

Seus criadores pensaram em projetar o plugin para funcionar em dispositivos de toque, como telefones celulares e tablets. PagePiling.js \u00e9 totalmente compat\u00edvel com todos navegadores modernos. Funciona tamb\u00e9m em alguns navegadores antigos, como o Internet Explorer 8 e 9, Opera 12, etc. Ele funciona com os navegadores sem suporte a CSS3 tamb\u00e9m.<\/p>\n

Criando o efeito Parallax com pagePiling.js<\/h2>\n

Como qualquer outro plugin, voc\u00ea precisa incluir o aquivo jquery.pagepiling.js (ou o arquivo compactado jquery.pagepiling.min.js) e o arquivo de estilos jquery.pagepiling.css na sua p\u00e1gina HTML.
\nNo head da sua p\u00e1gina inclua as chamadas do jQuery e do CSS do plugin:<\/p>\n

\r\n<head>\r\n  <link rel="stylesheet" type="text\/css" href="jquery.pagepiling.css" \/>\r\n  <script src="http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.1\/jquery.min.js"><\/script>\r\n<\/head>\r\n<\/pre>\n
A chamada do plugin pagePiling.js recomendamo que seja feita no final do seu documento, antes do fechamento do elemento body, assim:<\/p>\n
\r\n<script type="text\/javascript" src="jquery.pagepiling.js"><\/script>\r\n<\/body>\r\n<\/pre>\n
Cada se\u00e7\u00e3o da sua p\u00e1gina ser\u00e1 definida por um elemento div com a classe section. Por padr\u00e3o a se\u00e7\u00e3o ativa \u00e9 a primeira, que \u00e9 sua homepage. Abaixo exemplo da estrutura b\u00e1sica do seu HTML<\/p>\n
\r\n<div id="pagepiling">\r\n    <div class="section">Some section<\/div>\r\n    <div class="section">Some section<\/div>\r\n    <div class="section">Some section<\/div>\r\n    <div class="section">Some section<\/div>\r\n<\/div>\r\n<\/pre>\n
Inicializando seu plugin<\/h2>\n
\r\n$(document).ready(function() {\r\n    $('#pagepiling').pagepiling();\r\n});\r\n<\/pre>\n
Personalizando o plugin<\/h2>\n
Voc\u00ea pode inicializar o plugin a alterar o comportamento do efeito, por exemplo: dire\u00e7\u00e3o do efeito, velocidade entre muitos outros. Abaixo um exemplo.<\/p>\n
\r\n$(document).ready(function() {\r\n    $('#pagepiling').pagepiling({\r\n        menu: null,\r\n        direction: 'vertical',\r\n        verticalCentered: true,\r\n        scrollingSpeed: 700,\r\n        easing: 'swing',\r\n        loopBottom: false,\r\n        loopTop: false,\r\n        css3: true,\r\n        normalScrollElementTouchThreshold: 5,\r\n        touchSensitivity: 5,\r\n        keyboardScrolling: true,\r\n        sectionSelector: '.section',\r\n        animateAnchor: false,\r\n    });\r\n});\r\n<\/pre>\n
\nToda documenta\u00e7\u00e3o do plugin \u00e9 encontrada em:
\nhttps:\/\/github.com\/alvarotrigo\/pagePiling.js#pagepilingjs<\/a>\n<\/div>\n
Siga-me no Twitter: @kadunew<\/a> ou assine nosso Feed<\/a> e fique por dentro de todas atualiza\u00e7\u00f5es aqui do blog.<\/p>\n","protected":false},"excerpt":{"rendered":"
PagePiling.js \u00e9 um plugin para jQuery que facilita muito o processo para criar efeitos Parallax. O plugin da suporte a navegadores antigos e tamb\u00e9m a celulares e tablets. Como qualquer outro plugin sua instala\u00e7\u00e3o e personaliza\u00e7\u00e3o \u00e9 f\u00e1cil e r\u00e1pida. Ao contr\u00e1rio de outras alternativas semelhantes, achei o pagePilling com um resultado final de \u00f3tima […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-3246","post","type-post","status-publish","format-standard","hentry","category-jquery"],"yoast_head":"\nCriando efeito Parallax com jQuery - simples, r\u00e1pido e f\u00e1cil<\/title>\n<meta name=\"description\" content=\"Crie rapidamente o efeito Paralaxx em suas p\u00e1ginas. pagePiling \u00e9 um plugin para jQuery que permite criar e personalizar efeitos de rolagem em suas p\u00e1ginas.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.kadunew.com\/blog\/jquery\/criando-efeito-parallax-com-jquery-simples-rapido-e-facil\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Criando efeito Parallax com jQuery - simples, r\u00e1pido e f\u00e1cil\" \/>\n<meta property=\"og:description\" content=\"Crie rapidamente o efeito Paralaxx em suas p\u00e1ginas. pagePiling \u00e9 um plugin para jQuery que permite criar e personalizar efeitos de rolagem em suas p\u00e1ginas.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.kadunew.com\/blog\/jquery\/criando-efeito-parallax-com-jquery-simples-rapido-e-facil\" \/>\n<meta property=\"og:site_name\" content=\"KADUNEW\" \/>\n<meta property=\"article:published_time\" content=\"2015-03-02T15:07:46+00:00\" \/>\n<meta name=\"author\" content=\"Kadu Oliveira\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kadu Oliveira\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/jquery\/criando-efeito-parallax-com-jquery-simples-rapido-e-facil\",\"url\":\"https:\/\/www.kadunew.com\/blog\/jquery\/criando-efeito-parallax-com-jquery-simples-rapido-e-facil\",\"name\":\"Criando efeito Parallax com jQuery - simples, r\u00e1pido e f\u00e1cil\",\"isPartOf\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/#website\"},\"datePublished\":\"2015-03-02T15:07:46+00:00\",\"dateModified\":\"2015-03-02T15:07:46+00:00\",\"author\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05\"},\"description\":\"Crie rapidamente o efeito Paralaxx em suas p\u00e1ginas. pagePiling \u00e9 um plugin para jQuery que permite criar e personalizar efeitos de rolagem em suas p\u00e1ginas.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/jquery\/criando-efeito-parallax-com-jquery-simples-rapido-e-facil#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.kadunew.com\/blog\/jquery\/criando-efeito-parallax-com-jquery-simples-rapido-e-facil\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/jquery\/criando-efeito-parallax-com-jquery-simples-rapido-e-facil#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.kadunew.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JS\/jQuery\",\"item\":\"https:\/\/www.kadunew.com\/blog\/category\/jquery\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Criando efeito Parallax com jQuery – simples, r\u00e1pido e f\u00e1cil\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#website\",\"url\":\"https:\/\/www.kadunew.com\/blog\/\",\"name\":\"KADUNEW\",\"description\":\"Artigos sobre Front-End e Programa\u00e7\u00e3o web\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.kadunew.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05\",\"name\":\"Kadu Oliveira\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g\",\"caption\":\"Kadu Oliveira\"},\"sameAs\":[\"https:\/\/www.kadunew.com\/blog\"],\"url\":\"https:\/\/www.kadunew.com\/blog\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Criando efeito Parallax com jQuery - simples, r\u00e1pido e f\u00e1cil","description":"Crie rapidamente o efeito Paralaxx em suas p\u00e1ginas. pagePiling \u00e9 um plugin para jQuery que permite criar e personalizar efeitos de rolagem em suas p\u00e1ginas.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.kadunew.com\/blog\/jquery\/criando-efeito-parallax-com-jquery-simples-rapido-e-facil","og_locale":"pt_BR","og_type":"article","og_title":"Criando efeito Parallax com jQuery - simples, r\u00e1pido e f\u00e1cil","og_description":"Crie rapidamente o efeito Paralaxx em suas p\u00e1ginas. pagePiling \u00e9 um plugin para jQuery que permite criar e personalizar efeitos de rolagem em suas p\u00e1ginas.","og_url":"https:\/\/www.kadunew.com\/blog\/jquery\/criando-efeito-parallax-com-jquery-simples-rapido-e-facil","og_site_name":"KADUNEW","article_published_time":"2015-03-02T15:07:46+00:00","author":"Kadu Oliveira","twitter_misc":{"Escrito por":"Kadu Oliveira","Est. tempo de leitura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.kadunew.com\/blog\/jquery\/criando-efeito-parallax-com-jquery-simples-rapido-e-facil","url":"https:\/\/www.kadunew.com\/blog\/jquery\/criando-efeito-parallax-com-jquery-simples-rapido-e-facil","name":"Criando efeito Parallax com jQuery - simples, r\u00e1pido e f\u00e1cil","isPartOf":{"@id":"https:\/\/www.kadunew.com\/blog\/#website"},"datePublished":"2015-03-02T15:07:46+00:00","dateModified":"2015-03-02T15:07:46+00:00","author":{"@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05"},"description":"Crie rapidamente o efeito Paralaxx em suas p\u00e1ginas. pagePiling \u00e9 um plugin para jQuery que permite criar e personalizar efeitos de rolagem em suas p\u00e1ginas.","breadcrumb":{"@id":"https:\/\/www.kadunew.com\/blog\/jquery\/criando-efeito-parallax-com-jquery-simples-rapido-e-facil#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.kadunew.com\/blog\/jquery\/criando-efeito-parallax-com-jquery-simples-rapido-e-facil"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.kadunew.com\/blog\/jquery\/criando-efeito-parallax-com-jquery-simples-rapido-e-facil#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.kadunew.com\/blog"},{"@type":"ListItem","position":2,"name":"JS\/jQuery","item":"https:\/\/www.kadunew.com\/blog\/category\/jquery"},{"@type":"ListItem","position":3,"name":"Criando efeito Parallax com jQuery – simples, r\u00e1pido e f\u00e1cil"}]},{"@type":"WebSite","@id":"https:\/\/www.kadunew.com\/blog\/#website","url":"https:\/\/www.kadunew.com\/blog\/","name":"KADUNEW","description":"Artigos sobre Front-End e Programa\u00e7\u00e3o web","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.kadunew.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05","name":"Kadu Oliveira","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g","caption":"Kadu Oliveira"},"sameAs":["https:\/\/www.kadunew.com\/blog"],"url":"https:\/\/www.kadunew.com\/blog\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/3246"}],"collection":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/comments?post=3246"}],"version-history":[{"count":10,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/3246\/revisions"}],"predecessor-version":[{"id":3335,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/3246\/revisions\/3335"}],"wp:attachment":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/media?parent=3246"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/categories?post=3246"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/tags?post=3246"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}