Answer the question
In order to leave comments, you need to log in
Materialize Parallax have one problem?
Good morning guys help with one question.
I'm using Angular and I've also included materilize in addition, and from all this I need to materilize parallax.
And she has one cant, he does not immediately connect the css "transform3d" but only after scrolling the page, how can I make it connect this transform3d immediately and align the image.
Guys help, all examples are attached below.
<div class="parallax-container">
<div class="parallax"><img src="images/parallax1.jpg"></div>
</div>
;(function ($)
{
$.fn.parallax = function () {
var window_width = $(window).width();
// Parallax Scripts
return this.each(function(i) {
var $this = $(this);
$this.addClass('parallax');
function updateParallax(initial) {
var container_height;
if (window_width < 601) {
container_height = ($this.height() > 0) ? $this.height() : $this.children("img").height();
}
else {
container_height = ($this.height() > 0) ? $this.height() : 500;
}
var $img = $this.children("img").first();
var img_height = $img.height();
var parallax_dist = img_height - container_height;
var bottom = $this.offset().top + container_height;
var top = $this.offset().top;
var scrollTop = $(window).scrollTop();
var windowHeight = window.innerHeight;
var windowBottom = scrollTop + windowHeight;
var percentScrolled = (windowBottom - top) / (container_height + windowHeight);
var parallax = Math.round((parallax_dist * percentScrolled));
if (initial) {
$img.css('display', 'block');
}
if ((bottom > scrollTop) && (top < (scrollTop + windowHeight))) {
$img.css('transform', "translate3D(-50%," + parallax + "px, 0)");
}
}
// Wait for image load
$this.children("img").one("load", function() {
updateParallax(true);
}).each(function() {
if (this.complete) $(this).trigger("load");
});
$(window).scroll(function() {
window_width = $(window).width();
updateParallax(false);
});
$(window).resize(function() {
window_width = $(window).width();
updateParallax(false);
});
});
};
}( jQuery ));
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question