https://animatedbackgrounds.me/Bubble.js

1//$(document).ready(function() {
2//$('.search-box').focus();
3//});
4
5const wrapper = document.querySelector(".wrapper");
6const header = document.querySelector(".header");
7
8wrapper.addEventListener("scroll", (e) => {
9  e.target.scrollTop > 25
10    ? header.classList.add("header-shadow")
11    : header.classList.remove("header-shadow");
12});
13
14
15/*=============== Animated Backgrounds list ===============*/
16
17
18let Backgrounds1= ["yoksel/pen/EyZgLo", "grayghostvisuals/pen/zvZjaB", "roborich/pen/AmqdWE", "alphardex/pen/bGWYMwg", "alphardex/pen/RwKXJaO", "brainjam/pen/QRRbEV", "raurir/pen/xxYgRK", "GabbeV/pen/DMRPox", "AlexTaietti/pen/rMgKYR", "AlexTaietti/pen/yMZPZj", "darrylhuffman/pen/JEdWzp", "antoniasymeonidou/pen/GRjLymN", "PullJosh/pen/qOWdKe", "natewiley/pen/ExzZpO", "F5/pen/QEKVXq",           ]
19
20
21function replaceTerm(Backgrounds1) { return Backgrounds1.map(function(element) { // Replace the term "/pen/" with "/full/" 
22  return element.replace("/pen/", "/full/"); }); }
23
24const Backgrounds2 = replaceTerm(Backgrounds1);
25
26/*for (var i = 0; i < Backgrounds1.length; i++) {
27  
28var abcdef = Backgrounds1[i];
29  
30  let a = document.getElementById('main')
31
32  a.innerHTML = a.innerHTML + '<figure id="open-modal' + i + '" class="modal__button"  style="background-image: url(https://shots.codepen.io/' + abcdef + '-800.jpg)"></figure><div class="modal__container modal-container close-modal" id="modal-container' + i + '"><div class="modal__content"><div class="modal__close close-modal" title="Close"><i class="bx bx-x"></i></div><div class="iframe-head"><h5>Animated backgrounds</h5></div><iframe src="https://codepen.io/' + abcdef + '" style="border:0px #ffffff none;" name="myiFrame" frameborder="1" height="400px" class="modal__img" ></iframe><h1 class="modal__title">Good Job!</h1><button class="modal__button modal__button-width">View status</button><button class="modal__button-link close-modal">Close</button></div></div></div>';
33 
34}*/
35
36const itemsPerPage = 5; // Number of items to display per page
37let currentPage = 0; // The current page being displayed
38
39function displayPage(page) {
40  // Clear the current page
41  document.getElementById("wave").innerHTML = "";
42
43  // Calculate the starting and ending indices for the current page
44  const startIndex = page * itemsPerPage;
45  const endIndex = startIndex + itemsPerPage;
46
47  // Loop through the array and display the elements for the current page
48  for (let i = startIndex; i < endIndex; i++) {
49    if (i >= Backgrounds1.length) {
50      break;
51    }
52
53    // Append the element to the page
54    let a = document.getElementById("wave")
55
56    a.innerHTML = a.innerHTML + '<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CESI523J&placement=animatedbackgroundsme" id="_carbonads_js"> </script><button onclick="nextPage()" id="load-more" class="modal__button bg-button">Load More</button><figure id="open-modal' + i + '" class="modal__button"  style="background-image: url(https://shots.codepen.io/' + Backgrounds1[i] + '-800.jpg)"></figure><div class="modal__container modal-container close-modal" id="modal-container' + i + '"><div class="modal__content"><div class="modal__close close-modal" title="Close"><i class="bx bx-x"></i></div><div class="iframe-head"><h5>Animated backgrounds</h5></div><iframe src="https://codepen.io/' + Backgrounds2[i] + '" style="border:0px #ffffff none;" name="myiFrame" frameborder="1" height="400px" class="modal__img" ></iframe><a href="https://codepen.io/'+ Backgrounds1[i] +'" target= "_blank"><button class="modal__button modal__button-width">Get Code</button></a><button class="modal__button-link close-modal">Close</button></div></div></div>';
57
58  }
59
60  
61
62  /*=============== SHOW MODAL ===============*/
63
64  const showModal = (openButton, modalContent) => {
65    const openBtn = document.getElementById(openButton),
66      modalContainer = document.getElementById(modalContent)
67
68    if (openBtn && modalContainer) {
69      openBtn.addEventListener('click', () => {
70        modalContainer.classList.add('show-modal')
71      })
72    }
73  }
74
75  for (var i = 0; i < Backgrounds1.length; i++) {
76
77
78    showModal('open-modal' + i, 'modal-container' + i)
79  }
80
81  /*=============== CLOSE MODAL ===============*/
82
83  const buttons = document.querySelectorAll('.close-modal');  // Get all buttons with the class 'my-button'
84  const elements = document.querySelectorAll('.modal-container');  // Get all elements with the class 'my-element'
85
86  buttons.forEach((button) => {
87    button.addEventListener('click', () => {

88      elements.forEach((element) => {
89        element.classList.remove('show-modal');  // Remove the 'my-class' class from each element
90      });
91    });
92  });
93
94
95
96
97  //Scroll to the top
98
99if (page === 0) {
100  return; 
101}
102  
103const arrayContainer = document.getElementById("wave"); // Scroll the array container into view 
104  
105arrayContainer.scrollIntoView();
106  
107
108}
109
110
111
112// Display the first page when the page loads
113displayPage(0);
114
115
116
117
118/*=============== SHOW MODAL ===============*/
119
120
121
122
123/*=============== test ===============
124function nextPage() {
125  currentPage++;
126  displayPage(currentPage);
127}
128*/
129function nextPage() {
130  // Return early if the current page is the last page
131
132  
133
134  
135
136if (currentPage >= Math.ceil(Backgrounds1.length / itemsPerPage) - 1) {
137       return;
138  } else {
139    currentPage++;
140    displayPage(currentPage);
141  }
142  
143  
144  
145}
146
147
148
149  
150  
151  
152
153
154
155