A Pen by Shubhra

undefined

Forked from Kate's Pen oxdNMr.

Thumbnail
This awesome code was written by shubhra, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright shubhra ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Shubhra</title>
  
  
  <link rel='stylesheet prefetch' href='https://daks2k3a4ib2z.cloudfront.net/56afc90be31ff4c8206cd8d4/css/bakercorp-staging.webflow.6f144d283.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Oswald:300,400,700%7CRoboto:300,regular,500,700%7CRoboto+Condensed:regular,700%7CRoboto+Slab:300,regular'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="w-section nav"><img src="http://uploads.webflow.com/56afc90be31ff4c8206cd8d4/570e575b3d5e64c5751a2b54_logo.svg" class="logo"></div>

<div class="w-section sustain-hero"><div class="sustain-hero-contents"><div class="w-container container-hero"><div class="zero-logo-conatiner"><img id="eco-logo-3" src="http://uploads.webflow.com/56afc90be31ff4c8206cd8d4/57103de049c752fb5708f043_BakerZero_logo_arrow.svg" class="zero-logo-hero" style="visibility: inherit; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);"><img id="eco-logo-1" src="http://uploads.webflow.com/56afc90be31ff4c8206cd8d4/57111f0c00ed0eb70b4f57bc_BakerZero_logo_pt1.svg" class="zero-logo-hero" style="visibility: inherit; opacity: 1;"><img id="eco-logo-2" src="http://uploads.webflow.com/56afc90be31ff4c8206cd8d4/57111f0c398cc28d511a725b_BakerZero_logo_pt2.svg" class="zero-logo-hero" data-pin-nopin="true" style="visibility: inherit; opacity: 1;"></div><h1 class="hero-text" style="visibility: inherit; opacity: 1;">At BakerCorP, we’re committed to <br>working smarter and safer through the <br>BakerZero Sustainability Program</h1><a href="#" class="w-button sustain-hero-button center" style="visibility: inherit; opacity: 1; color: rgb(255, 255, 255); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); background-color: rgb(160, 191, 59);">Learn More</a></div></div><div class="arrow-down"></div></div>

<div id="sustain-secondary-nav" class="w-section sustain-secondary-nav"><div class="w-container"><div data-collapse="small" data-animation="default" data-duration="400" data-contain="1" class="w-nav sustain-secondary-navbar"><div class="w-container"><nav role="navigation" class="w-nav-menu sustain-secondary-menu"><a href="#sustain-section-1" id="secondary-nav-1" class="w-nav-link sustain-secondary-nav-link" style="max-width: 940px;">OUR COMMITMENT</a><a href="#sustain-section-2" id="secondary-nav-2" class="w-nav-link sustain-secondary-nav-link" style="max-width: 940px;">OUR FOCUS</a><a href="#sustain-section-3" id="secondary-nav-3" class="w-nav-link sustain-secondary-nav-link" style="max-width: 940px;">OUR JOURNEY</a><a href="#sustain-section-4" id="secondary-nav-4" class="w-nav-link sustain-secondary-nav-link" style="max-width: 940px;">OUR NUMBERS</a></nav></div><div class="w-nav-overlay" data-wf-ignore=""></div></div></div></div>

<div id="sustain-section-1" class="w-section sustain-main-section"><div class="w-container sustain-section"><div class="sustain-text-right"><h1 class="zero-section-titles">SUSTAINABILITY <br>AT BAKERCORP</h1><p class="paragraph">BakerCorp is committed to working smarter. Sustainable business practices play an important role in our efforts to drive increased value for our customers and a safer and more efficient work environment for our employees. The rental business is by its nature sustainable. Our BakerZero Sustainability Program – defined by our continuous improvement goals of zero incidents and zero impact – provides the framework for our efforts to reduce environmental impacts while increasing operational efficiencies without compromising the health and safety of our people. We believe BakerZero adds long-term value for customers, employees, shareholders and communities through a culture of safety and sustainability in everything we do. While we have much work to do, we’ve made significant progress in our sustainability efforts to date and look forward to improving and growing our safe and sustainable business practices.</p></div><img src="http://uploads.webflow.com/56afc90be31ff4c8206cd8d4/570fcc3e16e5ea0033c6932c_punchout_triangle.svg" class="triangle left"><img src="http://uploads.webflow.com/56afc90be31ff4c8206cd8d4/570fcd21e7488f2431592d56_small_triangles.svg" class="w-preserve-3d small-triangles"></div></div>

<div id="sustain-section-2" class="w-section sustain-main-section"><div class="w-container sustain-section"><img src="http://uploads.webflow.com/56afc90be31ff4c8206cd8d4/570fcc3e16e5ea0033c6932c_punchout_triangle.svg" class="w-preserve-3d triangle grey"><img src="http://uploads.webflow.com/56afc90be31ff4c8206cd8d4/570fcd21e7488f2431592d56_small_triangles.svg" class="w-preserve-3d small-triangles right"><div class="sustain-text-left"><h1 class="zero-section-titles">OUR FOCUS OF EFFORTS</h1><p class="paragraph focus-title">BakerCorp has identified the following focus areas for our sustainability efforts.<br>We believe these three initiatives allow us to drive continuous improvement within the business while providing maximum value to our customers and communities in which we operate.</p><div class="sustain-icons"><div class="w-row sustain-focus-icon-row"><div class="w-col w-col-3 w-col-small-3 icon-column"><img id="icon-eco-back-1" src="http://uploads.webflow.com/56afc90be31ff4c8206cd8d4/5710394f68d86d00586fa115_sustain%20icon%20master%20back.svg" class="icon-eco-back" style="transform: matrix(1, 0, 0, 1, 0, 0);"><img id="icon-eco-front-1" src="http://uploads.webflow.com/56afc90be31ff4c8206cd8d4/5711513d49c752fb570a8cff_sustain%20icon%202%20front.svg" class="icon-eco-2" style="opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);"></div><div class="w-col w-col-9 w-col-small-9"><div class="icon-titles sustain-focus-icon-column-text">Recycling, reuse &amp; regeneration programs</div><p class="paragraph sustain-focus-icon-column-text">Through patented Electrocoagulation technology and water filtration services, we strive to improve water stewardship in water-intensive industry applications</p></div></div><div class="w-row sustain-focus-icon-row"><div class="w-col w-col-3 w-col-small-3"><img id="icon-eco-back-2" src="http://uploads.webflow.com/56afc90be31ff4c8206cd8d4/5710394f68d86d00586fa115_sustain%20icon%20master%20back.svg" class="icon-eco-back" style="transform: matrix(-1, 0, 0, -1, 0, 0);"><img width="140" id="icon-eco-front-2" src="http://uploads.webflow.com/56afc90be31ff4c8206cd8d4/5710394f49c752fb5708eb2f_sustain%20icon%203%20front.svg" class="icon-eco-3" style="opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);"></div><div class="w-col w-col-9 w-col-small-9"><div class="icon-titles sustain-focus-icon-column-text">Sustainable office practices</div><p class="paragraph sustain-focus-icon-column-text">Through patented Electrocoagulation technology and water filtration services, we strive to improve water stewardship in water-intensive industry applications</p></div></div><div class="w-row sustain-focus-icon-row"><div class="w-col w-col-3 w-col-small-3"><img id="icon-eco-back-3" src="http://uploads.webflow.com/56afc90be31ff4c8206cd8d4/5710394f68d86d00586fa115_sustain%20icon%20master%20back.svg" class="icon-eco-back" style="transform: matrix(0.5, 0.86602, -0.86602, 0.5, 0, 0);"><img width="140" id="icon-eco-front-3" src="http://uploads.webflow.com/56afc90be31ff4c8206cd8d4/5710394e398cc28d51192ee6_sustain%20icon%201%20front.svg" class="icon-eco-1" style="opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);"></div><div class="w-col w-col-9 w-col-small-9"><div class="icon-titles sustain-focus-icon-column-text">Water management</div><p class="paragraph sustain-focus-icon-column-text">Through patented Electrocoagulation technology and water filtration services, we strive to improve water stewardship in water-intensive industry applications</p></div></div></div></div></div></div>

<div id="sustain-section-3" class="w-section sustain-main-section"><div class="w-container sustain-section"><div class="sustain-text-right"><h1 class="zero-section-titles">Our sustainable journey</h1><p class="paragraph">At BakerCorp, we’re committed to working smarter and safer through the BakerZero Sustainability Program – starting with our three sustainability initiatives. Below are the actions we’re taking to follow through on our commitment. There is much work to be done, but we are proud of the progress we’ve made so far as a rental equipment company, BakerCorp uses many different materials and natural resources in daily operations.Our goal is to find - for ourselves and our customers - safe and environmentally friendly methods for disposing and reusing materials.One of our most common resources is oil. Through BakerZero, we’ve partnered with Safety-Kleen, an environmental services and products company, to reduce the release of carbon emissions by re-refining used oil and solvents.</p></div><img src="http://uploads.webflow.com/56afc90be31ff4c8206cd8d4/570fcc3e16e5ea0033c6932c_punchout_triangle.svg" class="triangle left image"><img src="http://uploads.webflow.com/56afc90be31ff4c8206cd8d4/570fcd21e7488f2431592d56_small_triangles.svg" class="small-triangles"></div></div>

<div id="sustain-section-4" class="w-section sustain-stat-section"><div class="w-container sustain-section stats"><h1 class="zero-section-titles center">OUR NUMBERS TO DATE</h1><div class="sust-stat-title">Reduce and recycle waste oil and solvents:</div><p class="paragraph center stat">Through Safety-Kleen's* closed-loop recycling program for used oil and solvents, Baker has been able to reduce Greenhouse Gas emissions (CO2e) by over 323 metric tons in our first, equivalent to any one of the following comparisons:</p><div class="w-clearfix sustain-section-stat-group"><div class="sustain-stat-number-section"><img src="http://uploads.webflow.com/56afc90be31ff4c8206cd8d4/570e6ff2bed4e12c2d18f0c9_green_triangle.svg" class="sustain-stat-arrow" style="opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);"><div class="sustain-number-text" style="transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);">36,172</div><div class="sust-stat-title grey">Gallons</div><p class="sustain-stat-sub">36,172 Gallons of Gasoline consumed, enough to fill 61 passenger vehicles</p></div><div class="sustain-stat-number-section"><img src="http://uploads.webflow.com/56afc90be31ff4c8206cd8d4/570e6ff2bed4e12c2d18f0c9_green_triangle.svg" class="sustain-stat-arrow" style="opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);"><div class="sustain-number-text" style="transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);">8,361</div><div class="sust-stat-title grey">Trees</div><p class="sustain-stat-sub">Carbon sequestered by 8,361 trees grown for 10 years in an urban environment</p></div><div class="sustain-stat-number-section"><img src="http://uploads.webflow.com/56afc90be31ff4c8206cd8d4/570e6ff2bed4e12c2d18f0c9_green_triangle.svg" class="sustain-stat-arrow" style="opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);"><div class="sustain-number-text" style="transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);">13,174</div><div class="sust-stat-title grey">Propane cylinders</div><p class="sustain-stat-sub">13,174 propane cylinders used for home barbeques</p></div><div class="sustain-stat-number-section"><img src="http://uploads.webflow.com/56afc90be31ff4c8206cd8d4/570e6ff2bed4e12c2d18f0c9_green_triangle.svg" class="sustain-stat-arrow" style="opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);"><div class="sustain-number-text" style="transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);">751</div><div class="sust-stat-title grey">barrels</div><p class="sustain-stat-sub">751 barrels of oil consumed</p></div><div class="sustain-stat-number-section"><img src="http://uploads.webflow.com/56afc90be31ff4c8206cd8d4/570e6ff2bed4e12c2d18f0c9_green_triangle.svg" class="sustain-stat-arrow" style="opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);"><div class="sustain-number-text" style="transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);">113</div><div class="sust-stat-title grey">tons</div><p class="sustain-stat-sub">Recycling 113 tons of waste instead of sending it to the landfill</p></div></div><div class="sust-stat-title">Water treatment technologies:</div><p class="paragraph center stat">Combining existing Filtration technology with innovative, patented Electrocoagulation (EC) technology, we're taking steps to reduce water scarcity and pollution to help ensure water is managed sustainably as a shared resource across industry applications.</p><div class="w-row sustain-section-stat-area-2"><div class="w-col w-col-5 sustain-stat-area-1"><div class="sust-stat-title">Carbon regeneration:</div><div class="sustain-number-text-2" ><span class="sustain-stat-arrow-2"><img src="https://daks2k3a4ib2z.cloudfront.net/56afc90be31ff4c8206cd8d4/570e6ff2bed4e12c2d18f0c9_green_triangle.svg"></span>3,200,000</div><div class="sust-stat-title grey">LBS.</div><p class="sustain-stat-sub">RECYCLING carbon eliminates the high production costs and long-term environmental risks due to waste disposal. Bakercorp recycles 3.2 million lbs. each year.</p></div><div class="w-col w-col-7 sustain-stat-area-2"><div class="sust-stat-title">Water filtration and electrocoagulation:</div><div class="sustain-number-text-2"><span class="sustain-stat-arrow-2"><img src="https://daks2k3a4ib2z.cloudfront.net/56afc90be31ff4c8206cd8d4/570e6ff2bed4e12c2d18f0c9_green_triangle.svg"></span>220,752,000</div><div class="sust-stat-title grey">gallons</div><p class="sustain-stat-sub">EC technology treats contaminated groundwater and other industrial liquids. this technology is gaining ground for its cost savings and environmentally conscious approach. combined with our filtration systems, bakercorp recycles approximately 220,752,000 gallons of water annually.</p></div></div></div></div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/1.3.0/jquery.scrollmagic.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/1.3.0/jquery.scrollmagic.debug.js'></script>
<script src='http://stickyjs.com/jquery.sticky.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/shubhra/a-pen-by-shubhra-grKVew */
<style>
.sustain-section-stat-group > div:last-child{
  border-right: none;
  }

  @media (max-width: 767px){
  #sustain-secondary-nav-sticky-wrapper{
    display: none;
  }
  }
.arrow-down {
	width: 0; 
	height: 0; 
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid rgba(0, 0, 0, .5);
  display: block;
  margin-right: auto;
  margin-left: auto;
} 
</style>

/*Downloaded from https://www.codeseek.co/shubhra/a-pen-by-shubhra-grKVew */
// When the DOM is ready
$(function() {
  // Init Sticky Nav Controller  
  $(document).ready(function(){
    $("#sustain-secondary-nav").sticky({topSpacing:64});
  });  
  
    // Init Scroll-To Function
var $menu = $(".sustain-secondary-menu");

$menu.on("click","a", function(){
    var $this = $(this),
        href = $this.attr("href"),
        topY = $(href).offset().top - 151;
   
    TweenMax.to($(window), 1, {
        scrollTo:{
            y: topY, 
            autoKill: true
        }, 
        ease:Power3.easeOut 
     });
  
  return false;
});  

   // Add active class to nav links 
      $(document).on("scroll", onScroll);
  function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('.sustain-secondary-menu a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top - 151 <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('.sustain-secondary-menu a').removeClass("w--current");
          currLink.addClass("w--current");
        }
    }) ;
}
  
  // Init ScrollMagic Controller
var scrollMagicController = new ScrollMagic ();
  
  // Icon 1 Create Animation for 0.5s
var icon_eco_scroll_1 = new TimelineMax();
icon_eco_scroll_1.from($('#icon-eco-front-1'), 0.4, { opacity:0, scaleY:.5, scaleX:.5 }, 0)
icon_eco_scroll_1.to($('#icon-eco-front-1'), 0.7, { opacity:1, scaleY:1, scaleX:1, ease:Quad.easeOut })
icon_eco_scroll_1.from($('#icon-eco-back-1'), 0.9, { rotation:230, ease:Quad.easeOut },0)
icon_eco_scroll_1.from($('#icon-eco-back-1'), 0.9, { scaleY:.8, scaleX:.8, ease:Elastic.easeOut },0)

  // Create the Scene and trigger when visible
var scene1 = new ScrollScene({
    triggerElement: '#icon-eco-back-1',
 
    offset: -250 /* offset the trigger 150px below #scene's top */
  })
  .setTween(icon_eco_scroll_1)
  .addTo(scrollMagicController);
  
    // Icon 2 Create Animation for 0.5s
var icon_eco_scroll_2 = new TimelineMax();
icon_eco_scroll_2.from($('#icon-eco-front-2'), 0.4, { opacity:0, scaleY:.8, scaleX:.8}, 0)
icon_eco_scroll_2.to($('#icon-eco-front-2'), 0.7, { opacity:1, scaleY:1, scaleX:1, ease:Quad.easeOut })
icon_eco_scroll_2.from($('#icon-eco-back-2'), 0, { rotation:0, ease:Quad.easeInOut },0)
icon_eco_scroll_2.to($('#icon-eco-back-2'), 0.9, { rotation:-180, ease:Quad.easeOut },0)
icon_eco_scroll_2.from($('#icon-eco-back-2'), 0.9, { scaleY:.8, scaleX:.8, ease:Elastic.easeOut },0)
  // Create the Scene and trigger when visible
var scene2 = new ScrollScene({
    triggerElement: '#icon-eco-back-2',
    
    offset: -250 /* offset the trigger 150px below #scene's top */
  })
  .setTween(icon_eco_scroll_2)
  .addTo(scrollMagicController);
  
      // Icon 3 Create Animation for 0.5s
var icon_eco_scroll_3 = new TimelineMax();
icon_eco_scroll_3.from($('#icon-eco-front-3'), 0.4, { opacity:0, scaleY:.8, scaleX:.8 }, 0)
icon_eco_scroll_3.to($('#icon-eco-front-3'), 0.7, { opacity:1, scaleY:1, scaleX:1, ease:Quad.easeOut })
icon_eco_scroll_3.to($('#icon-eco-back-3'), 0.9, { rotation:-300, ease:Quad.easeOut },0)
icon_eco_scroll_3.from($('#icon-eco-back-3'), 0.9, { scaleY:.8, scaleX:.8, ease:Elastic.easeOut },0)
  // Create the Scene and trigger when visible
var scene3 = new ScrollScene({
    triggerElement: '#icon-eco-back-3',
    offset: -250 /* offset the trigger 150px below #scene's top */
  })
  .setTween(icon_eco_scroll_3)
  .addTo(scrollMagicController);
  
 // Number Arrows 1
  var statarrows = TweenMax.staggerFromTo('.sustain-stat-arrow', 0.5,
    {
    	scale: 1,
      y:-50,
      opacity:0,
    ease:Elastic.easeOut
    },
    {
      y:0,
      opacity:1,
    
    },
    0.4
);
  // Create the Scene and trigger when visible
  var scene4 = new ScrollScene({
    triggerElement: '.sustain-stat-arrow',
    offset: -250,
    //duration: 450 /* How many pixels to scroll / animate */
  })
  .setTween(statarrows)
  .addTo(scrollMagicController);

   // Number drop 1
  CSSPlugin.defaultTransformPerspective = 600; 
  var statnumbers = TweenMax.staggerFrom(".sustain-number-text", 1.5, { rotationX:-90, transformOrigin:"50% 0%", ease:Elastic.easeOut}, 0.4);
  
  // Create the Scene and trigger when visible
  var scene5 = new ScrollScene({
    triggerElement: '.sustain-stat-arrow',
    offset: -250,
    //duration: 450 /* How many pixels to scroll / animate */
  })
  .setTween(statnumbers)
  .addTo(scrollMagicController);
  
   // Number drop 2
    CSSPlugin.defaultTransformPerspective = 600; 
  var statnumbers2 = TweenMax.staggerFrom(".sustain-number-text-2", 1.5, { rotationX:-90, transformOrigin:"50% 0%", ease:Elastic.easeOut}, 0.4);
  
  // Create the Scene and trigger when visible
  var scene6 = new ScrollScene({
    triggerElement: '.sustain-number-text-2',
   offset: -350,
    //duration: 450 /* How many pixels to scroll / animate */
  })
  .setTween(statnumbers2)
  .addTo(scrollMagicController);
  
       // Logo Create Animation for 0.5s
var logo_eco_scroll = new TimelineMax();
logo_eco_scroll.from($('#eco-logo-2'), 0.9, { autoAlpha:0, ease:Quad.easeInOut }, .5)
logo_eco_scroll.from($('#eco-logo-3'), 0.7, {y: '-=40',autoAlpha: 0, ease:Power4.easeInOut},0.5);
logo_eco_scroll.from($('#eco-logo-1'), 0.9, { autoAlpha:0, ease:Quad.easeInOut },0)
logo_eco_scroll.from($('.hero-text'), 0.9, { autoAlpha:0, ease:Quad.easeInOut }, 0.9)
logo_eco_scroll.from($('.sustain-hero-button'), 0.9, { autoAlpha:0, ease:Quad.easeInOut }, 1.1)

  // Create the Scene and trigger when visible
var scene7 = new ScrollScene({
    triggerElement: '#eco-logo-1',
  })
  .setTween(logo_eco_scroll)
  .addTo(scrollMagicController);
  
  //Hero button hover animation
$(".sustain-hero-button").hover(over, out);
function over(){
  TweenMax.to(this, 0.5, {backgroundColor:"#FFF", scaleX: 1.1, scaleY: 1.1, color:"#000"})
}
function out(){
  TweenMax.to(this, 0.5, {backgroundColor:"#a0bf3b", scaleX: 1.0, scaleY: 1.0, color:"#FFF"})
}
  
  // Add debug indicators fixed on right side
    //scene1.addIndicators();
   // scene2.addIndicators();
   // scene3.addIndicators();
   //  scene4.addIndicators();
  //  scene5.addIndicators();
  //  scene6.addIndicators();
  // scene7.addIndicators();
});

Comments