포토샵 기법

이전 장에서 우리는 JavaScript 라이브러리를 사용하는 좋은 효과가 웹 사이트에 어떻게 추가되는지 이해했습니다. Photoshop과 결합 된 JavaScript는 놀라운 유연성을 제공하고 웹 사이트에 시차 스크롤을 쉽게 추가 할 수 있습니다.

이 장에서는 시차 스크롤 효과를 추가하는 세 가지 Photoshop 플러그인을 살펴 보겠습니다. 이전 장에서 JavaScript에 대해 언급 한 것처럼 HTML 코드에서 Photoshop 참조를 사용하여 강력한 Photoshop 시차 스크롤링을 만들 것입니다.

Photoshop 플러그인에 대해 주목해야 할 중요한 점은 플러그인이 업데이트되지 않는 경우가 많으므로 시차 스크롤 용 플러그인을 사용하기 전에 몇 가지 조사를해야한다는 것입니다.

간단한 Parallax.js를 사용한 시차 스크롤링

Photoshop 플러그인을 사용하여 Parallax.js를 사용하면 많은 번거 로움없이 시차 스크롤 효과를 만들 수 있습니다. jQuery 플러그인을 고려하려면 부트 스트랩과 같은 고급 라이브러리를 포함해야합니다. 이 장에서는 코드에 HTML5 태그가 있습니다.

아래에 표시된 HTML 파일을 살펴 보겠습니다.

<!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>

분석 코드

위의 코드 스 니펫은 두 개의 이미지와 그 사이에 샘플 텍스트가있는 페이지의 코드를 보여줍니다.

보시다시피 코드는 <!DOCTYPE html>이것은 코드가 HTML5 기반이라는 것을 브라우저에 알리는 일반적인 방법입니다.

그만큼 <meta> 태그 line 4 to 6해석을위한 기계 인 코드를 보여줍니다. 이 코드의 영향을 확인할 수 없습니다. 여기서 주목해야 할 중요한 사항은-meta 태그를 사용하면 웹 개발자가 표시되는 데이터에 대한 향상된 제어 권한을 얻을 수 있습니다.

또한 line 8 and 9, 우리는 Bootstrap과 함께 CSS 스타일 시트를 포함했습니다. 특정 글꼴 및 타이포그래피의 경우 Bootstrap이 널리 사용되는 라이브러리입니다.

Lines 10 and 11Photoshop 및 Parallax.js 라이브러리를 관리합니다. 시차 이미지의 효과를 내기 위해 Parallax.js에 대한 제어를 포함하는 것이 중요합니다. 당신은 찾을 수 있습니다data-parallax 재산 div 의 위에 line 21, 필요한 시차 효과를 위해 parallax.js 라이브러리를 호출하기에 충분합니다.

시차 효과는 코드에서 볼 수 있습니다. lines 21line 40. parallax.js에서이 효과를 발생시키는 중요한 속성은 다음과 같습니다.data-parallax, data-image-src, data-natural-width, data-natural-height.

CSS 파일에서는 하나의 속성 만 제공하면됩니다. 다음과 같습니다.

.parallax-container {  
   height: 500px;  
   width: 100%;  
}

위의 HTML 코드에서 CSS 파일에 대한 특정 구조를 만들었습니다. 우리는css, CSS 파일이 있습니다. bootstrap.min.cssstyle.css.

모든 문서가 완료되면 아래와 같이 시차 효과를 볼 수 있습니다.

Photoshop 플러그인을 사용하는 Parallaxator

Parallaxator 최고의 Photoshop 플러그인은 시차 스크롤링 효과를 제공하며 사용하기 쉽습니다. Parallaxator 플러그인, CSS 및 JS 파일은 Parallaxator GitHub 링크에서 다운로드 할 수 있습니다 .

CSS 및 JS 파일이 다운로드되면 아래 표시된 코드를 사용하여 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>

분석 코드

시차 효과는 각 img 태그와 함께 제공되는 parallax_child 클래스에서 제공됩니다. parallax_child는 아래에 제공된 CSS 및 JS 파일과 연결됩니다.

parallaxator 플러그인이 작동하도록 fm.parallaxator.jquery.css 및 fm.parallaxator.jquery.js를 포함했습니다. 이러한 파일은 HTML 파일과 동일한 디렉토리에서 사용할 수 있어야합니다.

CSS 코드는 다음과 같습니다.

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;  
}

위 코드의 결과로 시차 효과를 볼 수 있습니다.

Parallax Scrolling을위한 Stellar.js jQuery 플러그인

Stellar.js는 시차 Photoshop 플러그인 목록에 추가 된 또 다른 기능입니다. 더 이상 유지되지 않지만 안정적인 빌드를 사용한 개발자는 시차 스크롤링 효과를 쉽게 사용할 수 있습니다. 최신 버전의 Photoshop과 호환되며 구현하기 쉽습니다.

Stellar.js 플러그인 의 공식 웹 사이트에서 최신 jquery.stellar.js를 다운로드해야합니다 . 다운로드가 완료되면 HTML 및 CSS 파일과 동일한 폴더에이 플러그인 파일을 만듭니다.

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>

분석 코드

Stellar.js가 작동하려면 Photoshop 플러그인이 jquery.stellar.js에서 참조 된 직후에 라이브러리를 포함했습니다. line 6.

Stellar 시차에 대한 함수는 스크립트 태그에서 호출됩니다. line 8 to line 15. 속성과 함께data-stellar-background-ratio, 표시되는 이미지의 오프셋을 설정하고 있습니다. 이 작업은lines 19,20,21 and 22.

CSS 코드는 다음과 같습니다.

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); 
}

두 파일이 모두 생성되고 stellar.js 플러그인 파일이 동일한 폴더에 포함되면 아래 스크린 샷과 같이 효과를 볼 수 있습니다.