Joomla Templates Club 406,261 posts

[damaskmedia Friend damaskmediaJoin date: November 2014Posts: 39Downloads:4Uploads:18 Thanks: 9]

#203275

I have made a custom module and have added a background image

here is my code:

.parentdiv {

background-image: url(“http://creativeharmony.co.uk/CC/images/joomlart/church/social-media.jpg”);
background-size: cover;
background-position: 50% -55px;
background-repeat: no-repeat no-repeat;

}

How do i make the background have a parallax scrolling effect with the image?

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#557448

Perhaps one (or more) of the following resources may be helpful . . . .

http://davidwalsh.name/parallax

https://ihatetomatoes.net/simple-parallax-scrolling-tutorial/

http://callmenick.com/2014/07/15/simple-parallax-scrolling-effect/

http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique–net-27641

http://cdn.tutsplus.com/net/uploads/legacy/2138_SimpleParallax/Demo/index.html

1 user says Thank You to TomC for this useful post

1. damaskmedia

[damaskmedia Friend damaskmediaJoin date: November 2014Posts: 39Downloads:4Uploads:18 Thanks: 9]

#557451

HI Tom thanks for the quick response and the links

however, in the Uber Demo if you look at the Blocks CTA style-3 that already has a parallax image background.

so I was wondering if there was an easier way to implement this?

otherwise the easy alternative for me would be to install a third party parallax module which I already have

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#557468

Try this

.parentdiv {
background-image: url("http://creativeharmony.co.uk/CC/images/joomlart/church/social-media.jpg");
background-size: cover;
background-position: 50% -55px;
background-repeat: no-repeat no-repeat;
background-attachment:fixed;
}

2 users say Thank You to chavan for this useful post

1. damaskmedia
2. TomC

[damaskmedia Friend damaskmediaJoin date: November 2014Posts: 39Downloads:4Uploads:18 Thanks: 9]

#557471

wow! amazing worked perfectly

🙂

[pepperstreet Friend pepperstreetJoin date: April 2011Posts: 55Downloads:223Uploads:7 Thanks: 21 Thanked: 4 times in 1 posts]

#647188

Hello, just wanted to add my thoughts and investigations about CTA Style3 background FX.

As far as I know, the background DIV has the special CSS class: .bg-image
This class is used in the related UBER javascript. So, to get the real parallax effect which modifies the y-Position while scrolling, you have to apply this CSS class. Otherwise you stay with a simple fixed background. I assume, the integrated mobile device check disables the effect anyway.

BTW, this is the Script in action:
http://www.ianlunn.co.uk/blog/code-tutorials/recreate-nikebetterworld-parallax/

1 user says Thank You to pepperstreet for this useful post

1. Saguaros

[Author]

Posts