Techniki Photoshopa
W poprzednich rozdziałach zrozumieliśmy, jak dobre efekty przynosi korzystanie z bibliotek JavaScript na stronie internetowej. JavaScript, w połączeniu z Photoshopem, zapewnia fenomenalną elastyczność i łatwość dodawania przewijania paralaksy do Twojej witryny.
W tym rozdziale przyjrzymy się trzem wtyczkom Photoshopa, aby dodać efekt przewijania paralaksy. Podobnie jak w poprzednim rozdziale o JavaScript, będziemy używać odniesień Photoshopa w naszym kodzie HTML, aby stworzyć potężne przewijanie paralaksy w Photoshopie.
Ważną kwestią, na którą należy zwrócić uwagę na temat wtyczek programu Photoshop, jest to, że często wtyczki nie są aktualizowane, dlatego przed rozpoczęciem korzystania z jakichkolwiek wtyczek do przewijania paralaksy warto przeprowadzić pewne badania.
Przewijanie paralaksy przy użyciu prostego Parallax.js
Parallax.js za pomocą wtyczki Photoshopa, możemy stworzyć efekt przewijania paralaksy bez większych kłopotów. Biorąc pod uwagę, że wtyczka jQuery wymaga włączenia wysokiej klasy bibliotek, takich jak bootstrap. Zauważ, że w tym rozdziale w kodzie będą tagi HTML5.
Spójrzmy na plik HTML pokazany poniżej -
<!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>
Kod analizy
Powyższe fragmenty kodu pokazują kod strony z dwoma obrazami i przykładowym tekstem między nimi.
Jak widać, kod zaczyna się od <!DOCTYPE html>Jest to typowy sposób informowania przeglądarek, że kod jest oparty na HTML5.
the <meta> tagi z line 4 to 6pokazuje kod, który jest maszyną do interpretacji. Nie będziesz w stanie zobaczyć wpływu tego kodu. Ważną rzeczą, na którą należy zwrócić uwagę, jest - zmeta tag, twórcy stron internetowych uzyskują lepszą kontrolę nad wyświetlanymi danymi.
Również na line 8 and 9, Dołączyliśmy arkusze stylów CSS wraz z Bootstrap. Bootstrap jest powszechnie używaną biblioteką dla określonego kroju czcionki i typografii.
Lines 10 and 11zadbaj o biblioteki Photoshop i Parallax.js. Ważne jest, aby uwzględnić kontrolę nad Parallax.js, aby uzyskać efekt obrazów paralaksy. Będziesz mógł znaleźćdata-parallax nieruchomość z div na line 21, Co jest wystarczające, aby wywołać bibliotekę parallax.js dla wymaganego efektu paralaksy.
Efekt paralaksy można zobaczyć w kodzie na lines 21 i line 40. Ważnymi właściwościami, które powodują ten efekt w przypadku parallax.js są -data-parallax, data-image-src, data-natural-width, data-natural-height.
W pliku CSS musimy podać tylko jedną właściwość. Jest jak pokazano poniżej -
.parallax-container {
height: 500px;
width: 100%;
}
W powyższym kodzie HTML stworzyliśmy określoną strukturę dla plików CSS. Będziemy mieć folder o nazwiecss, który będzie zawierał pliki CSS - bootstrap.min.css i style.css.
Gdy wszystko jest gotowe z dokumentami, będziesz mógł zobaczyć efekt paralaksy, jak pokazano poniżej -
Parallaxator przy użyciu wtyczki Photoshop
Wtyczka Parallaxator best of Photoshop zapewnia efekty przewijania paralaksy i jest łatwa w użyciu. Możesz pobrać wtyczkę Parallaxator, jej pliki CSS i JS z tego linku - Parallaxator GitHub .
Po pobraniu plików CSS i JS możesz użyć poniższego kodu, aby utworzyć kod 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>
Kod analizy
Efekt paralaksy zapewnia klasa parallax_child, która jest dostarczana z każdym znacznikiem img. Parallax_child jest połączony z plikami CSS i JS, które są podane poniżej.
Aby paralaksator działał, dołączyliśmy fm.parallaxator.jquery.css i fm.parallaxator.jquery.js. Pliki te muszą być dostępne w tym samym katalogu, co plik HTML.
Kod CSS jest przedstawiony poniżej -
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;
}
W wyniku powyższego kodu będziesz mógł zobaczyć efekt paralaksy.
Wtyczka Stellar.js jQuery do przewijania paralaksy
Stellar.js to kolejny dodatek do listy wtyczek Parallax Photoshop. Chociaż nie jest już obsługiwany, deweloperzy, którzy korzystali z jego stabilnej wersji, mogą z łatwością używać efektu przewijania paralaksy. Jest kompatybilny z najnowszymi wersjami programu Photoshop i łatwy do wdrożenia.
Będziesz musiał pobrać najnowszą wersję jquery.stellar.js z oficjalnej strony wtyczki Stellar.js . Po pobraniu utwórz ten plik wtyczki w tym samym folderze, co pliki HTML i CSS.
Przyjrzyjmy się kodowi 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>
Kod analizy
Aby Stellar.js działał, dołączyliśmy bibliotekę zaraz po odwołaniu się do wtyczki Photoshopa w jquery.stellar.js line 6.
Funkcje dla paralaksy gwiazd są wywoływane w tagu skryptu z line 8 to line 15. Z nieruchomościądata-stellar-background-ratio, Ustawiamy przesunięcie dla wyświetlanych obrazów. To się dziejelines 19,20,21 and 22.
Kod CSS jest podany poniżej -
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);
}
Po utworzeniu obu plików i stellar.js plik wtyczki zostanie umieszczony w tym samym folderze, powinieneś być w stanie zobaczyć efekt, jak pokazano na zrzucie ekranu podanym poniżej -