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 22 additions and 101 deletions
......@@ -15749,7 +15749,7 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
.by-the-numbers {
margin-top: -60px;
z-index: 999999;
z-index: 99;
position: relative;
margin-bottom: 24px;
}
......
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' );
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?> <?php understrap_body_attributes(); ?>>
<body id="body" <?php body_class(); ?> <?php understrap_body_attributes(); ?>>
<?php do_action( 'wp_body_open' ); ?>
<div class="site" id="page">
......
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.
import jQuery from 'jquery';
import LocomotiveScroll from 'locomotive-scroll';
import { gsap, Power2 } from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";
import ScrollToPlugin from "gsap/ScrollToPlugin";
......@@ -29,27 +28,6 @@ jQuery(document).ready(function($) {
gsap.registerPlugin(ScrollTrigger);
// Using Locomotive Scroll from Locomotive https://github.com/locomotivemtl/locomotive-scroll
// const locoScroll = new LocomotiveScroll({
// el: document.querySelector("#js-scroll"),
// smooth: true
// });
// each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning)
//locoScroll.on("scroll", ScrollTrigger.update);
// tell ScrollTrigger to use these proxy methods for the "#js-scroll" element since Locomotive Scroll is hijacking things
// ScrollTrigger.scrollerProxy("#js-scroll", {
// scrollTop(value) {
// return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y;
// }, // we don't have to define a scrollLeft because we're only scrolling vertically.
// getBoundingClientRect() {
// return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
// },
// // 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).
// pinType: document.querySelector("#js-scroll").style.transform ? "transform" : "fixed"
// });
var tl = gsap.timeline();
tl.from("h1 span", {
......@@ -155,88 +133,31 @@ function numberWithCommas(x) {
});
// each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll.
//ScrollTrigger.addEventListener("refresh", () => locoScroll.update());
// after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc.
//ScrollTrigger.refresh();
ScrollTrigger.refresh();
// var frameNumber = 400, // start video at frame 0
// // lower numbers = faster playback
// playbackConst = 10,
// // get page height from video duration
// setHeight = document.getElementById("body"),
// // select video element
// vid = document.getElementById('v2');
// // dynamically set the page height according to video length
// vid.addEventListener('loadedmetadata', function() {
// setHeight.style.height = Math.floor(vid.duration) * playbackConst + "px";
// });
// // Use requestAnimationFrame for smooth playback
// function scrollPlay(){
// var frameNumber = window.pageYOffset/playbackConst;
// vid.currentTime = frameNumber;
// window.requestAnimationFrame(scrollPlay);
// }
// // select video element
// var vid = document.getElementById('v2');
// //var vid = $('#v0')[0]; // jquery option
// // pause video on load
// vid.pause();
// // pause video on document scroll (stops autoplay once scroll started)
// window.onscroll = function(){
// vid.pause();
// };
// // refresh video frames on interval for smoother playback
// setInterval(function(){
// vid.currentTime = window.pageYOffset/300;
// }, 40);
// jQuery(document).ready(function($) {
// // select video element
// var vid = document.getElementById('v0');
// var time = $('#time');
// var scroll2 = $('#scroll');
// var body = $('.video-cont');
// var windowheight = $(window).height() - 20;
// var scrollpos = window.pageYOffset / 400;
// var targetscrollpos = scrollpos;
// var accel = 0;
// // ---- Values you can tweak: ----
// var accelamount = 0.01; //How fast the video will try to catch up with the target position. 1 = instantaneous, 0 = do nothing.
// 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
// // pause video on load
// vid.pause();
// window.onscroll = function() {
// //Set the video position that we want to end up at:
// targetscrollpos = ($(document).scrollTop() - $(vid).offset().top) / $(vid).height();
// targetscrollpos = targetscrollpos > 0 ? targetscrollpos < $(vid).height() ? targetscrollpos : $(vid).height() : 0;
// targetscrollpos *= 13500/ $(vid).height();
// //move the red dot to a position across the side of the screen
// //that indicates how far we've scrolled.
// scroll2.css('top', 10 + (targetscrollpos * windowheight));
// };
// setInterval(function() {
// //Accelerate towards the target:
// accel += (targetscrollpos - scrollpos) * accelamount;
// //clamp the acceleration so that it doesnt go too fast
// if (accel > 1) accel = 1;
// if (accel < -1) accel = -1;
// //move the video scroll position according to the acceleration and how much bouncing you selected:
// scrollpos = (scrollpos + accel) * (bounceamount) + (targetscrollpos * (1 - bounceamount));
// //move the blue dot to a position across the side of the screen
// //that indicates where the current video scroll pos is.
// time.css('top', 10 + (scrollpos / targetscrollpos * 400 * windowheight));
// //update video playback
// vid.currentTime = scrollpos;
// vid.pause();
// }, 40);
// window.requestAnimationFrame(scrollPlay);
// });
\ No newline at end of file
......
......@@ -222,7 +222,7 @@
.by-the-numbers{
margin-top: -60px;
z-index: 999999;
z-index: 99;
position: relative;
margin-bottom: 24px;
h2{
......