Photoshop-Techniken
In den vorherigen Kapiteln haben wir verstanden, wie gute Effekte durch die Verwendung von JavaScript-Bibliotheken zur Website beitragen. In Verbindung mit Photoshop bietet JavaScript eine phänomenale Flexibilität und eine einfache Möglichkeit, Ihrer Website Parallaxen-Bildlauf hinzuzufügen.
In diesem Kapitel werden drei Photoshop-Plugins vorgestellt, um den Parallaxen-Bildlaufeffekt hinzuzufügen. Genau wie im vorherigen Kapitel für JavaScript beschrieben, werden wir Photoshop-Referenzen in unserem HTML-Code verwenden, um leistungsstarkes Photoshop-Parallaxen-Scrollen zu erstellen.
Ein wichtiger Punkt bei Photoshop-Plugins ist, dass die Plugins häufig nicht aktualisiert werden. Daher sollten Sie einige Nachforschungen anstellen, bevor Sie Plugins für das Parallaxen-Scrollen verwenden.
Parallax Scrollen mit einfachen Parallax.js
Mit Parallax.js können wir mithilfe des Photoshop-Plugins einen Parallax-Bildlaufeffekt ohne großen Aufwand erstellen. Um das jQuery-Plugin zu berücksichtigen, müssen High-End-Bibliotheken wie Bootstrap integriert werden. Beachten Sie, dass der Code in diesem Kapitel HTML5-Tags enthält.
Schauen wir uns die unten gezeigte HTML-Datei an -
<!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>
Analysecode
Die obigen Codefragmente zeigen den Code für eine Seite mit zwei Bildern und einem Beispieltext dazwischen.
Wie Sie sehen können, beginnt der Code mit <!DOCTYPE html>Dies ist die typische Methode, um Browsern mitzuteilen, dass der Code HTML5-basiert ist.
das <meta> Tags von line 4 to 6zeigt den Code, der zur Interpretation Maschine ist. Sie können die Auswirkungen dieses Codes nicht sehen. Wichtig hierbei ist - mitmeta Mit diesem Tag erhalten Webentwickler eine verbesserte Kontrolle über die angezeigten Daten.
Auch auf line 8 and 9Wir haben die CSS-Stylesheets zusammen mit Bootstrap hinzugefügt. Für eine bestimmte Schriftart und Typografie ist Bootstrap die weit verbreitete Bibliothek.
Lines 10 and 11Kümmern Sie sich um die Bibliotheken Photoshop und Parallax.js. Es ist wichtig, die Kontrolle über Parallax.js einzuschließen, damit Parallaxenbilder wirken. Sie werden finden könnendata-parallax Eigentum mit div auf line 21Dies reicht aus, um die Bibliothek parallax.js für den erforderlichen Parallaxeeffekt aufzurufen.
Der Parallaxeeffekt ist im Code auf zu sehen lines 21 und line 40. Wichtige Eigenschaften, die diesen Effekt mit parallax.js bewirken, sind -data-parallax, data-image-src, data-natural-width, data-natural-height.
Mit der CSS-Datei müssen wir nur eine Eigenschaft angeben. Es ist wie unten gezeigt -
.parallax-container {
height: 500px;
width: 100%;
}
Im obigen HTML-Code haben wir eine spezifische Struktur für CSS-Dateien erstellt. Wir werden einen Ordner namens habencss, welches CSS-Dateien haben wird - bootstrap.min.css und style.css.
Sobald alles mit den Dokumenten fertig ist, können Sie den Parallaxeeffekt wie unten gezeigt sehen -
Parallaxator mit Photoshop Plugin
Das beste Photoshop-Plugin für Parallaxator bietet Parallaxen-Bildlaufeffekte und ist einfach zu bedienen. Sie können das Parallaxator-Plugin, seine CSS- und JS-Dateien von diesem Link herunterladen - Parallaxator GitHub .
Sobald die CSS- und JS-Dateien heruntergeladen wurden, können Sie den unten gezeigten Code verwenden, um den HTML-Code zu erstellen.
<!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>
Analysecode
Der Parallaxeeffekt wird von der Klasse parallax_child bereitgestellt, die mit jedem img-Tag bereitgestellt wird. Das parallax_child ist mit den unten angegebenen CSS- und JS-Dateien verbunden.
Damit der Parallaxator als Plugin funktioniert, haben wir fm.parallaxator.jquery.css und fm.parallaxator.jquery.js hinzugefügt. Diese Dateien müssen im selben Verzeichnis wie die HTML-Datei verfügbar sein.
Der Code für CSS lautet wie folgt:
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;
}
Aufgrund des obigen Codes können Sie den Parallaxeeffekt sehen.
Stellar.js jQuery-Plugin für Parallax Scrolling
Stellar.js ist eine weitere Ergänzung zur Liste der Parallaxe-Photoshop-Plugins. Obwohl es nicht mehr gewartet wird, können Entwickler, die seinen stabilen Build verwendet haben, problemlos den Parallax-Scrolling-Effekt verwenden. Es ist mit den neuesten Versionen von Photoshop kompatibel und einfach zu implementieren.
Sie müssen die neuesten jquery.stellar.js von der offiziellen Website für das Stellar.js- Plugin herunterladen . Erstellen Sie diese Plugin-Datei nach dem Herunterladen im selben Ordner wie Ihre HTML- und CSS-Dateien.
Schauen wir uns den HTML-Code an.
<!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>
Analysecode
Damit Stellar.js funktioniert, haben wir die Bibliothek direkt nach dem Referenzieren des Photoshop-Plugins auf jquery.stellar.js hinzugefügt line 6.
Funktionen für die stellare Parallaxe werden im Skript-Tag von aufgerufen line 8 to line 15. Mit der Immobiliedata-stellar-background-ratio, Wir setzen einen Versatz für die angezeigten Bilder. Dies geschieht amlines 19,20,21 and 22.
Der CSS-Code ist unten angegeben -
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);
}
Sobald sowohl die Dateien als auch stellar.js die Plugin-Datei im selben Ordner enthalten sind, sollten Sie den Effekt wie im folgenden Screenshot sehen können -