Nachtrag:
Beim scroll-Event gibt es kein Event-Bubbling.
Die beiden Bibliotheken stören sich deshalb gegenseitig beim scroll-Event.
Ich habe lokomotive.js anstatt smoothScroll/SimpleParallax verwendet,
weil es ähnliche Funktionien zur Verfügung stellt.
Grüße D-Jay
Hallo Blickwinkelkanone!
Danke erst einmal für die Hilfe!
const scrollbar = Scrollbar.init(element, options);
document.querySelector("body").setAttribute("scroller", true);
Das sorgt ja erst einmal dafür, dass die Scrollbar initialisiert wird und dann erscheint.
Er liegt am Event Bubbling. Der Parallax-Effect wird nicht mehr vollständig durchgereicht,
sondern endet nach einer bestimmten Zeit.
Grüße D-Jay
Hallo,
ich bin eigentlich Designer, und ich habe ein hartnäckiges Problem mit Events,
und ich kriege es einfach nicht richtig hin.
Nun zum Problem:
Ich habe zwei Bibliotheken, für die Scroll-Funktion und für den Parallax-Effekt.
Beide Bibliotheken wollen nicht miteinander arbeiten, so dass der Parallaxeneffekt nicht auftritt.
Bei Größenänderung funktioniert es wieder für Sekunden.
Vielleicht kann mir jemand bei meinem Problem helfen.
In jedem Fall wäre ich dankbar für jeden Tipp.
Hier ist mein Code:
<!DOCTYPE html>
<html lang="de" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0; }
html, body {
min-height: 100%;
font-size: 16px;
font-size: 1rem;
background: #92D8F1;
}
section {
position: relative;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
overflow:hidden;
}
[scroller='true']
#scrollbar-wrapper
{
height: 100vh;
width: 100vw;
}
</style>
</head>
<body>
<div class="page-wrapper">
<div id="scrollbar-wrapper">
<section><img class="thumbnail" src="https://picsum.photos/id/209/1920/1280" alt="image"></section>
<section><img class="thumbnail" src="https://picsum.photos/id/1019/1920/1280" alt="image"></section>
<section><img class="thumbnail" src="https://picsum.photos/id/1026/1920/1280" alt="image"></section>
<section><img class="thumbnail" src="https://picsum.photos/id/111/1920/1280" alt="image"></section>
<section><img class="thumbnail" src="https://picsum.photos/id/149/1920/1280" alt="image"></section>
<section><img class="thumbnail" src="https://picsum.photos/id/177/1920/1280" alt="image"></section>
<section><img class="thumbnail" src="https://picsum.photos/id/184/1920/1280" alt="image"></section>
<section><img class="thumbnail" src="https://picsum.photos/id/209/1920/1280" alt="image"></section>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/smooth-scrollbar/8.5.2/smooth-scrollbar.js'></script>
<script src="https://cdn.jsdelivr.net/npm/simple-parallax-js@5.2.0/dist/simpleParallax.min.js"></script>
<script src="script.js"></script>
</body>
</html>
/* S r o l l b a r */
var element = document.querySelector("#scrollbar-wrapper");
var options = {
// damping: 0.25,
damping: 0.05,
thumbMinSize: 5,
renderByPixel: true,
alwaysShowTracks: false,
continuousScrolling: true
};
/* Scrolling*/
document.addEventListener("DOMContentLoaded", function () {
setTimeout(function () {
const scrollbar = Scrollbar.init(element, options);
document.querySelector("body").setAttribute("scroller", true);
scrollbar.update();
}, 4000);
//event.stopPropagation();
});
/* Parallax*/
document.addEventListener("DOMContentLoaded", function () {
setTimeout(function () {
var image = document.getElementsByClassName('thumbnail');
new simpleParallax(image, {
scale: 2.5,
delay: 6,
transition: 'cubic-bezier(0,0,0,1)'
});
},
0);
//event.stopImmediatePropagation()
});