Bootstrap Snippet Parallax GSAP Scroll Trigger using HTML CSS Javascript

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 ---------->
<nav>
    <div>
      <ul id="ul-menu">
        <li><a id="menu_link" href="#section_beaches">Beaches</a></li>
        <li><a id="menu_link" href="#section_temples">Civlization</a></li>
        <li><a id="menu_link" href="#section_places">Places</a></li>
      </ul>
    </div>
  </nav>
  <section class="container" id="section_beaches">
    <div class="parallax parallax1">
      <div id="div-span1">
        <span>A</span><span>m</span>
        <span>a</span><span>z</span>
        <span>i</span><span>n</span>
        <span>g</span><span>&nbsp</span>
        <span>b</span><span>e</span>
        <span>a</span><span>c</span>
        <span>h</span><span>e</span>
        <span>s</span>
      </div>
    </div>
    </div>
  </section>
  <section class="container" id="section_temples">
    <div class="parallax parallax2">
      <div id="div-span2">
        <span>R</span><span>i</span>
        <span>c</span><span>h</span>
        <span>&nbsp</span><span>a</span>
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
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
body,
html {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
  scroll-behavior: smooth;
  font-family: "Montserrat", sans-serif;
}
nav {
  display: flex;
  justify-content: space-between;
  background-color: whitesmoke;
  box-shadow: 0px 3px 5px gray;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  z-index: 2;
}
nav img {
  margin: 5px 0 5px 5px;
  width: 100px;
  height: 100px;
  /* line-height: 15px; */
  border-radius: 50%;
  z-index: 1;
}
nav div {
  display: flex;
  justify-content: space-around;
}
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
gsap.registerPlugin(ScrollTrigger);
const containers = document.querySelectorAll(".container");
const spans1 = document.querySelectorAll("#div-span1 span");
const spans2 = document.querySelectorAll("#div-span2 span");
const spans3 = document.querySelectorAll("#div-span3  span");
gsap.to(spans1, {
  scrollTrigger: {
    trigger: containers[0],
    start: "top center",
    toggleActions: "restart none none none"
    // pin:true,
    // markers: true
  },
  opacity: 1,
  stagger: 0.1,
  duration: 0.2
});
gsap.to(spans2, {
  scrollTrigger: {
    trigger: containers[1],
    start: "top center",
    toggleActions: "restart none none none"
    // pin:true
  },
  opacity: 1,
  stagger: 0.1,
  duration: 0.2
});
gsap.to(spans3, {
  scrollTrigger: {
    trigger: containers[2],
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Parallax GSAP Scroll Trigger"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

Related: See More

Questions / Comments:

"Parallax GSAP Scroll Trigger" Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

Related: See More

Questions / Comments:

"Parallax GSAP Scroll Trigger"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY