Custom module style for parallax effect

Everything to do with Joomla! 4.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Post Reply
Donethat
Joomla! Explorer
Joomla! Explorer
Posts: 388
Joined: Fri May 30, 2008 12:36 pm
Location: Redhill
Contact:

Custom module style for parallax effect

Post by Donethat » Wed Sep 28, 2022 10:10 am

I'm trying to create a module style to use for banner images with a parallax effect.

I have created this

Code: Select all

<div class="moduletable <?php echo htmlspecialchars($params->get('moduleclass_sfx'), ENT_COMPAT, 'UTF-8'); ?>">
	<div class="parallax-window" style="height:400px" data-position="center center" data-parallax="scroll" data-natural-height="380" data-image-src="/images/banners/Gallery.jpg">&nbsp;</div>
	<?php if ((bool) $module->showtitle) : ?>
		<div>
			<div>
				<?php echo $module->title; ?>
			</div>
		</div>
	<?php endif; ?>
			<?php echo $module->content; ?>
		
</div>
Which works fine provided when the parallax.js script is loaded. You'll spot it has a pre defined image and what I would like to be able to do is use the background image that is selected in Module options instead.

Any ideas?
Perfection is a state of mind, not reality
www.cavespider.co.uk

Donethat
Joomla! Explorer
Joomla! Explorer
Posts: 388
Joined: Fri May 30, 2008 12:36 pm
Location: Redhill
Contact:

Re: Custom module style for parallax effect

Post by Donethat » Wed Sep 28, 2022 10:56 am

Of course I'm open to other ways of applying a parallax effect to the background image of a custom module
Perfection is a state of mind, not reality
www.cavespider.co.uk

Donethat
Joomla! Explorer
Joomla! Explorer
Posts: 388
Joined: Fri May 30, 2008 12:36 pm
Location: Redhill
Contact:

Re: Custom module style for parallax effect

Post by Donethat » Thu Sep 29, 2022 2:42 pm

I've had to go the CSS route which makes it tough for a client to edit. Using the selector :after and enter the second line that way does work, but far from ideal.
Perfection is a state of mind, not reality
www.cavespider.co.uk

User avatar
AMurray
Joomla! Exemplar
Joomla! Exemplar
Posts: 8150
Joined: Sat Feb 13, 2010 7:35 am
Location: Australia

Re: Custom module style for parallax effect

Post by AMurray » Thu Sep 29, 2022 9:41 pm

There are plugins you can use to do the parallax effect:

https://extensions.joomla.org/instant-s ... D=parallax
Regards - A Murray

Donethat
Joomla! Explorer
Joomla! Explorer
Posts: 388
Joined: Fri May 30, 2008 12:36 pm
Location: Redhill
Contact:

Re: Custom module style for parallax effect

Post by Donethat » Fri Sep 30, 2022 9:50 am

Thanks Murray

Yes they are and I've looked through them. Many simply fix the background image, some aren't J4 compatible and others are just too much. I was looking for a simple solution that my clients could easily use. Add image and everything else is set to go. Aikon used to have a solution but they appeared to have closed shop.
Perfection is a state of mind, not reality
www.cavespider.co.uk


Post Reply

Return to “Templates for Joomla! 4.x”