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 -