@russian-dima Acceuil | Better&Better | Architecte d’intérieur | Lyon | Matthieu Nicoletti |m6 (betterandbetter.fr)
I active that for a few min no more
@russian-dima Acceuil | Better&Better | Architecte d’intérieur | Lyon | Matthieu Nicoletti |m6 (betterandbetter.fr)
I active that for a few min no more
@edouard ok saw it.
After a few refreshings, now it works fine (i don’t know why).
@russian-dima After a few refreshing ? how ? ^^ Is the clearTimeout function not working, and after comprehending the function, it works out ? (actually i published a normal scroll after your message)
@russian-dima clearTimeout does’t seem to work ^^
var myvar
//scrolls to features
export function toPur_viewportEnter() {
$w("#Pur").scrollTo()
clearTimeout(myvar)
}
export function toPur_viewportLeave(event) {
clearTimeout(myvar)
}
export function Pur_viewportEnter(event) {
clearTimeout(myvar)
console.log("pur")
}
export function toHarmonie_viewportEnter() {
$w("#Harmonie").scrollTo();
clearTimeout(myvar)
}
export function toHarmonie_viewportLeave(event) {
clearTimeout(myvar)
}
I’ve put a console log, the console log appears, but it drags me to the 'harmony" strip, like it was not clearing
@edouard
Ok, forget all your attempts and all your current CODE.
I have played around a little bit, to help you to find a solution. It is still not a perfect working one, but it seems, that is exactly what you want.
I took the elements out of Ahmads example.
https://www.wix.com/velo-examples/full-screen-scroll
And here we go! —> EXAMPLE: https://www.media-junkie.com/scrolling-images
After every 3,5 secs a automatic scrolling to the right PIC should be done!
In my example you won’t need any —> "clearTimeouts"
@russian-dima How did you do that ? I’m smashing my head against the wall since 1 month on that !
@edouard Just used some →
Ok, before your head is a “mashed potatoe” here the working code…
import wixWindow from 'wix-window';
var scrollPosition = 0, scrollInterval = 50
$w.onReady(() => {
setInterval(show_scrollPosition, scrollInterval);
setInterval(checkPosition, 3000);
})
function show_scrollPosition() {
wixWindow.getBoundingRect()
.then((windowSizeInfo) => {
scrollPosition = windowSizeInfo.scroll.y;
console.log("Scroll-Position: ", scrollPosition)
});
}
function checkPosition() {
//Defining all Scroll-areas here.....
if(scrollPosition > 0 && scrollPosition < 500) {$w('#columnStrip1').scrollTo()} //Scroll-area-1
else if(scrollPosition > 500 && scrollPosition < 1000) {$w('#columnStrip2').scrollTo()} //Scroll-area-2
else if(scrollPosition > 1000 && scrollPosition < 1500) {$w('#columnStrip3').scrollTo()} //Scroll-area-3
}
You can improve this a lot! For example do all the “area-definitions automatically” and not manually in code (but this would be your next CHALLENGE ).
Good luck and happy coding! And perhaps this will be my next BEST-ANSWER (who knows xD).
my brain actually :
Can’t stand this website anymorre, it has been to much work for not a lot… I try your code out right now ! (painful that my work isn’t useful, even if it was almost working ! i’ll put it has hidden before to trash^^)
Yeah, the automated ‘find where to go’ will be a bit challenging !
But i notice a thing … it is based on scroll position ? Cause i’m working … with editor X viewport height ^^ (Part of this freaking challenge)
@edouard
Tell me if is also working the same way in Editor-X, or not (i do not use Editor-X) so it would be a good info for me.
damn good xD
How could you add it as a gif-animation ?
@russian-dima Ok, well it’s kinda working, but there is a issue with that viewport height ( when i squeeze the screen, the Y scroll change and so it doesn’t work the same anymore !).
With my little brain (actually in lava), how about the idea to sequence scroll position by percentage of viewport ? (dont know if it’s clear)
@edouard
Yes should be possible to do it in percentage, but it will get more complicated, for sure . Right now, it will be your own way to go. You have to master some chanllenges.
You can update this post, if you have some news on it😉
@russian-dima complication with this project, it seems that i made it true already ! I work on it and will be able to share a solution eventually !
@edouard
Allright! Good luck & happy coding!
@russian-dima
I’ll make a monument out of your greatness ! It FREAKING WORKS
var scrollPosition = 0,
scrollInterval = 2000,
windowHeight = 0,
windowPercent = 1,
scrollY = 0
$w.onReady(() => {
setInterval(show_scrollPosition, scrollInterval);
setInterval(checkPosition, 3000);
setInterval(() => show_scrollPosition(), scrollInterval);
$w("#text3").onClick(() => {
window.openLightbox('Menu');
})
})
function show_scrollPosition() {
window.getBoundingRect()
.then((windowSizeInfo) => {
windowHeight = windowSizeInfo.window.height
scrollPosition = windowSizeInfo.scroll.y;
if (windowHeight > 624) {
windowPercent = windowHeight / 624
} else if (windowHeight < 624) {
windowPercent = windowHeight / 624
}
console.log(windowPercent)
console.log("Scroll-Position: ", scrollPosition)
//console.log("wH: ", windowHeight)
});
}
function checkPosition() {
window.getBoundingRect()
.then((windowSizeInfo) => {
//Defining all Scroll-areas here.....
if (scrollY === windowSizeInfo.scroll.y) {
if (scrollPosition > 0 && scrollPosition < 500) { $w('#Pur').scrollTo() } //Scroll-area-1
else if (scrollPosition > 500 * windowPercent && scrollPosition < 1000 * windowPercent) { $w('#Harmonie').scrollTo() } //Scroll-area-2
else if (scrollPosition > 1000 * windowPercent && scrollPosition < 1500 * windowPercent) { $w('#Loft').scrollTo() } //Scroll-area-3
else if (scrollPosition > 1500 * windowPercent && scrollPosition < 2000 * windowPercent) { $w('#Elegance').scrollTo() } //Scroll-area-3
else if (scrollPosition > 2000 * windowPercent && scrollPosition < 2600 * windowPercent) { $w('#Science').scrollTo() } //Scroll-area-3
else if (scrollPosition > 2600 * windowPercent && scrollPosition < 3200 * windowPercent) { $w('#Betonne').scrollTo() } //Scroll-area-3
else if (scrollPosition > 3200 * windowPercent && scrollPosition < 4000 * windowPercent) { $w('#Work').scrollTo() } //Scroll-area-3
else if (scrollPosition > 4000 * windowPercent && scrollPosition < 4500 * windowPercent) { $w('#TopMenu').scrollTo() } //Scroll-area-3
scrollPosition = windowSizeInfo.scroll.y
} else if (scrollY !== windowSizeInfo.scroll.y)
{ scrollY = windowSizeInfo.scroll.y}
})
}
@edouard
Well done! You are a quick learner! (looks good) !
Now take your next challenge —> automatic area-definitions.
Some hints:
Try always to create a code which is as flexible, efficient & user-friendly as possible.
What do i mean?
Example: this part of your code…
before:
var scrollPosition = 0,
scrollInterval = 2000,
windowHeight = 0,
windowPercent = 1,
scrollY = 0
$w.onReady(() => {
setInterval(show_scrollPosition, scrollInterval);
setInterval(checkPosition, 3000);
after:
//User-Interface------------------------------
var scrollPosition = 0, //Starting Scroll-Position
scrollInterval = 2000, //Scroll-Position-check after a certain time-period
checkTimeInterval = 2000, //Position-check after a certain time-period
windowHeight = 0, // and so on....
windowPercent = 1,
scrollY = 0
//User-Interface------------------------------
$w.onReady(() => {
setInterval(show_scrollPosition, scrollInterval);
setInterval(checkPosition, checkTimeInterval);
The less manual defined variables you have inside the MAIN-CODE-BLOCK —> the more flexible your CODE will be at the end and everything will be able to be controlled right from the —> “User-Interface-Section”.
I hope you understand what i want to tell you.
And you also should give some comments into your own code.
The more your code grows up, the more difficult it will be to understand your own written code.
Good luck & and continue this way & you will become a good coder!