Bootstrap Snippet Liquid Scroll Image Effects using HTML CSS

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="container">
      <ul class="image-list">
        <li class="image-item">
          <a href="" class="image-wrapper">
            <img src="https://source.unsplash.com/whOkVvf0_hU/" alt="" />
          </a>
        </li>
        <li class="image-item">
          <a href="" class="image-wrapper">
            <img src="https://source.unsplash.com/whOkVvf0_hU/" alt="" />
          </a>
        </li>
        <li class="image-item">
          <a href="" class="image-wrapper">
            <img src="https://source.unsplash.com/whOkVvf0_hU/" alt="" />
          </a>
        </li>
        <li class="image-item">
          <a href="" class="image-wrapper">
            <img src="https://source.unsplash.com/whOkVvf0_hU/" alt="" />
          </a>
        </li>
      </ul>
    </div>
    <div class="webgl-canvas">
      <canvas id="webgl-canvas" class="webgl-canvas__body"></canvas>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<!-- シェーダーをscriptタグ内に書いてJSで読み込む -->
<script id="v-shader" type="x-shader/x-vertex">
      varying vec2 vUv;
      uniform float uTime;
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
/* -- リセット系 -- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
ul,
li {
  list-style: none;
}
a {
  text-decoration: none;
}
img {
  width: 100%;
}
/* -- ここまで -- */
body {
  overscroll-behavior: none;
}
.webgl-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
}
.webgl-canvas__body {
  width: 100%;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Liquid Scroll Image Effects"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

Related: See More

Questions / Comments:

"Liquid Scroll Image Effects" Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

Related: See More

Questions / Comments:

"Liquid Scroll Image Effects"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY