Bootstrap Snippet 3D Scrolling Image Gallery using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
    <div class="wrapper">
        <div class="main">
                <section class="page1">
                    <div class="page_container">
                        <h1><a href=
                        "#">Scroll Once.<br>
                        <small>It's the journey that counts always.</small></a></h1>
                    </div>
                </section>
                <section class="page2">
                    <div class="page_container">
                        <h1><a href=
                        "#">Scroll more.<br>
                        <small>It's the journey that counts always.</small></a></h1>
                    </div>
                </section>
                <section class="page3">
                    <div class="page_container">
                        <h1><a href=
                        "#">Scroll More & More<br>
                        <small>It's the journey that counts always.</small></a></h1>
                    </div>
                </section>
                <section class="page4">
                    <div class="page_container">
                        <h1><a href=
                        "#">Scroll More & More<br>
                        <small>It's the journey that counts always.</small></a></h1>
                    </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.tps-section {
  width: 100%;
  height: 500px;
  -webkit-perspective: 10em;
  -moz-perspective: 10em;
  -ms-perspective: 10em;
  -o-perspective: 10em;
  perspective: 10em;
  -webkit-perspective-origin: center bottom;
  -moz-perspective-origin: center bottom;
  -ms-perspective-origin: center bottom;
  -o-perspective-origin: center bottom;
  perspective-origin: center bottom;
  -webkit-perspective-origin: 50% 50%;
  -moz-perspective-origin: 50% 50%;
  -ms-perspective-origin: 50% 50%;
  -o-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.tps-wrapper {
  float: left;
  width: 100%;
  height: 100%;
}
html {
  height: 100%;
}
body {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
! function ($) {
     var defaults = {
         sectionContainer: "> section",
         angle: 50,
         opacity: true,
         scale: true,
         outAnimation: true,
         pageContainer: '.page_container',
         pageOpacity: true
     };
     $.fn.tiltedpage_scroll = function (options) {
         var settings = $.extend({}, defaults, options),
             el = $(this);
         el.find(settings.sectionContainer).addClass("tps-section");
         el.find('.tps-section').each(function () {
             var el2 = $(this);
             el2.wrapInner("<div class='tps-wrapper'></div>");
         });
         function isElementInViewport(el3) {
             var docViewTop = $(window).scrollTop(),
                 docViewBottom = docViewTop + $(window).height(),
                 elemTop = el3.offset().top,
                 elemBottom = elemTop + el3.outerHeight(true);
             return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
         }
         function elementVisibilityMayChange(el4) {
             if (isElementInViewport(el4)) {
                 el4.addClass("tps-inview")
             } else {
                 el4.removeClass("tps-inview")
             }
         }
         $(window).on('DOMContentLoaded load resize scroll', function () {
             el.find(settings.sectionContainer).each(function () {
                 elementVisibilityMayChange($(this));
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"3D Scrolling Image Gallery"
Bootstrap 4.1.1 Snippet by ankit1991

Related: See More

Questions / Comments:

"3D Scrolling Image Gallery" Bootstrap 4.1.1 Snippet by ankit1991

Related: See More

Questions / Comments:

"3D Scrolling Image Gallery"
Bootstrap 4.1.1 Snippet by ankit1991