Hi,
ich hab die Erweiterung in Contao 4.13.39 grad zum Probieren.
Das Ergebnis schaut so hier aus:
Anhang 27147
Wie bekomme ich das Ganze so hier hin? (ältere Contao-Version, dessen damalige Erweiterung in 4.13.39 nicht mehr läuft)
Anhang 27148
Druckbare Version
Hi,
ich hab die Erweiterung in Contao 4.13.39 grad zum Probieren.
Das Ergebnis schaut so hier aus:
Anhang 27147
Wie bekomme ich das Ganze so hier hin? (ältere Contao-Version, dessen damalige Erweiterung in 4.13.39 nicht mehr läuft)
Anhang 27148
Das wird wahrscheinlich mit entsprechendem CSS zu lösen sein, bei Parallax-Scrolling ggf. mit entsprechendem Javascript.
Mit Link zur Seite wird es leichter. Mit dem Bild müsste man raten, wie es eingebunden/umgesetzt ist.
Kleiner Nachtrag - ich kenne die Erweiterung nicht, sonst wüsste ich vielleicht wie das die Ereiterung umsetzt.
Hallo Leute,
ich probiere grad die Erweiterung Alpdesk-Parallaxe in Contao 5.13 aus und stoße auf das Eingangs geschilderte Problem.
https://community.contao.org/de/show...l=1#post583136
Das Hintergrund-Parallaxe-Bild wird nicht über die gesamte Breite angezeigt,
Anhang 27516
In den Artikel-Einstellungen steht das hier drin:
Anhang 27517
Hier der Link zur Website
Hat jemand eine Idee?
in deinem CSS wir die Breite begrenzt
Code:div.mod_article > * {
max-width: 1252px;
}
Oh, vielen Dank..
Weiß jemand, wie sich bei dieser Erweiterung [alpdesk-parallax] die Geschwindigkeit des Scroll-Effektes für das Hintergrundbild einstellen läßt?
Hier nochmal der Effekt auf der neuen Webiste
Es soll wieder so dargestellt werden wie in der Cotnao 4.13 Version, da wurde mit der Erweiterung hypergalaktisch/contao-parallax gearbeitet.
Hier die Seite zum Vergleich Der Scroll-Effekt wirkt irgendwie harmonischer.
Eventuell wirst du fündig in der GitHub Doku - Hast du da schonmal nachgelesen oder die Links verfolgt, welche Animationslibrary genutzt wird?Zitat:
Zitat von Schnippel
Für die Bewegungs-Animations-Effekte wohl diese hier : https://animate.style/
Aber gelten diese auch für den Parallaxe-Effekt für die Hintergrundbilder im Artikel-Element?
Wenn ja, wie stelle ich die wo ein?
Ideal wäre es, wenn man die Scroll-Geschwindigkeit des Hintergrundbildes irgendwie steuern könnte..
Müsstest du hier schauen, ob das JS das kann:Zitat:
Zitat von Schnippel
https://github.com/xprojects-de/alpd...eskparallax.js
Danke für den Hinweis.Zitat:
Ich habe in dieser Datei
Anhang 27520
folgendes geändert (von 0.25 auf 0.55)
Anhang 27521
jetzt sieht man schon mal mehr "Räumlichkeit", siehe hier
Wie lässt sich beim Scrollen des Parallaxe-Bildes die Bewegung noch etwas smoother einstellen?
Welcher Code muß da wie noch verändert werden?
Hier der js-Code
Code:$(document).ready(function () {
(function () {
if (!('requestAnimationFrame' in window)) {
return;
}
$.fn.isInParallaxViewport = function () {
var elementTop = $(this).offset().top;
var elementBottom = elementTop + $(this).outerHeight();
var viewportTop = $(window).scrollTop();
var viewportBottom = viewportTop + $(window).height();
return elementBottom > viewportTop && elementTop < viewportBottom;
};
$.fn.getParallaxScrollOffset = function () {
var diff = ($(this).offset().top - $(window).height());
if (diff < 0) {
diff = 0;
}
return diff;
};
var parallaxElements = [];
var visibleElements = [];
var processParallaxScheduled;
var factor = 0.55; // von 0.25 auf 0.55 geändert, wegen Parallax-Scroll-Effekt
function prepareBackgroundvAlign(nodeHeight, srcHeight, vAlign, sizeModus) {
var yPos = 0; // top
if (sizeModus === 'cover') {
return yPos;
}
if (vAlign === 'center') {
yPos = Math.floor((nodeHeight / 2) - (srcHeight / 2));
} else if (vAlign === 'bottom') {
yPos = Math.floor(nodeHeight - (srcHeight));
}
return yPos;
}
function scrollParallax() {
for (var i = 0; i < parallaxElements.length; i++) {
var parent = parallaxElements[i].node.parentNode;
if ($(parent).hasClass('parallax')) {
if ($(parent).isInParallaxViewport() && !checkVisibleExists(parallaxElements[i].node)) {
visibleElements.push({
node: parallaxElements[i].node,
parent: parent,
vAlign: parallaxElements[i].vAlign,
hAlign: parallaxElements[i].hAlign,
sizeModus: parallaxElements[i].sizeModus,
coverH: parallaxElements[i].coverH,
elementH: parallaxElements[i].elementH
});
}
}
}
cancelAnimationFrame(processParallaxScheduled);
if (visibleElements.length) {
processParallaxScheduled = requestAnimationFrame(updateVisibleElements);
}
}
function checkVisibleExists(element) {
for (var i = 0; i < visibleElements.length; i++) {
if (visibleElements[i].node === element) {
return true;
}
}
return false;
}
function updateVisibleElements() {
for (var i = 0; i < visibleElements.length; i++) {
setPosition(visibleElements[i]);
}
}
function setPosition(element) {
if (element.parent.getBoundingClientRect().top > $(window).height()) {
return;
}
var vAlign = parseInt($(element.node).attr('data-parallax-valign'));
var hAlign = $(element.node).attr('data-parallax-halign');
var vParallax = $(element.node).attr('data-vparallax');
var scrollOffset = $(window).scrollTop() - $(element.parent).getParallaxScrollOffset();
var motion = (vAlign + (factor * scrollOffset));
if (element.vAlign === 'bottom' && element.sizeModus !== 'cover') {
motion = (vAlign + (-factor * scrollOffset));
}
$(element.node).css({
backgroundPositionY: motion + 'px'
});
var motion_h = hAlign;
if (vParallax === 'left' && element.hAlign !== 'center') {
motion_h = (-motion) + 'px';
} else if (vParallax === 'right' && element.hAlign !== 'center') {
motion_h = ($(window).width() - motion) + 'px';
}
$(element.node).css({
backgroundPositionX: motion_h
});
}
function initParallax() {
parallaxElements = [];
visibleElements = [];
$('.has-responsive-background-image').each(function () {
var el = $(this);
var node = el.find('div.parallax-bgimage');
if (node !== null) {
var parallaxActive = node.data('isparallax');
var sizeModus = node.data('sizemodus');
var hAlign = node.data('halign');
var vAlign = node.data('valign');
var src = node.data('src');
var srcHeight = node.data('srcheight');
node.css({
backgroundImage: 'url(' + src + ')',
backgroundSize: sizeModus
});
if (parallaxActive === 1) {
var coverH = 0;
var elementH = $(this).outerHeight();
if (sizeModus === 'cover') {
var coverH = elementH + (elementH * factor) + (factor * $(window).height());
var coverTop = -(coverH - elementH);
node.height(coverH);
node.css({
top: coverTop,
backgroundPositionY: '0%'
});
}
node.attr('data-parallax-valign', prepareBackgroundvAlign(node.height(), srcHeight, vAlign, sizeModus));
node.attr('data-parallax-halign', hAlign);
parallaxElements.push({
node: node[0],
vAlign: vAlign,
hAlign: hAlign,
sizeModus: sizeModus,
coverH: coverH,
elementH: elementH
});
scrollParallax();
} else {
node.css({
backgroundPositionX: hAlign,
backgroundPositionY: vAlign
});
}
}
});
}
initParallax();
if (!parallaxElements.length)
return;
$(window).on('scroll', scrollParallax);
$(window).on('resize', initParallax);
})();
});