Hướng dẫn parallax slider bootstrap 4 - parallax slider bootstrap 4
|
Parallax Scrolling Effect là một hiệu ứng hình ảnh, nó sẽ hiển thị phần hình ảnh tuỳ thuộc vào vị trí cuộn chuột. Show
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.freetuts.net, không được copy dưới mọi hình thức. Trong bài này mình sẽ cùng các bạn tìm hiểu cách tạo hiệu ứng Parallax Scrolling Effect cho hình nền với CSS. 1. Xây dựng giao diệnĐầu tiên chúng ta sẽ xây dựng các thành phần, các bạn tạo file Code
Mình sẽ tạo một phần nội dung dài 1000px để hiện thanh cuộn, hai thẻ div có Bài viết này được đăng tại [free tuts .net] OK giờ chuyển qua bước tiếp theo. 2.Thêm CSS cho giao diệnChúng ta đã có thành phần hiển thị rồi giờ sử dụng CSS để định dạng cho chúng, các bạn đặt đoạn CSS dưới đây vào bên trong thẻ style: body, html {
height: 100%;
width: 60%;
margin: auto;
}
.parallax {
/* The image used */
background-image: url('./images/demo.jpg');
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}Các đoạn mã trên đều rất cơ bản, các bạn có thể tuỳ chỉnh theo ý thích sao cho phù hợp nhất với website của mình. Các bạn chỉ cần lưu ý phần thuộc tính body, html {
height: 100%;
width: 60%;
margin: auto;
}
.parallax {
/* The image used */
background-image: url('./images/demo.jpg');
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}0 nó chính là thuộc tính quyết định hiệu ứng Parallax Scrolling Effect.Giờ các bạn chạy file 3. Lời kếtNhư vậy, qua bài viết này mình đã cùng các bạn tạo hiệu ứng Parallax Scrolling Effect với CSS. Hi vọng nó sẽ giúp các có thêm sự lựa chọn trong quá trình xây dựng website, nếu có bất cứ thắc mắc nào các bạn có thể để lại trong phần bình luận, hẹn gặp lại trong các bài viết tiếp theo trên freetuts.net. Tham khảo: w3schools.com Trong đó file jquery.stickystack.min.js bạn có thể download tại githubhiệu ứng parallax scrolling là gì, nó có tác dụng như thê nào và cách áp dụng hiệu ứng này vào website của bạn. Tiếp theo bạn sử dụng thư viện Parallax để kích hoạt hiệu ứngcách tạo hiệu ứng parallax scrolling mang đến sự ấn tượng cho website của bạn.
Trong phần này, mình sẽ hướng dẫn bạn tạo hiệu ứng Parallax scrolling sử dụng một plugin jQuery. Plugin này có tên StickyStack giúp tạo hiệu ứng xếp chồng trong quá trình scroll. Thêm đoạn css sau vào thẻ Sử dụng Parallax Javascript Như vậy là qua bài hướng dẫn trên các bạn đã hiểu hiệu ứng parallax scrolling là gì, cũng như cách tạo ra hiệu ứng này cho website rồi phải không nào. Nếu có bất kỳ thắc mắc cũng như góp ý nào, bạn có thể comment xuống bài viết để chúng ta cùng thảo luận nhé. Chúc các bạn thành công.Xin chào các bạn, hôm nay chúng ta sẽ đến với một chủ đề về lập trình frontend. Bài viết này sẽ giải đáp giúp bạn hiệu ứng parallax scrolling là gì, nó có tác dụng như thê nào và cách áp dụng hiệu ứng này vào website của bạn.cách tạo hiệu ứng Parallax scrolling để tham khảo. các bạn có thể lựa chọn phù hợp với dự án của mình. Tạo hiệu ứng Parallax scrolling chỉ với HTML và CSSChuẩn bị bố cục HTML
Áp dụng CSS/* Tiny reset thingy */
body,html{margin:0;padding:0;}
.wrapper {
/* The height needs to be set to a fixed value for the effect to work.
* 100vh is the full height of the viewport. */
height: 100vh;
/* The scaling of the images would add a horizontal scrollbar, so disable x overflow. */
overflow-x: hidden;
/* Enable scrolling on the page. */
overflow-y: auto;
/* Set the perspective to 2px. This is essentailly the simulated distance from the viewport to transformed objects.*/
perspective: 2px;
}
.section {
/* Needed for children to be absolutely positioned relative to the parent. */
position: relative;
/* The height of the container. Must be set, but it doesn't really matter what the value is. */
height: 100vh;
/* For text formatting. */
display: flex;
align-items: center;
text-align: center;
flex-direction: column;
padding: 30px;
justify-content: center;
color: white;
font-weight: bold;
font-size: 25px;
}
.parallax::after {
/* Display and position the pseudo-element */
content: " ";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
/* Move the pseudo-element back away from the camera,
* then scale it back up to fill the viewport.
* Because the pseudo-element is further away, it appears to move more slowly, like in real life. */
transform: translateZ(-1px) scale(1.5);
/* Force the background image to fill the whole element. */
background-size: 100%;
/* Keep the image from overlapping sibling elements. */
z-index: -1;
}
/* The styling for the static div. */
.static {
background: red;
}
/* Sets the actual background images to adorable kitties. This part is crucial. */
.bg1::after {
background-image: url('https://placekitten.com/g/900/700');
}
.bg2::after {
background-image: url('https://placekitten.com/g/800/600');
}
Cuối cùng chúng ta được kết quả demo như sauTạo hiệu ứng Parallax scrolling dạng sticky stack với javascriptTrong phần này, mình sẽ hướng dẫn bạn tạo hiệu ứng Parallax scrolling sử dụng một plugin jQuery. Plugin này có tên StickyStack giúp tạo hiệu ứng xếp chồng trong quá trình scroll. Chuẩn bị bố cục HTML
Áp dụng CSS Cuối cùng chúng ta được kết quả demo như sau |