Animated text within Owl Carousel

[dml311071]

Hi,

How can you animate the text within the Owl carousel Particle? Currently I am working with Helium and trying to figure out two things

1) What makes the Home Particle Page allow the Navigation to sit within the Header? If it is yaml code then what is the syntax? I cannot find the code that allows this.
The Navigation Section is separate from the Header section yet the navigation appears to sith within it on the Helium Home Page

2) How does one then animate the text within the Header itself. Is it via CSS calls in the Owl carousel Particle Text or through some yaml coding that allows the animated text to sit within the Owl Carousel Paricle?

Great particles by the way!

Regards

David

[Tony]

Hi David,
Do you mean the carousel particle http://demo.joomlead.com/particles/index.php/particles/carousel ? Or do you mean the default carousel particle for Helium template ?

1. You can find it via template folder-> particles->owlcarousel.html.twig

For scss code, you can find it via joomla/templates/g5_helium/scss/helium/styles/helium-styles.scss line 45

You can see they add transparent header and add margin top for the sections/content below the header.

2. Do you want to change/modify the TEXT for the animation ?

NOTE: For core gantry5 theme/particles, you can get support from the Gantry5 website (Chatbox) https://gitter.im/gantry/gantry5

[dml311071]

Hi Tony,

Correct I working with custom variations on the Helium Template

Yes, thank you, that is enough info for me to figure it out. Basically I am attempting to use JL-Animated-Text within owl carousel and was trying to figure out how to embed one particle within another, if that is possible.

Regards

David

[dml311071]

Hi Tony

I have just looked through the files you pointed out and this has helped a great deal. I was almost thinking that I had misunderstood the gantry 5 framework altogether.

It appears that Home Particles has a specific scss rule for the nav menu forcing transparency and pulling the header (and therefore its background image when containing the Owl Carousel) up to sit behind the navigation for non mobile displays.

Thank you for the pointers. BTW I have now purchased the 1 year dev package! Great support

Regards
David

• This reply was modified 4 years, 6 months ago by dml311071.

[Tony]

You’re welcome David 🙂