I have a header section with a background image and a element inside with a logo.
Now this logo is centered with jQuery in the middle of the section.
When I try to add a parallax effect to the logo it's not centered anymore because I use also a margin change for the parallax.
This is my code I also added a JS Fiddle Link ( the parallax effect is not working in the editor iframe so you have to open the example in a new window.
JS Fiddle Editor
JS Fiddle Show
Code:
// Viewport Height for head section
function viewport_height() {
var height = $(window).height();
var viewportHeight = (50 * height) / 100;
var viewportHeightInner = (50 * height) / 150;
var viewportHeightInnerMargin = (50 * height) / 300;
viewportHeight = parseInt(viewportHeight) + 'px';
viewportHeightInnerMargin = parseInt('-' + viewportHeightInnerMargin) + 'px';
$(".head").css('height',viewportHeight);
$(".head .background").css('height',viewportHeight);
$(".head .inner").css('height',viewportHeightInner);
$(".head .inner").css('width',viewportHeightInner);
$(".head .inner").css('margin-top',viewportHeightInnerMargin);
$(".head .inner").css('margin-left',viewportHeightInnerMargin);
}
// Resize head section on scale
$(document).ready(function() {
viewport_height();
$(window).bind('resize', viewport_height);
});
// Logo Parallax scroll
$(window).scroll(function(e){
if ($(window).width() > 800) {
$('.head .inner').css({
'margin-top' : +($(this).scrollTop()/2)+"px",
});
}
});
Rather than centering the green box with negative margins, try this centering method instead:
section.head .inner {
position: relative;
top: 50%;
left: 50%;
background-color: green;
-webkit-transform:translate(-50%, -50%);
-moz-transform:translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
-o-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
}
You'll have to edit the JS to remove the negative margins. Just remove these lines:
$(".head .inner").css('margin-top',viewportHeightInnerMargin);
$(".head .inner").css('margin-left',viewportHeightInnerMargin);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.