Hello, since nobody wrote anything, I actually figured it out by myself lol
So if you have a boxed layout, and you want the background (body) to be parallax, you need to do this:
(first of all I am talking about the garden template from joomlabuff .dot. com)
- first open the templates.jb_gardener.less.bootstrap.less file in your t3-assets/dev directory
- Copy the 7000+ row from @media (min-width: 1200px) (everything in that segment) to your template custom.css and paste it in the last row, and blend it out in your less file with "/" "/"
- now in your template /js folder, make a file named "parallax.js"
- copy this code into that .js file:
var $ = jQuery.noConflict();
jQuery(function($) {
$(window).scroll(function() {
parallax();
})
function parallax() {
var wScroll = $(window).scrollTop();
$('body.jb-boxed').css('background-position', 'center '+(wScroll*0.2)+'px') (where body.jb-boxed you can change to desired)
}
});
- save it. now go in your template/etc and open assets.xml
- there put in by scripts this:
<file>js/parallax.js</file>
there you go
Hope it helps someone, now your body background scrolls, you can set the parameter by the multiplier at the wScroll. For css in the custom.css you copied, make sure your picture etc stand like this about 🙂
(This you must also put into your custom css above)
body{
margin: 0;
background-color: #77aa77;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 2 1'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%2377aa77'/%3E%3Cstop offset='1' stop-color='%234fd'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23cf8' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23cf8' stop-opacity='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='2' y2='2'%3E%3Cstop offset='0' stop-color='%23cf8' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23cf8' stop-opacity='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='2' height='1'/%3E%3Cg fill-opacity='0.5'%3E%3Cpolygon fill='url(%23b)' points='0 1 0 0 2 0'/%3E%3Cpolygon fill='url(%23c)' points='2 1 2 0 0 0'/%3E%3C/g%3E%3C/svg%3E");
background-size: cover;
background-position:center;
background-attachment: scroll;
}
You can use your own image as well. Wow, cant even program, just figured it out. and it works, very happy, doesnt even need module to buy
kr