Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Support request] Section Slideshow Background

Home Forums Support Section Slideshow Background

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #493696
    Mike

    I have recently redesigned one of the websites I work on using GeneratePress sections and lightweight grid columns. I have a main section that uses an image as its background, I am then applying the following CSS to stlye it and make it full screen….

    .home #Home {
    	position: relative;
    	height: 96vh
    }

    My question is… can I have the background change every few seconds? Preferably with a nice animation…

    You may also notice I have a few lightweight grid colums with various services in them and background images. Is there any way in my hover CSS I can have a nice animation as the background tint over the image is removed?

    Thanks,
    Mike

    GeneratePress 2.0.2
    GP Premium 1.5.6
    #494015
    Tom
    Lead Developer
    Lead Developer

    Hey Mike,

    That would likely require javascript. You may be better off going with a slider plugin of some sort, as you could add your content to it and have the images rotate.

    What kind of animation are you looking for in the services section?

    #494277
    Mike

    Hello,

    Do you know of any slider plugins that will work well with GP sections and allow me to use that CSS to make them full screen?

    With regards to the animation, I would just like it to be a little slower. Instead of the tinted background being immediatly removed when the mouse hovers over, if there could be a little delay I think it would look a lot smarter.

    Thanks,
    Mike

    #494897
    Tom
    Lead Developer
    Lead Developer

    Most, if not all slider plugins will work nicely in GP and Sections. A lot of them will actually have a built in full height option as well.

    It’s a little complicated adding a transition to multiple backgrounds, but this may lay the groundwork for you: https://codepen.io/thebabydino/pen/AtzpB

    #495170
    Mike

    Hello Tom,

    I will look into the slider plugins and see what I can bodge together!

    With regards to the transition, I followed the link you sent and copied the exact code shown there into the Weddings service on my website, however it has had no effect. Any ideas why? I have checked a few times and it seems to be exactly the same!

    Thanks,
    Mike

    #495841
    Tom
    Lead Developer
    Lead Developer

    Unfortunately it’s only a proof of concept, not a plug-n-play type of code snippet.

    I just spent about half an hour on this and couldn’t achieve the result you’re looking for. It might be worth asking over on https://stackoverflow.com/.

    I would be interested in hearing if someone is able to do it 🙂

    #496038
    Mike

    Hello Tom,

    Wow! I have even stumped the pro! I actually did spend hours on it myself and was equally stumped!

    I may ask on stack overflow. If I ever come up with a solution I will be sure to post it here.

    Thanks,
    Mike

    #496352
    Tom
    Lead Developer
    Lead Developer

    Thank you! I’ll keep an eye out for solutions as well 🙂

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