Aspire Parallax Effect?

Homepage › Community Forums › Aspire Theme Support › Aspire Parallax Effect?

Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 3, 2017 at 9:37 pm #20744
    Kelly
    Customer

      Although I really like the parallax effect used in the Aspire template, it’s problematic for me because the images I need to place in that section are landscaping images, which don’t seem to work well with this transition. Plus, I may also end up using a Soliquoy carousel.

      Is there anyway to eliminate the parallax effect in section 1 or am I better off not using the section 1 widget and starting with one of the other standard sections, like 2 or 3?

      Another option would be to fix the section-1 image to the bottom, so that the top is scrolling under the header. That would probably be my favorite approach, but I’d like to know how to achieve both solutions. Thanks!

      March 7, 2017 at 1:09 am #20790
      Wes
      Moderator

        Yes you can disable the Parallax. Take a look in your front-page.php file and remove or comment out this – 

        		//* Enqueue parallax script
		add_action( 'wp_enqueue_scripts', 'aspire_enqueue_parallax_script' );
		function aspire_enqueue_parallax_script() {

			if ( ! wp_is_mobile() ) {

				wp_enqueue_script( 'parallax-script', get_bloginfo( 'stylesheet_directory' ) . '/js/parallax.js', array( 'jquery' ), '1.0.0' );

			}

		}

        The background images are still set at a fixed position, so you’ll probably have to edit that part of the CSS too depending on how you want your images to look.

        March 7, 2017 at 1:29 am #20793
        Kelly
        Customer

          Hmmm. Maybe I should pick another, non-Parallax theme. Which other theme do you offer is closest to Aspire, in terms of being able to carryover my settings, but without the Parallax effect?

          March 7, 2017 at 1:40 am #20794
          Kelly
          Customer

            Oops! Never mind. I was using an HTML comment block, instead of PHP. Works great! Thanks!

            March 7, 2017 at 1:51 am #20795
            Kelly
            Customer

              [UPDATE]
              I spoke too soon. The fixed image in Section 1 is going to be a problem because it’s not scaling properly. Should I try to patch that or is it better to select another theme that may work better for this particular website?

              March 8, 2017 at 2:25 am #20811
              Wes
              Moderator

                It looks like it’s working normally on my end. The background image covers each side full width. I’m viewing from a large monitor/browser, but I’m also resizing the browser and watching the image resize and adjust to the change in browser width. How is it showing up on your end, and how are you expecting it to show up exactly?

                Responsive Background Images sometimes aren’t able to display every pixel of the full image (top to bottom, left to right) because of the Browser. The browser’s job is to scale the image the best it can without overstretching, or shrinking the image too much. It’s supposed to resize the image the best it can without losing quality.

                So if you upload any type of full width image on any theme or website, the same thing will happen. If you have an image that is very wide, but doesn’t equally contain much height, then the height will struggle to show in certain positions especially if you have text/content inside the same div container…..Vice versa.

                The only way an image will show the entire image from top to bottom, left and right, is if you upload an Inline Image instead of a Background Image. The issue with inline images, is that it’s much more difficult to add text on top of an inline image. You would need to make some customizations to do something like that. The recommended way is to use a full width image as a background image since it’s already setup for you in the theme.

                March 8, 2017 at 2:38 am #20812
                Kelly
                Customer

                  Thanks for the explanation. I think I can make this work, I just need to select images that will work with various screen sizes when scaled up or down. It looks like when the image is scaled down to an iPhone I lose the left and right sides and when the image is scaled up to say a 27″ iMac I lose the top. As you know, some of that can be corrected by modifying this code:

                  .front-page-1 {
    max-height: 740px;
    position: relative;
}

                  But what do I do if I decide to replace the background image in Front-Page-1 with a Soliquoy carousel? How would I do that?

                  March 8, 2017 at 11:55 am #20818
                  Wes
                  Moderator

                    I’ve never used the Soliquoy plugin so I don’t know how it works exactly….but I’m sure we can get it working with the theme (I’ve seen others do it). If you plan to have it set to full width, then we’d have to remove the fixed width inside the Front-Page-1 widget so that anything that goes inside of it will show up at full width.

                    You’d also need to remove the code that produces the background image uploader (easy to do).

                    Let me know once you add the plugin and we can take a look at it.

                  • Author
                    Posts
                  Viewing 8 posts - 1 through 8 (of 8 total)
                  • You must be logged in to reply to this topic.