MORE WORK
Juste 3d Spinner

Juste Coconut Water
Responsive Website.

Given the task bringing Juste Coconut Water’s new packaging to life we worked with TwoFromTwo to bring Juste to the web with a splash.

In the final version of this website we decided to use window scroll as the action for spinning the package.

This was achieved by taking the current scrollTop position & converting that into a percentage of the total website height.


// Update total scroll distance. 
scrollTop = $(document).scrollTop();
// Calculate total scroll percentage 
scrollPercentage = scrollTop / pageHeight;

From there we assigned a panel number that correspond to 36 product renders


// Convert Scroll Percentage into Panel Number   
var panelNumber = Math.floor((scrollPercentage) *36);

and converted that into a selector


// Convert to selector
var panelToShow = '.js_render_' + panelNumber;

then all that is left to do is hide all other panels and show the one that corresponds to our current scroll position.


// Hide all panels, show only current panel. 
$('.js_renders').hide();
$(panelToShow).show();

and of course, run these actions when the user scrolls.


// Run the function on scroll.       
$(window).scroll(function() {
 scrollActions();  
});

The final result looking something like this.


var justeScrollSpin3D = function() {

  var scrollPercentage,
      scrollTop;
  
  var scrollActions = function() {
	  
    // Update total scroll distance. 
    scrollTop = $(document).scrollTop();
	  
    // Calculate total scroll percentage 
    scrollPercentage = scrollTop / pageHeight; 
    
    // Convert Scroll Percentage into Panel Number   
    var panelNumber = Math.floor((scrollPercentage) *36);
   
    // Convert to selector
    var panelToShow = '.js_render_' + panelNumber;
      
    // Hide all panels, show only current panel. 
    $('.js_renders').hide();
    $(panelToShow).show();
           
  };
  
  // Run the function on scroll.       
  $(window).scroll(function() {
    scrollActions();  
  });
  
};

justeScrollSpin3D();

The example to the right is using an current mouse X position in place of scrollTop. We also developed a drag interface but this was not used in the production version of the site.

  • Juste 100% Pure Coconut Water 0
  • Juste 100% Pure Coconut Water 1
  • Juste 100% Pure Coconut Water 2
  • Juste 100% Pure Coconut Water 3
  • Juste 100% Pure Coconut Water 4
  • Juste 100% Pure Coconut Water 5
  • Juste 100% Pure Coconut Water 6
  • Juste 100% Pure Coconut Water 7
  • Juste 100% Pure Coconut Water 8
  • Juste 100% Pure Coconut Water 9
  • Juste 100% Pure Coconut Water 10
  • Juste 100% Pure Coconut Water 11
  • Juste 100% Pure Coconut Water 12
  • Juste 100% Pure Coconut Water 13
  • Juste 100% Pure Coconut Water 14
  • Juste 100% Pure Coconut Water 15
  • Juste 100% Pure Coconut Water 16
  • Juste 100% Pure Coconut Water 17
  • Juste 100% Pure Coconut Water 18
  • Juste 100% Pure Coconut Water 19
  • Juste 100% Pure Coconut Water 20
  • Juste 100% Pure Coconut Water 21
  • Juste 100% Pure Coconut Water 22
  • Juste 100% Pure Coconut Water 23
  • Juste 100% Pure Coconut Water 24
  • Juste 100% Pure Coconut Water 25
  • Juste 100% Pure Coconut Water 26
  • Juste 100% Pure Coconut Water 27
  • Juste 100% Pure Coconut Water 28
  • Juste 100% Pure Coconut Water 29
  • Juste 100% Pure Coconut Water 30
  • Juste 100% Pure Coconut Water 31
  • Juste 100% Pure Coconut Water 32
  • Juste 100% Pure Coconut Water 33
  • Juste 100% Pure Coconut Water 34
  • Juste 100% Pure Coconut Water 35
  • Juste 100% Pure Coconut Water 36
Visit Juste