Skip to content

Tenzing / Tenzing-Web-2023

Go to a project
Toggle navigation
Toggle navigation pinning
33caaba6 by Jeff Balicki
Options

count up 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent be6cfbfb
Inline Side-by-side
Showing 12 changed files with 199 additions and 25 deletions
......@@ -15594,6 +15594,12 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
.overlay-desc.header h1, .overlay-desc.header .h1 {
align-self: flex-start;
font-family: "TradeGothic";
color: #333333;
font-size: 40px;
line-height: 48px;
}
.overlay-desc.header h1 u, .overlay-desc.header .h1 u {
font-family: "BemboStd-SemiboldItalic";
}
.overlay-desc.header span {
color: #666666;
......@@ -15608,9 +15614,6 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
font-size: 40px;
line-height: 48px;
}
.overlay-desc.header u {
font-family: "BemboStd-SemiboldItalic";
}
.overlay-desc:not(.header) {
position: relative;
......@@ -15744,4 +15747,53 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
display: block;
}
.by-the-numbers {
margin-top: -60px;
z-index: 999999;
position: relative;
margin-bottom: 24px;
}
.by-the-numbers h2, .by-the-numbers .h2 {
color: #fff;
font-size: 30px;
line-height: 36px;
text-transform: uppercase;
}
.the-numbers {
margin-left: -12px;
margin-right: -12px;
}
.the-numbers .wp-block-columns {
gap: 0em;
}
.the-numbers .wp-block-column {
padding: 50px;
background-color: #7AA6AD;
color: #fff;
}
.the-numbers .wp-block-column:nth-of-type(2) {
background-color: #C2B59B;
color: #666666;
}
.the-numbers .wp-block-column:nth-of-type(3) {
background-color: #E9D654;
color: #666666;
}
.the-numbers .wp-block-column:nth-of-type(4) {
background-color: #FFB547;
color: #666666;
}
.the-numbers .wp-block-column:nth-of-type(5) {
background-color: #BB2E1D;
}
.the-numbers h3, .the-numbers .h3 {
font-size: 60px;
line-height: 72px;
}
.the-numbers p {
font-size: 20px;
line-height: 24px;
}
/*# 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.
......@@ -4,8 +4,8 @@
* Licensed under GPL-3.0 (undefined)
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('jquery')) :
typeof define === 'function' && define.amd ? define(['exports', 'jquery'], factory) :
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('jquery'), require('_count-up')) :
typeof define === 'function' && define.amd ? define(['exports', 'jquery', '_count-up'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.understrap = {}, global.jQuery));
})(this, (function (exports, jQuery) { 'use strict';
......@@ -15185,6 +15185,12 @@
});
});
jQuery(document).ready(function ($) {
$('.the-numbers .wp-block-columns .wp-block-column:first-of-type').css('margin-left', "-" + $('#content').css('margin-left'));
$('.the-numbers .wp-block-columns .wp-block-column:last-of-type').css('margin-right', "-" + $('#content').css('margin-right'));
window.addEventListener('resize', function () {
$('.the-numbers .wp-block-columns .wp-block-column:first-of-type').css('margin-left', "-" + $('#content').css('margin-left'));
$('.the-numbers .wp-block-columns .wp-block-column:last-of-type').css('margin-right', "-" + $('#content').css('margin-right'));
});
gsapWithCSS.registerPlugin(ScrollTrigger);
// Using Locomotive Scroll from Locomotive https://github.com/locomotivemtl/locomotive-scroll
......@@ -15235,6 +15241,11 @@
end: "+=150%"
}
});
tl1.to(".move_1", {
y: -786
}, 0).to(".move_2", {
y: -486
}, 0);
var tl2 = gsapWithCSS.timeline({
scrollTrigger: {
trigger: "#vc2",
......@@ -15245,6 +15256,38 @@
end: "+=150%"
}
});
tl2.to(".move_3", {
y: -786
}, 0).to(".move_4", {
y: -786
}, 0);
var tl3 = gsapWithCSS.timeline({
scrollTrigger: {
trigger: ".by-the-numbers",
scroller: "body",
start: "center center",
end: "+=200px",
toggleAction: "reset reset reset reset"
}
});
const items = document.querySelectorAll(".the-numbers h3");
tl3.from(items, {
textContent: 0,
duration: 4,
ease: Power2.in,
snap: {
textContent: 1
},
stagger: {
each: 0.1,
onUpdate: function () {
this.targets()[0].innerHTML = numberWithCommas(Math.ceil(this.targets()[0].textContent));
}
}
});
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
// var tlimage = gsap.timeline({
// scrollTrigger: {
......@@ -15264,17 +15307,6 @@
// ease: Power2.out,
// stagger: 0.05
// });
tl1.to(".move_1", {
y: -786
}, 0).to(".move_2", {
y: -486
}, 0);
tl2.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());
......
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.
......@@ -34,9 +34,7 @@ if ( is_page_template( 'page-templates/no-title.php' ) ) {
<div class="row move_1">
<div class="col-md-12 content-area">
<div class="overlay-desc header">
<h1>
<?php echo get_field('video_one_text_one');?>
</h1>
<h1><?php echo get_field('video_one_text_one');?></h1>
</div>
</div>
</div>
......
......@@ -3,6 +3,8 @@ import LocomotiveScroll from 'locomotive-scroll';
import { gsap, Power2 } from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";
import ScrollToPlugin from "gsap/ScrollToPlugin";
import "_count-up";
//const scroll = new LocomotiveScroll();
......@@ -18,6 +20,12 @@ document.addEventListener("DOMContentLoaded", function() {
jQuery(document).ready(function($) {
$('.the-numbers .wp-block-columns .wp-block-column:first-of-type').css('margin-left',"-"+$('#content').css('margin-left'));
$('.the-numbers .wp-block-columns .wp-block-column:last-of-type').css('margin-right',"-"+$('#content').css('margin-right'));
window.addEventListener('resize', function() {
$('.the-numbers .wp-block-columns .wp-block-column:first-of-type').css('margin-left',"-"+$('#content').css('margin-left'));
$('.the-numbers .wp-block-columns .wp-block-column:last-of-type').css('margin-right',"-"+$('#content').css('margin-right'));
});
gsap.registerPlugin(ScrollTrigger);
......@@ -72,18 +80,51 @@ var tl1 = gsap.timeline({
end: "+=150%",
}
});
tl1.to(".move_1", {y: -786}, 0).to(".move_2", {y: -486},0)
var tl2 = gsap.timeline({
scrollTrigger: {
trigger: "#vc2",
scroller: "body",
scrub: true,
pin: true,
start: "top top",
end: "+=150%",
}
});
tl2.to(".move_3", {y: -786}, 0).to(".move_4", {y: -786},0)
var tl3 = gsap.timeline({
scrollTrigger: {
trigger: ".by-the-numbers",
scroller: "body",
start: "center center",
end: "+=200px",
toggleAction:"reset reset reset reset",
}
});
const items = document.querySelectorAll(".the-numbers h3");
tl3.from(items, {
textContent: 0,
duration: 4,
ease: Power2.in,
snap: { textContent: 1 },
stagger: {
each: 0.1,
onUpdate: function() {
this.targets()[0].innerHTML = numberWithCommas(Math.ceil(this.targets()[0].textContent));
},
}
});
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
......@@ -111,8 +152,6 @@ var tl2 = gsap.timeline({
tl1.to(".move_1", {y: -786}, 0).to(".move_2", {y: -486},0)
tl2.to(".move_3", {y: -786}, 0).to(".move_4", {y: -786},0)
});
......
......@@ -51,6 +51,12 @@
h1{
align-self:flex-start;
font-family: 'TradeGothic';
color: #333333;
font-size: 40px;
line-height: 48px;
u{
font-family: 'BemboStd-SemiboldItalic';
}
}
span{
color: #666666;
......@@ -66,9 +72,7 @@
line-height: 48px;
}
u{
font-family: 'BemboStd-SemiboldItalic';
}
}
.overlay-desc:not(.header) {
......@@ -215,3 +219,52 @@
}
.by-the-numbers{
margin-top: -60px;
z-index: 999999;
position: relative;
margin-bottom: 24px;
h2{
color: #fff;
font-size: 30px;
line-height: 36px;
text-transform: uppercase;
}
}
.the-numbers{
margin-left: -12px;
margin-right: -12px;
.wp-block-columns{
gap: 0em;
}
.wp-block-column{
padding: 50px;
background-color: #7AA6AD;
color: #fff;
}
.wp-block-column:nth-of-type(2){
background-color: #C2B59B;
color: #666666;
}
.wp-block-column:nth-of-type(3){
background-color: #E9D654;
color: #666666;
}
.wp-block-column:nth-of-type(4){
background-color: #FFB547;
color: #666666;
}
.wp-block-column:nth-of-type(5){
background-color: #BB2E1D;
}
h3{
font-size: 60px;
line-height: 72px;
}
p{
font-size: 20px;
line-height: 24px;
}
}
\ No newline at end of file
......