Kỹ thuật Photoshop
Trong các chương trước, chúng ta đã hiểu các hiệu ứng tốt khi sử dụng thư viện JavaScript bổ sung cho trang web. JavaScript, khi kết hợp với Photoshop, mang lại sự linh hoạt và dễ dàng phi thường để thêm tính năng cuộn thị sai vào trang web của bạn.
Trong chương này, chúng ta sẽ xem xét ba plugin Photoshop để thêm hiệu ứng cuộn thị sai. Cũng giống như cách chúng ta đã tham khảo trong chương trước cho JavaScript, chúng ta sẽ sử dụng các tham chiếu Photoshop trong mã HTML của mình để tạo thao tác cuộn thị sai Photoshop mạnh mẽ.
Một điểm quan trọng cần lưu ý về các plugin Photoshop là các plugin thường không được cập nhật, do đó bạn sẽ muốn thực hiện một số nghiên cứu trước khi bắt đầu sử dụng bất kỳ plugin nào để cuộn thị sai.
Parallax Scrolling sử dụng Parallax.js đơn giản
Parallax.js sử dụng plugin Photoshop, chúng ta có thể tạo hiệu ứng cuộn thị sai mà không gặp nhiều phức tạp. Xem xét plugin jQuery yêu cầu bao gồm một thư viện cao cấp như bootstrap. Lưu ý rằng trong chương này sẽ có các thẻ HTML5 trong mã.
Chúng ta hãy xem tệp HTML được hiển thị bên dưới -
<!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>Mã phân tích
Các đoạn mã trên hiển thị mã cho một trang có hai hình ảnh và văn bản mẫu giữa chúng.
Như bạn có thể thấy, mã bắt đầu bằng <!DOCTYPE html>Đây là cách thông thường để cho các trình duyệt biết rằng mã dựa trên HTML5.
các <meta> thẻ từ line 4 to 6hiển thị mã là máy để diễn giải. Bạn sẽ không thể thấy tác động của mã này. Điều quan trọng cần lưu ý ở đây là - vớimeta , các nhà phát triển web có được quyền kiểm soát nâng cao đối với dữ liệu được hiển thị.
Ngoài ra, trên line 8 and 9, Chúng tôi đã bao gồm CSS style sheet cùng với Bootstrap. Đối với một khuôn mặt phông chữ và kiểu chữ cụ thể, Bootstrap là thư viện được sử dụng rộng rãi.
Lines 10 and 11chăm sóc các thư viện Photoshop và Parallax.js. Điều quan trọng là bao gồm quyền kiểm soát đối với Parallax.js để có hiệu ứng của hình ảnh thị sai. Bạn sẽ có thể tìm thấydata-parallax tài sản với div trên line 21, Là đủ để gọi thư viện parallax.js cho hiệu ứng thị sai cần thiết.
Hiệu ứng thị sai có thể được nhìn thấy trong mã trên lines 21 và line 40. Các thuộc tính quan trọng làm cho hiệu ứng này xảy ra với parallax.js là:data-parallax, data-image-src, data-natural-width, data-natural-height.
Với tệp CSS, chúng tôi chỉ phải cung cấp một thuộc tính. Nó như hình dưới đây -
.parallax-container {
height: 500px;
width: 100%;
}Trong đoạn mã HTML ở trên, chúng tôi đã tạo một cấu trúc cụ thể cho các tệp CSS. Chúng tôi sẽ có một thư mục được gọi làcss, sẽ có các tệp CSS - bootstrap.min.css và style.css.
Khi mọi thứ đã hoàn tất với các tài liệu, bạn sẽ có thể thấy hiệu ứng thị sai như hình dưới đây:
Parallaxator sử dụng Plugin Photoshop
Plugin Parallaxator tốt nhất của Photoshop cung cấp hiệu ứng cuộn thị sai và rất dễ sử dụng. Bạn có thể tải xuống plugin Parallaxator, các tệp CSS và JS của nó từ liên kết này - Parallaxator GitHub .
Sau khi các tệp CSS và JS được tải xuống, bạn có thể sử dụng mã hiển thị bên dưới để tạo mã 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>Mã phân tích
Hiệu ứng thị sai được cung cấp bởi lớp parallax_child được cung cấp với mỗi thẻ img. Parallax_child được nối với các tệp CSS và JS được cung cấp bên dưới.
Để plugin thị sai hoạt động, chúng tôi đã bao gồm fm.parallaxator.jquery.css và fm.parallaxator.jquery.js. Các tệp này bắt buộc phải có trong cùng thư mục với tệp HTML.
Mã cho CSS như hình dưới đây:
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;
}Theo kết quả của đoạn mã trên, bạn sẽ có thể thấy hiệu ứng thị sai.
Stellar.js jQuery plugin cho Parallax Scrolling
Stellar.js là một bổ sung khác cho danh sách các plugin thị sai của Photoshop. Mặc dù nó không còn được duy trì, nhưng các nhà phát triển đã sử dụng bản dựng ổn định của nó, có thể sử dụng hiệu ứng cuộn thị sai một cách dễ dàng. Nó tương thích với các phiên bản mới nhất của Photoshop và dễ thực hiện.
Bạn sẽ cần tải xuống jquery.stellar.js mới nhất từ trang web chính thức cho plugin Stellar.js . Sau khi tải xuống, hãy tạo tệp plugin này trong cùng thư mục với tệp HTML và CSS của bạn.
Hãy để chúng tôi xem xét mã 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>Mã phân tích
Để Stellar.js hoạt động, chúng tôi đã đưa vào thư viện ngay sau khi plugin Photoshop được tham chiếu trên jquery.stellar.js line 6.
Các hàm cho thị sai Stellar được gọi trong thẻ script từ line 8 to line 15. Với tài sảndata-stellar-background-ratio, Chúng tôi đang thiết lập độ lệch cho hình ảnh được hiển thị. Điều này được thực hiện trênlines 19,20,21 and 22.
Mã CSS được cung cấp bên dưới:
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);
}Khi cả hai tệp được tạo và stellar.js tệp plugin được bao gồm trong cùng một thư mục, bạn sẽ có thể thấy hiệu ứng như được hiển thị trong ảnh chụp màn hình dưới đây -
