A Pen by Shubhra

undefined

Forked from Kate's Pen BKrbEW.

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
  • 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.4d9d02092.css'>

  
  
</head>

<body>

  <div 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" data-pin-nopin="true"><img id="icon-eco-front-1" src="http://uploads.webflow.com/56afc90be31ff4c8206cd8d4/5710394e00ed0eb70b4e1f95_sustain%20icon%202%20front.svg" class="icon-eco-2"></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" data-pin-nopin="true"><img width="140" id="icon-eco-front-2" src="http://uploads.webflow.com/56afc90be31ff4c8206cd8d4/5710394f49c752fb5708eb2f_sustain%20icon%203%20front.svg" class="icon-eco-3"></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"><img width="140" id="icon-eco-front-3" src="http://uploads.webflow.com/56afc90be31ff4c8206cd8d4/5710394e398cc28d51192ee6_sustain%20icon%201%20front.svg" class="icon-eco-1"></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>
  <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='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/shubhra/a-pen-by-shubhra-ONEKvW */
// When the DOM is ready
$(function() {
  
  // Init ScrollMagic Controller
var scrollMagicController = new ScrollMagic.Controller();
  
  // 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, { scaleY:.8, scaleX:.8, ease:Quad.easeInOut }, 0)
icon_eco_scroll_1.to($('#icon-eco-front-1'), 0.7, { scaleY:1, scaleX:1, ease:Quad.easeInOut })
icon_eco_scroll_1.from($('#icon-eco-back-1'), 0.9, { rotation:230, ease:Quad.easeInOut },0)

  // Create the Scene and trigger when visible
var scene1 = new ScrollMagic.Scene({
    triggerElement: '#icon-eco-back-1',
    triggerHook: "0.7"
    //offset: -250 /* offset the trigger 150px below #scene's top */
  })
  .setTween(icon_eco_scroll_1)
  .addTo(scrollMagicController)
  .addIndicators({name: "scene1"})
  
    // 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, { scaleY:.8, scaleX:.8, ease:Quad.easeInOut }, 0)
icon_eco_scroll_2.to($('#icon-eco-front-2'), 0.7, { scaleY:1, scaleX:1, ease:Quad.easeInOut })
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'), .9, { rotation:-180, ease:Quad.easeInOut },0)

  // Create the Scene and trigger when visible
var scene2 = new ScrollMagic.Scene({
    triggerElement: '#icon-eco-back-2',
    triggerHook: "0.7"
    //offset: -250 /* offset the trigger 150px below #scene's top */
  })
  .setTween(icon_eco_scroll_2)
  .addTo(scrollMagicController)
  .addIndicators({name: "scene2"})
  
      // 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, { scaleY:.8, scaleX:.8, ease:Quad.easeInOut }, 0)
icon_eco_scroll_3.to($('#icon-eco-front-3'), 0.7, { scaleY:1, scaleX:1, ease:Quad.easeInOut })
icon_eco_scroll_3.to($('#icon-eco-back-3'), .9, { rotation:-300, ease:Quad.easeInOut },0)

  // Create the Scene and trigger when visible
var scene3 = new ScrollMagic.Scene({
    triggerElement: '#icon-eco-back-3',
    triggerHook: "0.7"
    //offset: -250 /* offset the trigger 150px below #scene's top */
  })
  .setTween(icon_eco_scroll_3)
  .addTo(scrollMagicController)
  .addIndicators({name: "scene3"})
  
});

Comments