Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • March 8, 2016 at 5:35 pm #595079
    Allegrif

    I currently have a background image on a ‘color section’. The guy I’m building the site for wants this background to crossfade from one image (black and white), to another (exact same, but in colour), with the content over the top remaining static – so not a slider. Any ideas? This one’s got me stumped.

    March 9, 2016 at 1:51 pm #595553
    Allegrif

    Nope?

    March 9, 2016 at 5:25 pm #595697
    Yigit

    Hi!

    Please edit your Color Section element and give it a unique ID – http://kriesi.at/documentation/enfold/wp-content/uploads/sites/2/2013/12/color-section-ID.png and then add following code to Quick CSS in Enfold theme options under General Styling tab

    #your-custom-id:hover .av-parallax-inner { background-image:url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png)!important; }
#your-custom-id:hover .av-parallax-inner, #your-custom-id .av-parallax-inner { transition: background 0.2s ease-in-out; -webkit-transition: background 0.2s ease-in-out; -moz-transition: background 0.2s ease-in-out; }

    Best regards,
    Yigit

    March 10, 2016 at 2:39 pm #596305
    Allegrif

    Thanks, I think there was a little misunderstanding there though. If you access the site now you’ll see what happens – the image changes when the cursor is over it.

    What I want to do is make one image load first, then after a couple of seconds, it automatically fades into the other. Is that possible?

    March 10, 2016 at 6:29 pm #596471
    Yigit

    Hi!

    I see. Please remove the code i posted above (but please keep the unique ID) and add following code to Functions.php file in Appearance > Editor

    
function avia_custom_background_change(){
?>
<script>
jQuery(window).ready(function(){
   setTimeout(function() {
        jQuery("#your-custom-id .av-parallax-inner").css('background-image','url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png)!important');
    }, 5000);
});
</script>
<?php
}
add_action('wp_footer', 'avia_custom_background_change');

    It will change background after 5second you can adjust 5000 as needed

    Best regards,
    Yigit

    March 10, 2016 at 6:41 pm #596488
    Allegrif

    Thanks, that doesn’t seem to work though?
    Alex

    March 10, 2016 at 7:06 pm #596502
    Yigit

    Hey!

    Do you mind creating a temporary admin login and posting it here privately so we can look into it?

    Cheers!
    Yigit

    March 10, 2016 at 7:09 pm #596505
    Allegrif

    Sure!

    March 10, 2016 at 7:21 pm #596512
    Yigit

    Hi!

    I adjusted the code in functions.php a little. Please review your website now.

    Best regards,
    Yigit

    March 10, 2016 at 9:17 pm #596568
    Allegrif

    Hi, thanks for that. It doesn’t fade though. I want a smooth transition over a few seconds, not just one image followed by the other. Think like a slide show with one slide fading into another over a 3 second period.

    Alex

    March 14, 2016 at 4:02 pm #597813
    Allegrif

    Hi Yigit,

    Have you seen my previous message?

    Alex

    March 15, 2016 at 3:47 pm #598430
    Yigit

    Hi!

    I edited the code in Functions.php file (and moved it a little higher), please review your website now

    Regards,
    Yigit

    March 15, 2016 at 4:13 pm #598446
    Allegrif

    Thanks, is there anyway to make the transition smoother though? For example, at the minute the transition only takes about half a second, we’d prefer it to take about 5 seconds, fading from one image to the other. Sorry for being such a pain!
    Alex

    March 21, 2016 at 3:29 pm #601283
    Yigit

    Hey!

    Sorry for the late reply!

    Have you decided to use another way? If you have not, please post the link to your example page and i can take another look :)

    Best regards,
    Yigit

    March 21, 2016 at 4:26 pm #601321
    Allegrif

    Hi Yigit, no worries. We decided to go with a different concept in the end. You can still help me though – I’m trying to remove the last bit of white from the bottom of this image: http://howard.alexanderfirth.com/brainstorm/

    We want the purple paint to touch the footer. At the minute there’s a small gap. Any ideas?

    Thanks,
    Alex

    March 21, 2016 at 4:30 pm #601326
    Yigit

    Hi!

    Please turn on custom CSS field for ALB elements – kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and then edit your column and give it a custom CSS class and then add following code to Quick CSS in Enfold theme options under General Styling tab

    .your-custom-column img { position: relative; bottom: -7px; }

    Regards,
    Yigit

    March 21, 2016 at 4:37 pm #601336
    Allegrif

    Thanks, but now the gap is just at the top instead :p

    March 21, 2016 at 4:39 pm #601339
    Yigit

    Hi!

    Whooopsie! :)
    Please change the code to following one 

    .image_page img {
    margin-bottom: -1px;
}

    Cheers!
    Yigit

    March 21, 2016 at 4:45 pm #601346
    Allegrif

    March 21, 2016 at 5:45 pm #601403
    Yigit

  • Author
    Posts
Viewing 20 posts - 1 through 20 (of 20 total)
  • The topic ‘Color section background image crossfade query’ is closed to new replies.