Hướng dẫn parallax slider bootstrap 4 - parallax slider bootstrap 4

$['.main-content-wrapper'].stickyStack[];
      

$['.main-content-wrapper'].stickyStack[{
  containerElement: '.main-content-wrapper',
  stackingElement: 'section',
  boxShadow: '0 -3px 20px rgba[0, 0, 0, 0.25]'
}];
      

Áp dụng CSS

Cuối cùng chúng ta được kết quả demo như sau

body {
  font: 16px/1.5em 'Open Sans', 'Open Sans', sans-serif;
}
a {
  color: #fff;
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  -o-transition: all 300ms;
  transition: all 300ms;
}
a:hover {
  background-color: #fff;
  color: #111;
}
small {
  font-size: 10px;
  clear: both;
  display: block;
}
section {
  background-color: #303030;
  color: #fff;
  padding: 1em 2em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-size: cover;
  background-position: 50% 50%;
  display: block;
}
section.stuck + section:not[.stuck] {
  box-shadow: 0 -3px 20px rgba[0, 0, 0, 0.5];
}
section:before {
  content: '';
  display: block;
  position: absolute;
  background-color: rgba[0, 0, 0, 0.65];
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
section:nth-child[1] {
  pading-top: 200px;
  text-align: center;
  background-image: url['//picsum.photos/1600/900?image=1029'];
  background-size: cover;
  background-position: 50% 50%;
  position: relative;
}
section:nth-child[1] h2 {
  margin-top: 160px;
  margin-bottom: 0;
  line-height: 1em;
  font: 300 48px/1.2em 'Open Sans', sans-serif;
}
section:nth-child[1] .helper {
  font-size: 14px;
  width: 50%;
  margin: 1em auto;
  line-height: 1.5em;
}
section:nth-child[2] {
  background-image: url['//picsum.photos/1600/900?image=991'];
  position: relative;
}
section:nth-child[2]:before {
  display: none;
}
section:nth-child[2] h2 {
  font: 300 42px/1.3em 'Open Sans', sans-serif;
}
section:nth-child[3] {
  background-image: url['//picsum.photos/1600/900?image=988'];
}
section:nth-child[3] h2 {
  font-weight: 300;
  margin-bottom: 1em;
  line-height: 1.2em;
}
section:nth-child[3]:before {
  display: none;
}
section:nth-child[4] {
  background-image: url['//picsum.photos/1600/900?image=884'];
}
section:nth-child[4]:before {
  display: none;
}
section:nth-child[4] .shadow {
  position: absolute;
  bottom: 40px;
  left: 20px;
}
section:nth-child[4] h2 {
  font-weight: 300;
  line-height: 1.2em;
}
section:nth-child[5] {
  background-image: url['//unsplash.it/1600/900?image=896'];
  background-position: 50% 100%;
  padding-top: 30%;
  text-align: center;
}
/* Modular Styles */
h2 {
  font-size: 3em;
}
.button-wrapper {
  margin: 0 auto;
  padding: 0px;
  width: 320px;
  position: relative;
  clear: both;
}
.button-wrapper .btn + .btn {
  margin-left: -4px;
}
.btn {
  padding: 10px;
  font: bold 16px/1.2em sans-serif;
  border: 2px solid #fff;
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
  background-color: transparent;
  text-decoration: none;
  margin: 0.5em auto;
  color: #fff;
  -webkit-transition: 300ms all;
  -moz-transition: 300ms all;
  -o-transition: 300ms all;
  transition: 300ms all;
  display: inline-block;
  box-sizing: border-box;
  width: 49%;
}
.btn:hover {
  background-color: rgba[255, 255, 255, 0.33];
  color: #fff;
  text-shadow: 0 1px 0 #111;
}
.btn:first-of-type {
  margin-right: 2%;
}
.shadow {
  background-color: rgba[0, 0, 0, 0.8];
  padding: 1em;
  border-radius: 5px;
}
.shadow:after {
  display: none;
}
.shadow h2:first-of-type,
.shadow h2:first-of-type,
.shadow h3:first-of-type {
  margin-top: 0;
  margin-bottom: 10px;
}

Tạo hiệu ứng Parallax scrolling dạng sticky stack với javascript

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.jquery.stickystack.min.js bạn có thể download tại github

Thêm đoạn css sau vào thẻ

$[window].load[function[] {
  $['section'].css['min-height', $[window].height[]];

  $['.main-content-wrapper'].stickyStack[];
}];

Sử dụng Parallax Javascript

Trước tiên bạn cần nạp thư viện Parallax js và jQuery vào websitehiệ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.