Crie uma parallax page usando imagens de Star Wars

by leonardo. Dec 18, 2016 21:09.

crie uma parallax page usando imagens de star wars | gaunte - agência de marketing

Na espera do próximo filme "Star Wars: Rogue One" a equipe Gauntē decidiu fazer um post temático Star Wars, explicando como fazer uma scroll page usando Parallax e wallpapers do filme Star Wars. Um lindo tema preenchido com Tie Fighters, X-Wings, ATT Walkers, e a Estrela da Morte como pano de fundo.

Parallax é um efeito de transição entre seções de uma página ou scrolling, que cria um efeito de profundidade e 3 dimensões uma vez que os elementos movem em velocidade e em alguns casos direções diferentes, melhorando assim a experiência do usuário (UX). Embora a parallax seja intrigante é importante não o usar com excesso #ficaadica

Abaixo estao HTML, CSS, e JavaScript necessários.

1 — star_wars.html

2 — star_wars.js

3 — star_wars.css

html {
    width: 100%;
    overflow-x: hidden;
}
body {
    width: 100%;
}
p {
    margin: 0 0 20px 0;...

Faça o download do código css completo aqui.

4 — Inclua as bibliotecas necessárias conforme abaixo.

<!--  header -->
<link href="star_wars.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<!--  end header -->
<!--  footer -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://temp.gaunte.com/starwars/js/jquery.parallax-1.1.3.js"></script>
<script>
$(document).ready(function(){
    $('#intro').parallax({offsetY:-150,speedFactor:0.2});
    $('#second').parallax({speedFactor:0.2});
    $('.bg').parallax({offsetX:"0%",offsetY:200,speedFactor:0.4});
    $('#third').parallax({speedFactor:0.4});
});
</script><!--  end footer -->

Parallax Plugin on Github > https://github.com/leowebguy/jquery-parallax

Veja aqui o resultado final! > http://temp.gaunte.com/starwars/

2017-07-07Gaunte - Agência de MarketingGaunte - Agência de Marketinghttps://www.instagram.com/gauntewebhttps://www.facebook.com/gauntewebhttps://twitter.com/gauntewebhttps://plus.google.com/+gauntewebhttps://flipboard.com/@leowebguy/marketing-digital-uit17mblyhttps://gaunte.com/images/gaunte-logo-b1.png+55-71-4042-0012contato@gaunte.comsales https://gaunte.com/images/blog/starwars.jpg19201080
Gaunte - Agência de Marketinghttps://www.instagram.com/gauntewebhttps://www.facebook.com/gauntewebhttps://twitter.com/gauntewebhttps://plus.google.com/+gauntewebhttps://flipboard.com/@leowebguy/marketing-digital-uit17mblyhttps://gaunte.com/images/gaunte-logo-b1.png+55-71-4042-0012contato@gaunte.comsales Gaunte - Agência de MarketingUm novo conceito de agência de marketing - especializados em engajamento online, websites, lojas online (ecommerce), otimização para google (seo), mídias sociais, identidade visual e mais.Homehttps://gaunte.comBloghttps://gaunte.com/blogCrie uma parallax page usando imagens de Star Warshttps://gaunte.com/blog/crie-uma-parallax-page-usando-imagens-de-star-wars

Gostou desse artigo?
Inscreva-se em nossa Newsletter.

Eu concordo em receber boletins mensais da Gaunte.com, podendo cancelar a inscrição a qualquer momento.

2. whatsapp

whats.me/gaunteweb

3. form online

gaunte.com/contato

e. contato

Quer saber mais? Entre em contato, nós cuidamos do resto.

artigos artigos
fechar

artigos recentes

contato gaunte contato

d. portfolio

A expertise de uma grande agência sem os custos que inviabilizam o seu projeto.