Hi Eugene M. thanks for your reply. I tried already the code above and your explanation but it doesn’t work. I try to use your code step by step until the point of the triggers… I fully rename all my elements strips, pages names etc and everything was ok until I place the trigger_1_2 etc code.
Your site is amazing CONGRATS !!! The scroll down and up mouse actions is exactly what I am trying to do on my website. Please be so kind and copy paste your fully code here…
My apologies for asking but I have spend to many hours to find a solution with out any result.
Hi Lily,
The right link to the website https://www.metateks.net/
My code is really the same as in the example above. Tomorrow I will post the code here.
Hi Eugene,
Thank you for your post, I was blocked since few days on the smooth scrolling (I was blocked on 2 slide moves). Very good idea to replace one anchor by a strip hidden !
I would like to second Lily’s request! I’m trying to piece together the code from what you have pasted, but I am getting some issues with variables not being defined properly. Please paste the updated working code if you don’t mind!!
Hi there,
My current code for 6 slides is as follows.
But as I wrote earlier, I’m ready to add you as a co-author of the site. To do this, just write me an email (which you use to sign into your account) to hello@wixcraft.com
// FUNCTIONS
var trigger_1_2 = true;
function scroll_1_2() {
if (trigger_1_2) {
$w("#anchor2").scrollTo();
}
}
var trigger_2_1 = true;
function scroll_2_1() {
if (trigger_2_1) {
$w("#anchor1").scrollTo();
}
}
var trigger_2_3 = true;
function scroll_2_3() {
if (trigger_2_3) {
$w("#anchor3").scrollTo();
}
}
var trigger_3_2 = true;
function scroll_3_2() {
if (trigger_3_2) {
$w("#anchor2").scrollTo();
}
}
var trigger_3_4 = true;
function scroll_3_4() {
if (trigger_3_4) {
$w("#anchor4").scrollTo();
}
}
var trigger_4_3 = true;
function scroll_4_3() {
if (trigger_4_3) {
$w("#anchor3").scrollTo();
}
}
var trigger_4_5 = true;
function scroll_4_5() {
if (trigger_4_5) {
$w("#anchor5").scrollTo();
}
}
var trigger_5_4 = true;
function scroll_5_4() {
if (trigger_5_4) {
$w("#anchor4").scrollTo();
}
}
var trigger_5_6 = true;
function scroll_5_6() {
if (trigger_5_6) {
$w("#anchor6").scrollTo();
}
}
var trigger_6_5 = true;
function scroll_6_5() {
if (trigger_6_5) {
$w("#anchor5").scrollTo();
}
}
var trigger_6_7 = true;
function scroll_6_7() {
if (trigger_6_7) {
$w("#anchor7").scrollTo();
}
}
var trigger_7_6 = true;
function scroll_7_6() {
if (trigger_7_6) {
$w("#anchor6").scrollTo();
}
}
// SLIDE 1
export function anchor1_viewportLeave() {
scroll_1_2();
trigger_1_2 = true;
trigger_2_1 = false;
setTimeout( () => {
$w("#anchor1UP").show();
}, 1400);
}
export function anchor1UP_viewportEnter() {
$w("#anchor1").scrollTo();
trigger_2_3 = false;
}
// SLIDE 2
export function anchor2_viewportLeave() {
scroll_2_3();
trigger_2_3 = true;
trigger_3_2 = false;
setTimeout( () => {
$w("#anchor2UP").show();
}, 1400);
}
export function anchor2UP_viewportEnter() {
$w("#anchor2").scrollTo();
trigger_3_4 = false;
}
// SLIDE 3
export function anchor3_viewportLeave() {
scroll_3_4();
trigger_3_4 = true;
trigger_4_3 = false;
setTimeout( () => {
$w("#anchor3UP").show();
}, 1400);
}
export function anchor3UP_viewportEnter() {
$w("#anchor3").scrollTo();
trigger_4_5 = false;
}
// SLIDE 4
export function anchor4_viewportLeave() {
scroll_4_5();
trigger_4_5 = true;
trigger_5_4 = false;
setTimeout( () => {
$w("#anchor4UP").show();
}, 1400);
}
export function anchor4UP_viewportEnter() {
$w("#anchor4").scrollTo();
trigger_5_6 = false;
}
// SLIDE 5
export function anchor5_viewportLeave() {
scroll_5_6();
trigger_5_6 = true;
trigger_6_5 = false;
setTimeout( () => {
$w("#anchor5UP").show();
}, 1400);
}
export function anchor5UP_viewportEnter() {
$w("#anchor5").scrollTo();
trigger_6_7 = false;
}
// SLIDE 6
export function anchor6_viewportLeave() {
scroll_6_7();
trigger_6_7 = true;
trigger_7_6 = false;
setTimeout( () => {
$w("#anchor6UP").show();
}, 1400);
}
export function anchor6UP_viewportEnter() {
$w("#anchor6").scrollTo();
}
// HIDE
export function anchor1_viewportEnter() {
$w("#anchor1UP").hide();
}
export function anchor2_viewportEnter() {
$w("#anchor2UP").hide();
}
export function anchor3_viewportEnter() {
$w("#anchor3UP").hide();
}
export function anchor4_viewportEnter() {
$w("#anchor4UP").hide();
}
export function anchor5_viewportEnter() {
$w("#anchor5UP").hide();
}
export function anchor6_viewportEnter() {
$w("#anchor6UP").hide();
}
Great job Eugene! I’ve been trying to recreate this effect for some days now and finally decided to go on forums and stuff until i found your post. I also had some problems with the anchor that was supposed to scroll up and I didn’t think of using a strip instead. Although, I used a line not a strip because wix didn’t allow me to put a strip above another one (I was already using one on my site), or maybe it does but I wasn’t able to make it work. Anyway if someone has the same issue it might help what I did.
Thanks again Eugene!!
*correction: I am using two strips already, one above another, and apparently a third one is not possible.
I have managed to recreate the code and it worked just fine until I realized that there is conflict with the anchor menu that I have added, meaning that anchor menu does not obey it just gets you to the next slide and not at the selected (e.g. you cannot go from top of the page directly to slide 5) and that is an issue for me at this point … anyhow eventually I decided not to use the scroll code. But now that I understand the code I will try on other sites that will suit better.
Thank you so much for the help again.
Best Regards,
Lily
.