This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Tagged: ,

Transparency over parallax

  • Creator
    Topic
  • #19467
    askwpgirl
    Participant

    Hi Jason,

    I am creating a page that sort of looks like this site:

    https://ozocoffee.com/

    Note when you scroll down the page the first section has parallax scroll enabled, so the second section appears to display on top of the first as you scroll down. Since the second section has an opacity transparency, then it shows the first section slideshow underneath it as you scroll down.

    I expected that the new Template Builder opacity/transparency with the parallax functionality would work the same but I can’t figure out how to do that. It seems that if you set transparency on Section 2, it blends with the background color of Section 3 rather than having Section 2 appear transparent OVER Section 1 during the parallax scroll as on the Ozo site.

    See screenshot using the Business Homepage #1. http://postimg.org/image/5bdgbv4xr/

Viewing 6 replies - 1 through 6 (of 6 total)
  • Author
    Replies
  • #19475
    Jason Bobich
    Keymaster

    Hey Angela,

    No mater how you’ve setup a section’s background — opacity, background images, parallax, whatever — no section should be overlapping any other section.

    In my understanding of graphics in general, what you’re linking to here isn’t a parallax effect. The parallax effect is where we slightly modify the y-axis of the image’s position to move at a slower rate than the user is scrolling the page. This creates an illusion of 3D depth with 2D objects.

    But, I think you could create something sort of similar to what you’re linking to. In this site, the slider is simply in a fixed position, and so everything that comes after is just being scrolled above it, with a higher z-index.

    Now, with my Layout Builder, you can’t set any individual element fixed (like the top slider in the site you linked to), but you can make the background image of the section fixed, which will give a somewhat similar effect.

    So, let’s try an experiment. Put all of your elements in the same section. Then, on that single section setup a background image, and don’t use the parallax effect, but just position it fixed.

    Then, if you want that background image to show more initially at the top of the section (above the section’s elements), you can add padding to the top of the section.

    Then, in your section you can use a “Columns” element and set a transparent background color on the column display options. But the problem with this is that this will not stretch elements within the entire width of the layout, as if they were separate sections. There are also a few other elements that allow you to set background colors like Promo Box, Content, and Icon Box elements.

    Note: While doing this, I just discovered a bug, that when you set an opacity on the background color of a column of the Columns element, it doesn’t work..

    This is an example of what I’ve been playing with using various transparent items over top a parallax background, trying to get creative.

    #19477
    Jason Bobich
    Keymaster

    Here’s another method through customization you could create something more accurately like the site you originally linked to…

    Step 1: In your custom layout’s first section, add the “Simple Slider (Full Width)” element.

    Step 2: Don’t configure any kind of background options or anything in that first section. Just add the CSS class “section-fixed”.

    Screenshot of section’s display options: http://www.uploadblvd.com/uploads/image_547a5d072076f.png

    Step 4: Suck the layout up into the header (see screenshot below).

    Step 3: Then in your child theme’s stylesheet, this is where you can make it all come alive. Here’s a staring point for the CSS to make it happen.

    .section-fixed {
    	position: fixed;
    	top: 0;
    	right: 0;
    	left: 0;
    }
    .section-fixed + .element-section {
    	margin-top: 360px; /* The offset of the second element from the top of its normal position to account for the first element being fixed. Tweak depending on how large your first element is. */
    }

    The whole page’s layout would look something like this:

    #19481
    askwpgirl
    Participant

    Thanks, Jason. I am having so much fun redesigning the candy site I use as the practice project for my class.

    I realized the same thing after I wrote to you that I needed to put all the elements in the same section and have one fixed. I will try these suggestions.

    I see the error on the column transparency. On individual elements like the icon boxes, the transparency works fine. On a column, however, the HTML outputs as:

    style=”background-color: #ffffff; background-color-2: rgba(255,255,255,0.6);”

    So, it gets the correct CSS for the background-color but puts in a weird background-color-2 for the transparency.

    Attached is the candy site in practice. The white area for Recent News isn’t really transparent. I hacked the HTML in Firebug to get it to show transparent, but let me know when that’s fixed. Thanks!

    http://postimg.org/image/8wqlv08ih/

    #19482
    Jason Bobich
    Keymaster

    So, it gets the correct CSS for the background-color but puts in a weird background-color-2 for the transparency.

    Yeah, it’s supposed to remove the “-2”. The reason is so that if you’re viewing in an old browser that doesn’t support rgba(), it’ll have a fallback of a solid color. It should look like:

    style="background-color: #ffffff; background-color: rgba(255,255,255,0.6);"

    I’ve got it fixed now, though, for beta2. If you want to just apply the fix yourself, here’s how.

    Open this file of the jumpstart parent theme:

    /framework/includes/layout.php

    And on line 893, find this:

    foreach ( $params as $key => $value ) {
    	$style .= sprintf( '%s: %s; ', $key, $value );
    }

    And change to this:

    foreach ( $params as $key => $value ) {
    	$key = str_replace('-2', '', $key);
    	$style .= sprintf( '%s: %s; ', $key, $value );
    }

    ====

    And the site is looking very cool!

    #19502
    askwpgirl
    Participant

    Thanks! I’m having fun with the new demo site and coming up with little CSS exercises for people. I’ll probably have a “Super User” demo site and a “Developer” demo site to show people what knowing some CSS can get you.

    I used the icon boxes, for example, and entered a value for the icon name instead of one of the FA icons. Then, set an image sprite with a bunch of vector graphics in it and added the CSS to call for each image in the child theme, e.g. fa-cake, fa-gingerbread, fa-lollypop. This lets people take advantage of the fun icon features in the Template Builder (left or above/backgrounds, etc.) but using their own icons.

    Anyway, fun stuff. You’ve given me something to look forward to coding for the next year! Gotta have some fun new toys to play with. 🙂

    #19505
    Jason Bobich
    Keymaster

    Awesome, glad to hear it!

Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.