Técnicas de Photoshop
Nos capítulos anteriores, entendemos como os bons efeitos do uso de bibliotecas JavaScript agregam ao site. JavaScript, quando combinado com Photoshop, fornece flexibilidade fenomenal e facilidade para adicionar rolagem paralaxe ao seu site.
Neste capítulo, veremos três plug-ins do Photoshop para adicionar o efeito de rolagem paralaxe. Assim como mencionamos no capítulo anterior para JavaScript, usaremos referências do Photoshop em nosso código HTML para criar uma poderosa rolagem de paralaxe no Photoshop.
Um ponto importante a ser observado sobre os plug-ins do Photoshop é que muitas vezes os plug-ins não são atualizados, portanto, você pode querer fazer alguma pesquisa antes de começar a usar qualquer plug-in para rolagem paralaxe.
Parallax Scrolling usando Parallax.js simples
Parallax.js usando o plugin do Photoshop, podemos criar o efeito de rolagem paralaxe sem muitos aborrecimentos. Considerar o plugin jQuery requer a inclusão de bibliotecas de ponta, como bootstrap. Observe que neste capítulo haverá tags HTML5 no código.
Vejamos o arquivo HTML mostrado abaixo -
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Parallax.js | Simple Parallax Scrolling Effect with jQuery</title>
<meta charset = "utf-8">
<meta http-equiv = "X-UA-Compatible" content = "IE = edge">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<link href = "css/style.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>
</head>
<body>
<section>
<div class = "container">
<h1>Example on Parallax.js</h1>
<p data-pg-collapsed>
This is an example of parallax scrolling using Parallax.js jQuery Plugin.
</p>
<br/>
</div>
</section>
<div class = "parallax-container" data-parallax = "scroll"
data-position = "top" data-bleed = "10"
data-image-src = "https://pixabay.com/get/ea31b90a2af5093ed1534705fb0938c9bd22ffd41cb2114595f9c67dae/clematis-3485218_1920.jpg"
data-natural-width = "1600" data-natural-height = "800" >
</div>
<section>
<div class = "container">
<h2 id = "sampleLorem">Sample Text Here</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla
quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent
mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.
<br/>
<br/>
Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean
quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis
tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus
risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis
quis ligula lacinia aliquet. Mauris ipsum.
<br/>
<br/>
Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh.
Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Nam nec
ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing
diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla.
Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet.
Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu
magna luctus suscipit.
<br/>
<br/>
Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus
vitae pharetra auctor, sem massa mattis sem, at interdum magna augue
eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent
blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum.
Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc,
viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt
malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris.
Morbi in dui quis est pulvinar ullamcorper.
<br/>
<br/>
Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed
aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis,
venenatis tristique, dignissim in, ultrices sit amet, augue. Proin
sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi
lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus,
accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium
blandit orci.
<br/>
<br/>
Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non,
convallis id, sagittis at, neque. Nullam mauris orci, aliquet et,
iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam
imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus
et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
nisi. Nulla quis sem at nibh elementum imperdiet.
<br/>
<br/>
</p>
</div>
</section>
<div class = "parallax-container" data-parallax = "scroll"
data-bleed = "10" data-speed = "0.2"
data-image-src = "https://pixabay.com/get/ea31b90620f0063ed1534705fb0938c9bd22ffd41cb2114594f0c37cae/chamomile-3489847_1920.jpg"
data-natural-width = "1600" data-natural-height = "801"
data-pg-name = "PARALLAX IMAGE 002">
</div>
</body>
</html>
Código de Análise
Os trechos de código acima mostram o código de uma página com duas imagens e um texto de amostra entre elas.
Como você pode ver, o código começa com <!DOCTYPE html>Essa é a maneira típica de informar aos navegadores que o código é baseado em HTML5.
a <meta> tags de line 4 to 6mostra o código que é máquina de interpretação. Você não será capaz de ver o impacto deste código. Uma coisa importante a notar aqui é - commeta tag, os desenvolvedores da web obtêm um controle aprimorado sobre os dados exibidos.
Também em line 8 and 9, Incluímos as folhas de estilo CSS junto com o Bootstrap. Para uma fonte e tipografia específicas, Bootstrap é a biblioteca amplamente usada.
Lines 10 and 11cuidar das bibliotecas do Photoshop e Parallax.js. É importante incluir controle sobre Parallax.js para ter o efeito de imagens paralaxe. Você será capaz de encontrardata-parallax propriedade com div em line 21, O que é suficiente para chamar a biblioteca parallax.js para o efeito de paralaxe necessário.
O efeito de paralaxe pode ser visto no código em lines 21 e line 40. Propriedades importantes que fazem esse efeito acontecer com parallax.js são -data-parallax, data-image-src, data-natural-width, data-natural-height.
Com o arquivo CSS, temos que fornecer apenas uma propriedade. É como mostrado abaixo -
.parallax-container {
height: 500px;
width: 100%;
}
No código HTML acima, criamos uma estrutura específica para arquivos CSS. Teremos uma pasta chamadacss, que terá arquivos CSS - bootstrap.min.css e style.css.
Depois que tudo estiver concluído com os documentos, você poderá ver o efeito de paralaxe conforme mostrado abaixo -
Parallaxator usando Photoshop Plugin
Parallaxator, o melhor plugin do Photoshop, oferece efeitos de rolagem paralaxe e é fácil de usar. Você pode baixar o plugin Parallaxator, seus arquivos CSS e JS neste link - Parallaxator GitHub .
Depois que os arquivos CSS e JS forem baixados, você pode usar o código mostrado a seguir para criar o código HTML.
<!DOCTYPE html>
<html>
<head>
<title>Parallaxator Plugin</title>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8">
<link rel = "stylesheet" href = "fm.parallaxator.jquery.css">
<link rel = "stylesheet" href = "style.css">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "fm.parallaxator.jquery.js"></script>
</head>
<body>
<div class = "section1 parallaxator">
<img class = "parallax_child" src = "img/landscape.jpg" width = "100%">
<h1 class = "mega_text parallax_child">Nature</h1>
</div>
<div class = "section2 parallaxator">
<img class = "parallax_child" src = "img/architecture.jpg" width = "100%">
<h1 class = "mega_text parallax_child">
Architecture<br>
</h1>
</div>
<div class = "section3 parallaxator">
<img class = "parallax_child" src = "img/architecture1.jpg" width = "100%">
<h1 class = "mega_text parallax_child" data-parallaxator-reverse = "true" data-parallaxator-velocity = "0.35">
Architecture again!
</h1>
</div>
</body>
</html>
Código de Análise
O efeito de paralaxe é fornecido pela classe parallax_child, que é fornecida com cada tag img. O parallax_child está conectado aos arquivos CSS e JS fornecidos abaixo.
Para que o plugin do paralaxador funcione, incluímos fm.parallaxator.jquery.css e fm.parallaxator.jquery.js. Esses arquivos devem estar disponíveis no mesmo diretório que o arquivo HTML.
O código para CSS é mostrado abaixo -
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
.section1,.section2, .section3 {
border-bottom: 32px solid #fff;
padding-top: 40%;
}
.section1 {
background-color: #fdb;
}
.section2 {
background-color: #bdf;
}
.section3 {
background-color: #fbd;
}
.mega_text {
font-weight: bold;
font-size: 100px;
margin: 0;
text-shadow: 0 10px 100px #fff, 0 0 15px #fff;
padding: 64px;
display: block;
}
Como resultado do código acima, você poderá ver o efeito de paralaxe.
Plug-in Stellar.js jQuery para Parallax Scrolling
Stellar.js é outra adição à lista de plug-ins paralaxe do Photoshop. Embora não seja mais mantido, os desenvolvedores que usaram sua versão estável podem usar o efeito de rolagem paralaxe com facilidade. É compatível com as últimas versões do Photoshop e fácil de implementar.
Você precisará baixar o jquery.stellar.js mais recente do site oficial do plug- in Stellar.js . Uma vez baixado, crie este arquivo de plugin na mesma pasta que seus arquivos HTML e CSS.
Vamos dar uma olhada no código HTML.
<!doctype html>
<html>
<head>
<title>Stellar.js Demo</title>
<link href = "style.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "jquery.stellar.js"></script>
<script>
$(function(){
$.stellar({
horizontalScrolling: false,
verticalOffset: 40
});
});
</script>
</head>
<body>
<h1>Demo Site</h1>
<div class = "image architecture" data-stellar-background-ratio = "0.5">
<span>Architecture</span>
</div>
<div class = "image abstract" data-stellar-background-ratio = "0.5">
<span>Abstract</span>
</div>
<div class = "image landscape" data-stellar-background-ratio = "0.5">
<span>Landscape</span>
</div>
<div class = "image window" data-stellar-background-ratio = "0.5">
<span>Window</span>
</div>
</body>
</html>
Código de Análise
Para o Stellar.js funcionar, incluímos a biblioteca logo após o plugin do Photoshop ser referenciado em jquery.stellar.js line 6.
Funções para paralaxe estelar são chamadas na tag de script de line 8 to line 15. Com a propriedadedata-stellar-background-ratio, Estamos definindo um deslocamento para as imagens exibidas. Isso é feito emlines 19,20,21 and 22.
O código CSS é fornecido abaixo -
body {
font-family: helvetica, arial;
padding-top: 40px;
}
h1 {
background-color: black;
color: white;
height: 40px;
font-size: 24px;
font-weight: normal;
left: 0;
line-height: 40px;
position: fixed;
text-align: center;
top: 0;
width: 100%;
z-index: 1;
}
h1 a {
border-bottom: 1px solid white;
color: white;
display: inline-block;
line-height: 30px;
text-decoration: none;
}
.image {
background-attachment: fixed;
background-position: 50% 0;
background-repeat: no-repeat;
height: 450px;
position: relative;
}
.image span {
bottom: 0;
color: white;
display: block;
left: 50%;
margin-left: -640px;
font-size: 38px;
padding: 10px;
position: absolute;
text-shadow: 0 2px 0 black, 0 0 10px black;
width: 1280px;
}
.architecture {
background-image: url(img/architecture.jpg);
}
.abstract {
background-image: url(img/ruin.jpg);
}
.landscape {
background-image: url(img/landscape.jpg);
}
.window {
background-image: url(img/window.jpg);
}
Uma vez que ambos os arquivos são criados e stellar.js, o arquivo do plugin é incluído na mesma pasta, você deve ser capaz de ver o efeito conforme mostrado na imagem abaixo -