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 - marketing digital

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 - Marketing DigitalGaunte - Marketing Digitalhttps://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.png25284+55-71-4042-0012contato@gaunte.comsaleshttps://gaunte.com/images/blog/starwars.jpg19201080
Gaunte - Marketing Digitalhttps://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.png25284+55-71-4042-0012contato@gaunte.comsalesGaunte - Marketing DigitalGaunte é uma Agência de Marketing Digital Moderna. Websites, Lojas Virtuais (eCommerce), Otimização para Busca Google (SEO), Mídias Sociais, Identidade Visual e mais.HomeBlogCrie 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

d. contato

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

Ao entrar em contato conosco você não estará assumindo nenhum compromisso.
artigos artigos
fechar

artigos recentes

contato gaunte contato

d. contato

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

whatsapp call whatsapp