0
Welcome Guest! Login
0 items Join Now

SOLVED How to Create a Full-Screen Parallax Background like Vermilian in Gantry 5

    • R2ba5Aq4's Avatar
    • R2ba5Aq4
    • Rocketeer
    • Posts: 75
    • Thanks: 10

    SOLVED How to Create a Full-Screen Parallax Background like Vermilian in Gantry 5

    Posted 9 years 7 months ago
    • Hi

      How do I create a full-screen parallax background like the one featured in the Vermilian template in Gantry 5?

      Thank you!
    • Last Edit: 9 years 7 months ago by R2ba5Aq4.
    • R2ba5Aq4's Avatar
    • R2ba5Aq4
    • Rocketeer
    • Posts: 75
    • Thanks: 10

    Re: SOLVED How to Create a Full-Screen Parallax Background like Vermilian in Gantry 5

    Posted 9 years 7 months ago
    • SOLVED. I was able to figure it out myself. If anyone else is interested in creating a full-screen parallax background like Vermilian in Gantry 5, here's how I did it:

      1. copied/pasted rt-parallax.js from Vermilion to templates/[TEMPLATE]/custom/js
      2. added rt-parallax.js script via Atoms
      3. modified rt-parallax.js as follows:

      ORIGINAL rt-parallax.js:
      ;((function(){
          Element.implement({
              parallax: function(){
                  var height, self = this,
                      firstTop = this.getPosition().y,
                      pos, top;
      
                  var update = function(){
                      pos = window.getScroll().y;
                      top = self.getPosition().y;
                      height = self.getSize().y;
                      speedFactor = self.get('data-parallax-delta') || 0.7;
      
                      if (top + height < pos || top > pos + window.getSize().y) {
                          return;
                      }
      
                      self.style.backgroundPosition = "0 " + -(Math.round((firstTop - pos) * speedFactor)) + "px";
                  }
      
                  RokScrollEvents.push(update);
                  update();
              }
          });
      
          window.addEvent('load', function(){
              document.getElements('.rt-parallax').each(function(element){
                  element.parallax();
              });
          });
      })());

      a. Line 12:

      Changed:
      speedFactor = self.get('data-parallax-delta') || 0.7;
      To (Adjust this value to suit your needs):
      speedFactor = -0.5;

      b. Line 27:

      Changed:
      document.getElements('.rt-parallax').each(function(element){
      To:
      document.getElements('.[YOUR_CSS_BODY_CLASS]').each(function(element){

      4. added the following inline javascript via Atoms:
      var RokScrollEvents = [], RTScroll = function(){
                  if (!RokScrollEvents.length) window.removeEvent('scroll', RTScroll);
                  else {
                      for (var i = RokScrollEvents.length - 1; i >= 0; i--){
                          RokScrollEvents[i]();
                      };
                  }
              };
              window.addEvent('load', function(){
              	window.addEvent('scroll', RTScroll);
              	RTScroll();
              });

      4. added the following css to templates/[TEMPLATE]/custom/scss/custom.css:
      .YOUR_CSS_BODY_CLASS {
          background-image: url(../../../../images/anyimage.png);
          /*overflow: hidden;*/
          background-repeat: no-repeat;
          background-position: center top;
          background-size: cover;
          background-attachment: fixed;
          min-height: 1000px;
      }

      Cheers!
    • Last Edit: 9 years 7 months ago by R2ba5Aq4. Reason: Clarity
    • The following users have thanked you: Marni J Derr, Unay Santisteban

    • M Jones's Avatar
    • M Jones
    • Sr. Rocketeer
    • Posts: 100
    • Thanks: 0

    Re: SOLVED How to Create a Full-Screen Parallax Background like Vermilian in Gantry 5

    Posted 8 years 6 months ago
    • Hi Guys,

      Thanks for posting this info.

      I am wondering how to complete step 4 which says "4. added the following inline javascript via Atoms"
      How is this done?

      Many Thanks

      Michael
    • Many Thanks

      Michael

Time to create page: 0.046 seconds