I had accidentally stumbled on this and have been using a form of this in my design on my product and product category pages. The light bulb didn't come on until I saw this video. Now I can do it on purpose from scratch, LOL. Thanks again always for the great information.
I just wish there was a two-sentence description of the actual technique, because my attention wanders in the parts that are about garden-variety Divi settings
Yes - does not work and it also has issues on real mobile - looks bad...I just gets the parallax with the internal preview... Testin on different mobiles : no chance. CSS might not be translated thoroughly.
Made something similar, parallax worked great. Everthing in place ... BUT, I want to have the modules with only 1 rounded corner instead of 4.... When I ask for only one rounded corder instead of 4, the parallax still works, but it forces on me 4 rounded corners. Did anyone else have the same issue?
I like your videos but is it realy necessary to set your text font over and over again? You realy should think about setting ist up bevore in Theme Customizer and put your Font Info inside the Video description. Makes your Tutorial shorter but better to follow on the important steps. Thanks.
Quick, simple tutorial for a feature that could be really useful for some projects. When did you start using vh so frequently? I'll have to search your videos to see if you did a tutorial about vh, em et al.
Hi, quick question: at the 9:56-9:58 mark there's a magical transition of the imagery-the entire flower arrangement appears, where it was not visible in each text module seconds before. Can you explain how that happens?
That's because he set the Parallax effect to use "CSS" option. I agree that this was not well explained, especially considering it was the core trick being taught.
Divi page builder not support other plugin element in page builder like Slider revolution, yith wishlist, yith compare, etc Then how it is better comparison to others. Don't be fool to others
Don't use VW units on the desktop if you are not going to do responsive sizes as well. The page will look like poop on the phone. Also, these headings make zero sense and DO NOT work with SEO. Elegant Themes needs to stop showing layouts that teach designers terrible practices for real-world design. No one would use this on a live site that has any intent to rank.
I had accidentally stumbled on this and have been using a form of this in my design on my product and product category pages. The light bulb didn't come on until I saw this video. Now I can do it on purpose from scratch, LOL. Thanks again always for the great information.
I just wish there was a two-sentence description of the actual technique, because my attention wanders in the parts that are about garden-variety Divi settings
You do not want to use this design anywhere on a website unless you change all of the headings. As is, the SEO value of the design is less than zero.
Excuse me if its just me, but is there a little bit missing between the steps near to 9:56 ?
This is what i've been also thinking. he has another video also that has a skipped part which is very important. I dont know why they keep doing this
Nice one, Mak! Thanks!
Hi folks, does anyone had hover effect issues? I set the hover and replace over the bg. image, but on hover it's not working in preview.
Yes - does not work and it also has issues on real mobile - looks bad...I just gets the parallax with the internal preview... Testin on different mobiles : no chance. CSS might not be translated thoroughly.
Hi Mac why you use VW and HW instead of PX ? thx
Can i suggest somenthing? The first thing of your videos should be a few seconds showing the effect, before all content. THX
That’s what the first ten seconds of the video show... the final result...
10 seconds!!
@@GodsAsaph In some of his videos, the preview was about 2 seconds
Do you know sir of any code/css to add to a row in Divi so background parallax images will work on mobile devices? Your videos ROCK!
jQuery(document).ready(function($) {
// Mobile device check
$is_mobile_device = null !== navigator.userAgent.match(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/);
if ($is_mobile_device) {
// Function to check if an element is in the Viewport
isInViewport = function(elem) {
elementTop = elem.offset().top, elementBottom = elementTop + elem.outerHeight(), viewportTop = $(window).scrollTop(), viewportBottom = viewportTop + $(window).height();
return elementBottom > viewportTop && elementTop < viewportBottom;
};
// Apply Parallax transform calculations when scrolling
$(window).scroll(function() {
$(".et_parallax_bg").each(function() {
var $this_parent = $(this).parent();
// Check if the parent element is on-screen
var $is_visible = isInViewport($this_parent);
if ($is_visible) {
element_top = $this_parent.offset().top,
parallaxHeight = $(this).parent(".et_pb_fullscreen").length && $(window).height() > $this_parent.innerHeight() ? $(window).height() : $this_parent.innerHeight(),
bg_height = .3 * $(window).height() + parallaxHeight,
main_position = "translate(0, " + .3 * ($(window).scrollTop() + $(window).height() - element_top) + "px)";
$(this).css({height: bg_height,"-webkit-transform": main_position,"-moz-transform": main_position,"-ms-transform": main_position,transform: main_position});
}
});
});
}
});
how the image arrange perfectly at four columns just by using css where is that css
Made something similar, parallax worked great. Everthing in place ... BUT, I want to have the modules with only 1 rounded corner instead of 4.... When I ask for only one rounded corder instead of 4, the parallax still works, but it forces on me 4 rounded corners. Did anyone else have the same issue?
looks very squished on the mobile version. Can you look at that pls. thanks
what does this vw stand for?
www.sitepoint.com/css-viewport-units-quick-start/
I like your videos but is it realy necessary to set your text font over and over again?
You realy should think about setting ist up bevore in Theme Customizer and put your Font Info inside the Video description. Makes your Tutorial shorter but better to follow on the important steps. Thanks.
Quick, simple tutorial for a feature that could be really useful for some projects. When did you start using vh so frequently? I'll have to search your videos to see if you did a tutorial about vh, em et al.
I'm trying to understand that too. Seems to me that Divi converts pixels into VW and VH behind the scenes anyway.
Great👍🏻
Very Cool. Does this work on mobile view? #mobilefirst2020
Hi, quick question: at the 9:56-9:58 mark there's a magical transition of the imagery-the entire flower arrangement appears, where it was not visible in each text module seconds before. Can you explain how that happens?
That's because he set the Parallax effect to use "CSS" option. I agree that this was not well explained, especially considering it was the core trick being taught.
Most all videos of this gentleman, I see in comments it doesn't work... And if something isn't responsive it's basically useless
Divi page builder not support other plugin element in page builder like
Slider revolution, yith wishlist, yith compare, etc
Then how it is better comparison to others.
Don't be fool to others
Don't use VW units on the desktop if you are not going to do responsive sizes as well. The page will look like poop on the phone. Also, these headings make zero sense and DO NOT work with SEO. Elegant Themes needs to stop showing layouts that teach designers terrible practices for real-world design. No one would use this on a live site that has any intent to rank.
nice