Skip to content

Tenzing / Tenzing-Web-2023

Go to a project
Toggle navigation
Toggle navigation pinning
3f13838d by Jeff Balicki
Options

scrollTrigger 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent 656df4be
Inline Side-by-side
Showing 15 changed files with 383 additions and 118 deletions
......@@ -15428,7 +15428,7 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
#main-nav.fixed-top {
position: fixed;
z-index: 999;
z-index: 9999;
top: 0px;
left: 0px;
width: 100%;
......@@ -15451,33 +15451,129 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
opacity: 0;
}
#v {
height: 2000px;
}
.video-cont {
height: 100vh;
position: relative;
left: 0px;
width: 100%;
z-index: 9;
overflow: hidden;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.myVideo {
position: relative;
right: 0;
top: 0;
position: absolute;
min-width: 100%;
margin: auto;
display: block;
z-index: 99;
}
.fixed-video {
position: fixed;
min-height: 100%;
width: auto;
height: auto;
top: 50%;
left: 50%;
-o-object-fit: contain;
object-fit: contain;
transform: translate(-50%, -50%);
}
#full-width-page-wrapper {
padding-top: 0px;
}
.scroll-content {
position: relative;
z-index: 999;
}
.overlay-desc {
position: relative;
z-index: 999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 786px;
}
.overlay-desc span {
align-self: flex-start;
color: #666666;
font-size: 24px;
line-height: 32px;
}
.overlay-desc h1, .overlay-desc .h1 {
align-self: flex-start;
color: #333333;
font-size: 40px;
line-height: 48px;
}
.overlay-desc2 {
position: relative;
z-index: 999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
height: 786px;
}
.overlay-desc2 span {
align-self: flex-end;
color: #666666;
font-size: 24px;
line-height: 32px;
width: 50%;
}
.overlay-desc2 h1, .overlay-desc2 .h1 {
align-self: flex-end;
color: #333333;
font-size: 40px;
line-height: 48px;
width: 50%;
}
.overlay-desc2.mid {
justify-content: center;
}
.c-header_title_linerr {
display: block;
opacity: 0;
transform-origin: center top;
transform-style: preserve-3d;
transform: translateY(100%) rotateX(-80deg);
transition: opacity 0s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0s cubic-bezier(0.215, 0.61, 0.355, 1);
}
html.is-ready .c-header_title_linerr {
transform: none;
opacity: 1;
transition-duration: 0.8s;
}
html.is-ready .c-header_title_linerr:nth-child(1) {
transition-delay: 0.1s;
}
html.is-ready .c-header_title_linerr:nth-child(2) {
transition-delay: 0.2s;
}
html.is-ready .c-header_title_linerr:nth-child(3) {
transition-delay: 0.3s;
}
html.is-ready .c-header_title_linerr:nth-child(4) {
transition-delay: 0.4s;
}
.c-header_title_linerr span {
display: inline-block;
}
.c-header_title_linerr.-version {
text-transform: none;
font-size: 0;
}
.line {
width: 100%;
max-width: 800px;
height: 8px;
margin: 0 0 10px 0;
position: relative;
display: inline-block;
background-color: rgb(255, 255, 255);
}
/*# sourceMappingURL=child-theme.css.map */
\ No newline at end of file
......
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.
......@@ -25,12 +25,7 @@ $navbar_type = get_theme_mod( 'understrap_navbar_type', 'collapse' );
<body <?php body_class(); ?> <?php understrap_body_attributes(); ?>>
<?php do_action( 'wp_body_open' ); ?>
<div class="site" id="page">
<div id="v" class="video-cont">
<video muted loop id="v0" class="myVideo fixed-video">
<source src="<?php echo get_stylesheet_directory_uri(); ?>/assets/istockphoto-1372856608-640_adpp_is.mp4" type="video/mp4">
<track label="English" kind="subtitles" srclang="en" src="" >
</video>
<!-- ******************* The Navbar Area ******************* -->
<header id="wrapper-navbar">
......@@ -42,4 +37,4 @@ $navbar_type = get_theme_mod( 'understrap_navbar_type', 'collapse' );
<?php get_template_part( 'global-templates/navbar', $navbar_type . '-' . $bootstrap_version ); ?>
</header><!-- #wrapper-navbar -->
</div>
\ No newline at end of file
......
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.
This diff could not be displayed because it is too large.
......@@ -2295,6 +2295,11 @@
"integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
"dev": true
},
"gsap": {
"version": "3.11.4",
"resolved": "https://registry.npmjs.org/gsap/-/gsap-3.11.4.tgz",
"integrity": "sha512-McHhEguHyExMMnjqKA8G+7TvxmlKQGMbjgwAilnFe1e4id7V/tFveRQ2YMZhTYu0oxHGWvbPltdVYQOu3z1SCA=="
},
"has": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
......
......@@ -42,6 +42,7 @@
},
"homepage": "https://understrap.com",
"dependencies": {
"gsap": "^3.11.4",
"locomotive-scroll": "^4.1.4"
},
"devDependencies": {
......
......@@ -23,13 +23,82 @@ if ( is_page_template( 'page-templates/no-title.php' ) ) {
}
?>
<div class="wrapper" id="<?php echo $wrapper_id; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- ok. ?>">
<div class="video-cont video2 ">
<!-- <img class="video-sizer" src="<?php // echo get_stylesheet_directory_uri(); ?>/assets/video1.png"/> -->
<video id="v1" autoplay muted loop class="myVideo ">
<div id="js-scroll" >
<div id="vc1">
<div class="video-cont">
<video autoplay muted loop class="myVideo">
<source src="<?php echo get_stylesheet_directory_uri(); ?>/assets/istockphoto-1372856608-640_adpp_is.mp4" type="video/mp4">
<track label="English" kind="subtitles" srclang="en" src="" >
</video>
<div class="container">
<div class="row move_1">
<div class="col-md-12 content-area">
<div class="overlay-desc header">
<span class="c-header_title_line">Organizations and<br> companies that align around </span>
<h1 class="c-header_title_line">great brand stories <br>and experiences </h1>
<span class="c-header_title_line">outperform their peers<br>that do not. </span>
</div>
</div>
</div>
<div class="row move_2">
<div class="col-md-12 content-area">
<div class="overlay-desc2 header">
<h1 class="c-header_title_line">That alignment can evolve</h1>
<span class="c-header_title_line">organization-wide or by product, service or project.</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="vc2">
<div class="video-cont video2">
<video autoplay muted loop class="myVideo ">
<source src="<?php echo get_stylesheet_directory_uri(); ?>/assets/istockphoto-1307041439-640_adpp_is.mp4" type="video/mp4">
<track label="English" kind="subtitles" srclang="en" src="" >
</video>
<div class="container">
<div class="row move_3">
<div class="col-md-12 content-area">
<div class="overlay-desc2 mid header">
<span class="c-header_title_line">Tenzing helps its clients <br>
outperform their peers or competitors <br>
by creating and implementing great</span>
<h1 class="c-header_title_line">transformative, <br>
compelling, <br>
almost magical</h1>
<span class="c-header_title_line">brand stories and experiences. </span>
</div>
</div>
</div>
<div class="row move_4">
<div class="col-md-12 content-area">
<div class="overlay-desc2 mid header">
<h1 class="c-header_title_line">transformative, <br>
compelling, <br>
almost magical</h1>
<span class="c-header_title_line">in both the digital and analogue worlds. </span>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="vc3">
<div class="video-cont">
<video autoplay muted loop id="v3" class="myVideo">
<source src="<?php echo get_stylesheet_directory_uri(); ?>/assets/istockphoto-1372856608-640_adpp_is.mp4" type="video/mp4">
<track label="English" kind="subtitles" srclang="en" src="" >
</video>
<div class="container">
</div>
</div>
</div>
</div>
<div class="<?php echo esc_attr( $container ); ?>" id="content">
<div class="row">
......@@ -51,7 +120,6 @@ if ( is_page_template( 'page-templates/no-title.php' ) ) {
?>
</main>
</div>
</div><!-- #primary -->
</div><!-- .row -->
......
import LocomotiveScroll from 'locomotive-scroll';
import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";
import ScrollToPlugin from "gsap/ScrollToPlugin";
const scroll = new LocomotiveScroll();
//const scroll = new LocomotiveScroll();
document.addEventListener("DOMContentLoaded", function() {
window.addEventListener('scroll', function() {
if (window.scrollY > 57) {
document.getElementById('main-nav').classList.add('fixed-top');
} else {
document.getElementById('main-nav').classList.remove('fixed-top');
}
if (window.scrollY > 1500) {
// document.getElementById('v1').classList.add('fixed-video');
} else {
// document.getElementById('v1').classList.remove('fixed-video');
}
});
});
gsap.registerPlugin(ScrollTrigger);
// Using Locomotive Scroll from Locomotive https://github.com/locomotivemtl/locomotive-scroll
// select video element
var vid = document.getElementById('v0');
//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() {
// const locoScroll = new LocomotiveScroll({
// el: document.querySelector("#js-scroll"),
// smooth: true
// });
// //Accelerate towards the target:
// accel += (targetscrollpos - scrollpos) * accelamount;
// 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"
// });
// //clamp the acceleration so that it doesnt go too fast
// if (accel > 1) accel = 1;
// if (accel < -1) accel = -1;
// var tl = gsap.timeline({
// scrollTrigger: {
// trigger: "#vc1",
// scroller: "body",
// markers:true,
// scrub: true,
// pin: true,
// start: "top top",
// end: "+=100%",
// }
// });
// //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));
var tl = gsap.timeline({
scrollTrigger: {
trigger: "#vc1",
scroller: "body",
markers:true,
scrub: true,
pin: true,
start: "top top",
end: "+=150%",
}
});
// //update video playback
// vid.currentTime = scrollpos;
// vid.pause();
var tl1 = gsap.timeline({
scrollTrigger: {
trigger: "#vc2",
scroller: "body",
markers:true,
scrub: true,
pin: true,
start: "top top",
end: "+=150%",
}
});
// }, 40);
// ScrollTrigger.create({
// trigger: "#vc1",
// scroller: "#js-scroll",
// markers:true,
// scrub: true,
// pin: true,
// start: "top top",
// end: "+=100%"
// });
tl.to(".move_1", {y: -700}, 0).to(".move_2", {y: -800},0)
tl1.to(".move_3", {y: -786}, 0).to(".move_4", {y: -786},0)
// each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll.
//ScrollTrigger.addEventListener("refresh", () => locoScroll.update());
// });
\ No newline at end of file
// after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc.
//ScrollTrigger.refresh();
......
This diff could not be displayed because it is too large.
......@@ -33,7 +33,7 @@
}
#main-nav.fixed-top{
position: fixed;
z-index: 999;
z-index: 9999;
top: 0px;
left: 0px;
width: 100%;
......@@ -50,38 +50,140 @@
}
}
.video-sizer{
position:relative;
z-index: 0;
opacity: 0;
}
#v{
height: 2000px;
}
.video-cont{
height: 100vh;
position: relative;
left: 0px;
width: 100%;
z-index: 9;
overflow: hidden;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
.myVideo {
position: relative;
right: 0;
top: 0;
position: absolute;
min-width: 100%;
margin: auto;
display: block;
z-index: 99;
min-height: 100%;
width: auto;
height: auto;
top: 50%;
left: 50%;
-o-object-fit: contain;
object-fit: contain;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.fixed-video{
position: fixed;
}
#full-width-page-wrapper{
padding-top: 0px;
}
.scroll-content{
position: relative;
z-index: 999;
}
.overlay-desc {
position: relative;
z-index: 999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 786px;
span{
align-self:flex-start;
color: #666666;
font-size: 24px;
line-height: 32px;
}
h1{
align-self:flex-start;
color: #333333;
font-size: 40px;
line-height: 48px;
}
}
.overlay-desc2 {
position: relative;
z-index: 999;
display: flex;
flex-direction: column;
align-items: center;
justify-content:flex-end;
height: 786px;
span{
align-self:flex-end;
color: #666666;
font-size: 24px;
line-height: 32px;
width: 50%;
}
h1{
align-self:flex-end;
color: #333333;
font-size: 40px;
line-height: 48px;
width: 50%;
}
}
.overlay-desc2.mid{
justify-content:center;
}
.c-header_title_linerr {
display: block;
opacity: 0;
transform-origin: center top;
transform-style: preserve-3d;
transform: translateY(100%) rotateX(-80deg);
transition: opacity 0s cubic-bezier(0.215, 0.610, 0.355, 1.000), transform 0s cubic-bezier(0.215, 0.610, 0.355, 1.000);
html.is-ready & {
transform: none;
opacity: 1;
transition-duration: 0.8s;
@for $i from 1 through 4 {
&:nth-child(#{$i}){
transition-delay: $i*0.1s;
}
}
}
span {
display: inline-block;
}
&.-version {
text-transform: none;
font-size: 0;
}
}
.line {
width: 100%;
max-width: 800px;
height: 8px;
margin: 0 0 10px 0;
position: relative;
display: inline-block;
background-color: rgba(255,255,255,1);
}
\ No newline at end of file
......