Skip to content

Tenzing / Tenzing-Web-2023

Go to a project
Toggle navigation
Toggle navigation pinning
7f7cb64f by Jeff Balicki
Options

sss 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent 33caaba6
Expand all
Inline Side-by-side
Showing 11 changed files with 21 additions and 100 deletions
...@@ -15749,7 +15749,7 @@ body.understrap-no-sidebar .wp-block-cover.alignwide { ...@@ -15749,7 +15749,7 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
15749 15749
15750 .by-the-numbers { 15750 .by-the-numbers {
15751 margin-top: -60px; 15751 margin-top: -60px;
15752 z-index: 999999; 15752 z-index: 99;
15753 position: relative; 15753 position: relative;
15754 margin-bottom: 24px; 15754 margin-bottom: 24px;
15755 } 15755 }
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
...@@ -22,7 +22,7 @@ $navbar_type = get_theme_mod( 'understrap_navbar_type', 'collapse' ); ...@@ -22,7 +22,7 @@ $navbar_type = get_theme_mod( 'understrap_navbar_type', 'collapse' );
22 <?php wp_head(); ?> 22 <?php wp_head(); ?>
23 </head> 23 </head>
24 24
25 <body <?php body_class(); ?> <?php understrap_body_attributes(); ?>> 25 <body id="body" <?php body_class(); ?> <?php understrap_body_attributes(); ?>>
26 <?php do_action( 'wp_body_open' ); ?> 26 <?php do_action( 'wp_body_open' ); ?>
27 <div class="site" id="page"> 27 <div class="site" id="page">
28 28
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
1 import jQuery from 'jquery'; 1 import jQuery from 'jquery';
2 import LocomotiveScroll from 'locomotive-scroll';
3 import { gsap, Power2 } from "gsap"; 2 import { gsap, Power2 } from "gsap";
4 import ScrollTrigger from "gsap/ScrollTrigger"; 3 import ScrollTrigger from "gsap/ScrollTrigger";
5 import ScrollToPlugin from "gsap/ScrollToPlugin"; 4 import ScrollToPlugin from "gsap/ScrollToPlugin";
...@@ -29,27 +28,6 @@ jQuery(document).ready(function($) { ...@@ -29,27 +28,6 @@ jQuery(document).ready(function($) {
29 28
30 gsap.registerPlugin(ScrollTrigger); 29 gsap.registerPlugin(ScrollTrigger);
31 30
32 // Using Locomotive Scroll from Locomotive https://github.com/locomotivemtl/locomotive-scroll
33
34 // const locoScroll = new LocomotiveScroll({
35 // el: document.querySelector("#js-scroll"),
36 // smooth: true
37 // });
38
39 // each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning)
40 //locoScroll.on("scroll", ScrollTrigger.update);
41
42 // tell ScrollTrigger to use these proxy methods for the "#js-scroll" element since Locomotive Scroll is hijacking things
43 // ScrollTrigger.scrollerProxy("#js-scroll", {
44 // scrollTop(value) {
45 // return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y;
46 // }, // we don't have to define a scrollLeft because we're only scrolling vertically.
47 // getBoundingClientRect() {
48 // return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
49 // },
50 // // LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element).
51 // pinType: document.querySelector("#js-scroll").style.transform ? "transform" : "fixed"
52 // });
53 var tl = gsap.timeline(); 31 var tl = gsap.timeline();
54 32
55 tl.from("h1 span", { 33 tl.from("h1 span", {
...@@ -155,88 +133,31 @@ function numberWithCommas(x) { ...@@ -155,88 +133,31 @@ function numberWithCommas(x) {
155 133
156 134
157 }); 135 });
158 // each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll.
159 //ScrollTrigger.addEventListener("refresh", () => locoScroll.update());
160
161 // after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc.
162 //ScrollTrigger.refresh();
163
164
165
166
167
168 // // select video element
169 // var vid = document.getElementById('v2');
170 // //var vid = $('#v0')[0]; // jquery option
171
172 // // pause video on load
173 // vid.pause();
174
175 // // pause video on document scroll (stops autoplay once scroll started)
176 // window.onscroll = function(){
177 136
178 // vid.pause(); 137 ScrollTrigger.refresh();
179 // };
180 138
181 // // refresh video frames on interval for smoother playback
182 // setInterval(function(){
183 // vid.currentTime = window.pageYOffset/300;
184 // }, 40);
185 139
186 140 // var frameNumber = 400, // start video at frame 0
187 141 // // lower numbers = faster playback
188 // jQuery(document).ready(function($) { 142 // playbackConst = 10,
143 // // get page height from video duration
144 // setHeight = document.getElementById("body"),
189 // // select video element 145 // // select video element
190 // var vid = document.getElementById('v0'); 146 // vid = document.getElementById('v2');
191 // var time = $('#time');
192 // var scroll2 = $('#scroll');
193 // var body = $('.video-cont');
194 // var windowheight = $(window).height() - 20;
195
196 // var scrollpos = window.pageYOffset / 400;
197 // var targetscrollpos = scrollpos;
198 // var accel = 0;
199
200 // // ---- Values you can tweak: ----
201 // var accelamount = 0.01; //How fast the video will try to catch up with the target position. 1 = instantaneous, 0 = do nothing.
202 // var bounceamount = 0.91; //value from 0 to 1 for how much backlash back and forth you want in the easing. 0 = no bounce whatsoever, 1 = lots and lots of bounce
203
204 // // pause video on load
205 // vid.pause();
206
207 // window.onscroll = function() {
208 // //Set the video position that we want to end up at:
209 // targetscrollpos = ($(document).scrollTop() - $(vid).offset().top) / $(vid).height();
210 // targetscrollpos = targetscrollpos > 0 ? targetscrollpos < $(vid).height() ? targetscrollpos : $(vid).height() : 0;
211
212 // targetscrollpos *= 13500/ $(vid).height();
213 // //move the red dot to a position across the side of the screen
214 // //that indicates how far we've scrolled.
215 // scroll2.css('top', 10 + (targetscrollpos * windowheight));
216 // };
217 147
218 // setInterval(function() { 148 // // dynamically set the page height according to video length
219 149 // vid.addEventListener('loadedmetadata', function() {
220 // //Accelerate towards the target: 150 // setHeight.style.height = Math.floor(vid.duration) * playbackConst + "px";
221 // accel += (targetscrollpos - scrollpos) * accelamount; 151 // });
222
223 // //clamp the acceleration so that it doesnt go too fast
224 // if (accel > 1) accel = 1;
225 // if (accel < -1) accel = -1;
226
227 // //move the video scroll position according to the acceleration and how much bouncing you selected:
228 // scrollpos = (scrollpos + accel) * (bounceamount) + (targetscrollpos * (1 - bounceamount));
229
230 // //move the blue dot to a position across the side of the screen
231 // //that indicates where the current video scroll pos is.
232 // time.css('top', 10 + (scrollpos / targetscrollpos * 400 * windowheight));
233 152
234 // //update video playback 153 // // Use requestAnimationFrame for smooth playback
235 // vid.currentTime = scrollpos; 154 // function scrollPlay(){
236 // vid.pause(); 155 // var frameNumber = window.pageYOffset/playbackConst;
156 // vid.currentTime = frameNumber;
157 // window.requestAnimationFrame(scrollPlay);
158 // }
237 159
238 // }, 40); 160 // window.requestAnimationFrame(scrollPlay);
239 161
240 162
241 163
242 // });
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -222,7 +222,7 @@ ...@@ -222,7 +222,7 @@
222 222
223 .by-the-numbers{ 223 .by-the-numbers{
224 margin-top: -60px; 224 margin-top: -60px;
225 z-index: 999999; 225 z-index: 99;
226 position: relative; 226 position: relative;
227 margin-bottom: 24px; 227 margin-bottom: 24px;
228 h2{ 228 h2{
......