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 { ...@@ -15594,6 +15594,12 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
15594 .overlay-desc.header h1, .overlay-desc.header .h1 { 15594 .overlay-desc.header h1, .overlay-desc.header .h1 {
15595 align-self: flex-start; 15595 align-self: flex-start;
15596 font-family: "TradeGothic"; 15596 font-family: "TradeGothic";
15597 color: #333333;
15598 font-size: 40px;
15599 line-height: 48px;
15600 }
15601 .overlay-desc.header h1 u, .overlay-desc.header .h1 u {
15602 font-family: "BemboStd-SemiboldItalic";
15597 } 15603 }
15598 .overlay-desc.header span { 15604 .overlay-desc.header span {
15599 color: #666666; 15605 color: #666666;
...@@ -15608,9 +15614,6 @@ body.understrap-no-sidebar .wp-block-cover.alignwide { ...@@ -15608,9 +15614,6 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
15608 font-size: 40px; 15614 font-size: 40px;
15609 line-height: 48px; 15615 line-height: 48px;
15610 } 15616 }
15611 .overlay-desc.header u {
15612 font-family: "BemboStd-SemiboldItalic";
15613 }
15614 15617
15615 .overlay-desc:not(.header) { 15618 .overlay-desc:not(.header) {
15616 position: relative; 15619 position: relative;
...@@ -15744,4 +15747,53 @@ body.understrap-no-sidebar .wp-block-cover.alignwide { ...@@ -15744,4 +15747,53 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
15744 display: block; 15747 display: block;
15745 } 15748 }
15746 15749
15750 .by-the-numbers {
15751 margin-top: -60px;
15752 z-index: 999999;
15753 position: relative;
15754 margin-bottom: 24px;
15755 }
15756 .by-the-numbers h2, .by-the-numbers .h2 {
15757 color: #fff;
15758 font-size: 30px;
15759 line-height: 36px;
15760 text-transform: uppercase;
15761 }
15762
15763 .the-numbers {
15764 margin-left: -12px;
15765 margin-right: -12px;
15766 }
15767 .the-numbers .wp-block-columns {
15768 gap: 0em;
15769 }
15770 .the-numbers .wp-block-column {
15771 padding: 50px;
15772 background-color: #7AA6AD;
15773 color: #fff;
15774 }
15775 .the-numbers .wp-block-column:nth-of-type(2) {
15776 background-color: #C2B59B;
15777 color: #666666;
15778 }
15779 .the-numbers .wp-block-column:nth-of-type(3) {
15780 background-color: #E9D654;
15781 color: #666666;
15782 }
15783 .the-numbers .wp-block-column:nth-of-type(4) {
15784 background-color: #FFB547;
15785 color: #666666;
15786 }
15787 .the-numbers .wp-block-column:nth-of-type(5) {
15788 background-color: #BB2E1D;
15789 }
15790 .the-numbers h3, .the-numbers .h3 {
15791 font-size: 60px;
15792 line-height: 72px;
15793 }
15794 .the-numbers p {
15795 font-size: 20px;
15796 line-height: 24px;
15797 }
15798
15747 /*# sourceMappingURL=child-theme.css.map */ 15799 /*# sourceMappingURL=child-theme.css.map */
...\ No newline at end of file ...\ 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 @@ ...@@ -4,8 +4,8 @@
4 * Licensed under GPL-3.0 (undefined) 4 * Licensed under GPL-3.0 (undefined)
5 */ 5 */
6 (function (global, factory) { 6 (function (global, factory) {
7 typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('jquery')) : 7 typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('jquery'), require('_count-up')) :
8 typeof define === 'function' && define.amd ? define(['exports', 'jquery'], factory) : 8 typeof define === 'function' && define.amd ? define(['exports', 'jquery', '_count-up'], factory) :
9 (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.understrap = {}, global.jQuery)); 9 (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.understrap = {}, global.jQuery));
10 })(this, (function (exports, jQuery) { 'use strict'; 10 })(this, (function (exports, jQuery) { 'use strict';
11 11
...@@ -15185,6 +15185,12 @@ ...@@ -15185,6 +15185,12 @@
15185 }); 15185 });
15186 }); 15186 });
15187 jQuery(document).ready(function ($) { 15187 jQuery(document).ready(function ($) {
15188 $('.the-numbers .wp-block-columns .wp-block-column:first-of-type').css('margin-left', "-" + $('#content').css('margin-left'));
15189 $('.the-numbers .wp-block-columns .wp-block-column:last-of-type').css('margin-right', "-" + $('#content').css('margin-right'));
15190 window.addEventListener('resize', function () {
15191 $('.the-numbers .wp-block-columns .wp-block-column:first-of-type').css('margin-left', "-" + $('#content').css('margin-left'));
15192 $('.the-numbers .wp-block-columns .wp-block-column:last-of-type').css('margin-right', "-" + $('#content').css('margin-right'));
15193 });
15188 gsapWithCSS.registerPlugin(ScrollTrigger); 15194 gsapWithCSS.registerPlugin(ScrollTrigger);
15189 15195
15190 // Using Locomotive Scroll from Locomotive https://github.com/locomotivemtl/locomotive-scroll 15196 // Using Locomotive Scroll from Locomotive https://github.com/locomotivemtl/locomotive-scroll
...@@ -15235,6 +15241,11 @@ ...@@ -15235,6 +15241,11 @@
15235 end: "+=150%" 15241 end: "+=150%"
15236 } 15242 }
15237 }); 15243 });
15244 tl1.to(".move_1", {
15245 y: -786
15246 }, 0).to(".move_2", {
15247 y: -486
15248 }, 0);
15238 var tl2 = gsapWithCSS.timeline({ 15249 var tl2 = gsapWithCSS.timeline({
15239 scrollTrigger: { 15250 scrollTrigger: {
15240 trigger: "#vc2", 15251 trigger: "#vc2",
...@@ -15245,6 +15256,38 @@ ...@@ -15245,6 +15256,38 @@
15245 end: "+=150%" 15256 end: "+=150%"
15246 } 15257 }
15247 }); 15258 });
15259 tl2.to(".move_3", {
15260 y: -786
15261 }, 0).to(".move_4", {
15262 y: -786
15263 }, 0);
15264 var tl3 = gsapWithCSS.timeline({
15265 scrollTrigger: {
15266 trigger: ".by-the-numbers",
15267 scroller: "body",
15268 start: "center center",
15269 end: "+=200px",
15270 toggleAction: "reset reset reset reset"
15271 }
15272 });
15273 const items = document.querySelectorAll(".the-numbers h3");
15274 tl3.from(items, {
15275 textContent: 0,
15276 duration: 4,
15277 ease: Power2.in,
15278 snap: {
15279 textContent: 1
15280 },
15281 stagger: {
15282 each: 0.1,
15283 onUpdate: function () {
15284 this.targets()[0].innerHTML = numberWithCommas(Math.ceil(this.targets()[0].textContent));
15285 }
15286 }
15287 });
15288 function numberWithCommas(x) {
15289 return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
15290 }
15248 15291
15249 // var tlimage = gsap.timeline({ 15292 // var tlimage = gsap.timeline({
15250 // scrollTrigger: { 15293 // scrollTrigger: {
...@@ -15264,17 +15307,6 @@ ...@@ -15264,17 +15307,6 @@
15264 // ease: Power2.out, 15307 // ease: Power2.out,
15265 // stagger: 0.05 15308 // stagger: 0.05
15266 // }); 15309 // });
15267
15268 tl1.to(".move_1", {
15269 y: -786
15270 }, 0).to(".move_2", {
15271 y: -486
15272 }, 0);
15273 tl2.to(".move_3", {
15274 y: -786
15275 }, 0).to(".move_4", {
15276 y: -786
15277 }, 0);
15278 }); 15310 });
15279 // each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll. 15311 // each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll.
15280 //ScrollTrigger.addEventListener("refresh", () => locoScroll.update()); 15312 //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' ) ) { ...@@ -34,9 +34,7 @@ if ( is_page_template( 'page-templates/no-title.php' ) ) {
34 <div class="row move_1"> 34 <div class="row move_1">
35 <div class="col-md-12 content-area"> 35 <div class="col-md-12 content-area">
36 <div class="overlay-desc header"> 36 <div class="overlay-desc header">
37 <h1> 37 <h1><?php echo get_field('video_one_text_one');?></h1>
38 <?php echo get_field('video_one_text_one');?>
39 </h1>
40 </div> 38 </div>
41 </div> 39 </div>
42 </div> 40 </div>
......
...@@ -3,6 +3,8 @@ import LocomotiveScroll from 'locomotive-scroll'; ...@@ -3,6 +3,8 @@ import LocomotiveScroll from 'locomotive-scroll';
3 import { gsap, Power2 } from "gsap"; 3 import { gsap, Power2 } from "gsap";
4 import ScrollTrigger from "gsap/ScrollTrigger"; 4 import ScrollTrigger from "gsap/ScrollTrigger";
5 import ScrollToPlugin from "gsap/ScrollToPlugin"; 5 import ScrollToPlugin from "gsap/ScrollToPlugin";
6 import "_count-up";
7
6 8
7 //const scroll = new LocomotiveScroll(); 9 //const scroll = new LocomotiveScroll();
8 10
...@@ -18,6 +20,12 @@ document.addEventListener("DOMContentLoaded", function() { ...@@ -18,6 +20,12 @@ document.addEventListener("DOMContentLoaded", function() {
18 20
19 21
20 jQuery(document).ready(function($) { 22 jQuery(document).ready(function($) {
23 $('.the-numbers .wp-block-columns .wp-block-column:first-of-type').css('margin-left',"-"+$('#content').css('margin-left'));
24 $('.the-numbers .wp-block-columns .wp-block-column:last-of-type').css('margin-right',"-"+$('#content').css('margin-right'));
25 window.addEventListener('resize', function() {
26 $('.the-numbers .wp-block-columns .wp-block-column:first-of-type').css('margin-left',"-"+$('#content').css('margin-left'));
27 $('.the-numbers .wp-block-columns .wp-block-column:last-of-type').css('margin-right',"-"+$('#content').css('margin-right'));
28 });
21 29
22 gsap.registerPlugin(ScrollTrigger); 30 gsap.registerPlugin(ScrollTrigger);
23 31
...@@ -72,18 +80,51 @@ var tl1 = gsap.timeline({ ...@@ -72,18 +80,51 @@ var tl1 = gsap.timeline({
72 end: "+=150%", 80 end: "+=150%",
73 } 81 }
74 }); 82 });
83 tl1.to(".move_1", {y: -786}, 0).to(".move_2", {y: -486},0)
84
75 85
76 var tl2 = gsap.timeline({ 86 var tl2 = gsap.timeline({
77 scrollTrigger: { 87 scrollTrigger: {
78 trigger: "#vc2", 88 trigger: "#vc2",
79 scroller: "body", 89 scroller: "body",
80
81 scrub: true, 90 scrub: true,
82 pin: true, 91 pin: true,
83 start: "top top", 92 start: "top top",
84 end: "+=150%", 93 end: "+=150%",
85 } 94 }
86 }); 95 });
96 tl2.to(".move_3", {y: -786}, 0).to(".move_4", {y: -786},0)
97
98 var tl3 = gsap.timeline({
99 scrollTrigger: {
100 trigger: ".by-the-numbers",
101 scroller: "body",
102 start: "center center",
103 end: "+=200px",
104 toggleAction:"reset reset reset reset",
105 }
106 });
107
108
109 const items = document.querySelectorAll(".the-numbers h3");
110
111 tl3.from(items, {
112 textContent: 0,
113 duration: 4,
114 ease: Power2.in,
115 snap: { textContent: 1 },
116 stagger: {
117 each: 0.1,
118 onUpdate: function() {
119 this.targets()[0].innerHTML = numberWithCommas(Math.ceil(this.targets()[0].textContent));
120 },
121 }
122 });
123
124
125 function numberWithCommas(x) {
126 return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
127 }
87 128
88 129
89 130
...@@ -111,8 +152,6 @@ var tl2 = gsap.timeline({ ...@@ -111,8 +152,6 @@ var tl2 = gsap.timeline({
111 152
112 153
113 154
114 tl1.to(".move_1", {y: -786}, 0).to(".move_2", {y: -486},0)
115 tl2.to(".move_3", {y: -786}, 0).to(".move_4", {y: -786},0)
116 155
117 156
118 }); 157 });
......
...@@ -51,6 +51,12 @@ ...@@ -51,6 +51,12 @@
51 h1{ 51 h1{
52 align-self:flex-start; 52 align-self:flex-start;
53 font-family: 'TradeGothic'; 53 font-family: 'TradeGothic';
54 color: #333333;
55 font-size: 40px;
56 line-height: 48px;
57 u{
58 font-family: 'BemboStd-SemiboldItalic';
59 }
54 } 60 }
55 span{ 61 span{
56 color: #666666; 62 color: #666666;
...@@ -66,9 +72,7 @@ ...@@ -66,9 +72,7 @@
66 line-height: 48px; 72 line-height: 48px;
67 73
68 } 74 }
69 u{ 75
70 font-family: 'BemboStd-SemiboldItalic';
71 }
72 } 76 }
73 77
74 .overlay-desc:not(.header) { 78 .overlay-desc:not(.header) {
...@@ -215,3 +219,52 @@ ...@@ -215,3 +219,52 @@
215 } 219 }
216 220
217 221
222
223 .by-the-numbers{
224 margin-top: -60px;
225 z-index: 999999;
226 position: relative;
227 margin-bottom: 24px;
228 h2{
229 color: #fff;
230 font-size: 30px;
231 line-height: 36px;
232 text-transform: uppercase;
233 }
234 }
235 .the-numbers{
236 margin-left: -12px;
237 margin-right: -12px;
238 .wp-block-columns{
239 gap: 0em;
240 }
241
242 .wp-block-column{
243 padding: 50px;
244 background-color: #7AA6AD;
245 color: #fff;
246 }
247 .wp-block-column:nth-of-type(2){
248 background-color: #C2B59B;
249 color: #666666;
250 }
251 .wp-block-column:nth-of-type(3){
252 background-color: #E9D654;
253 color: #666666;
254 }
255 .wp-block-column:nth-of-type(4){
256 background-color: #FFB547;
257 color: #666666;
258 }
259 .wp-block-column:nth-of-type(5){
260 background-color: #BB2E1D;
261 }
262 h3{
263 font-size: 60px;
264 line-height: 72px;
265 }
266 p{
267 font-size: 20px;
268 line-height: 24px;
269 }
270 }
...\ No newline at end of file ...\ No newline at end of file
......