Is it possible to make this type of portfolio-style layout?

Ask the community
,
1

I love the simplicity of this page and want to recreate it on my site, but am not sure how to do so.
https://www.made-studio. eu/projects/chiva-house-i-kengo-kuma

Specifically I am looking at having pinned text on the right-hand side of the page, with scrolling images on the left that auto-size to fill the rest of the screen.

2

Hi,

Currently, it’s only possible to pin elements within the editor using its properties as indicated here , however there isn’t a way to pin or unpin an element with code.
You may be able to achieve a similar layout by pinning the text element and then hiding the element once you scroll to a certain pixel on the page where the full gallery will be displayed using the scrollBy() function.

I hope this was helpful!
Good luck!

3

Thanks, this has definitely gotten me started. How do I get the scrollBy() function to hide the element after the user has scrolled? Currently it is automatically scrolling the page to a certain pixel location

https://www.danielpolk.com/ohana

import wixWindow from 'wix-window';
wixWindow.scrollTo(0, 500)
    .then(() => {
            $w("#text3").hide("fade");
            $w("#vectorImage1").hide("fade");
} );
4

You need to put your code inside of the page’s onReady() function. Something like this:

import wixWindow from'wix-window';

$w.onReady(function () {
    wixWindow.scrollTo(0, 500)   
    .then(() => {
        $w("#text3").hide("fade");
        $w("#vectorImage1").hide("fade");} );
});

I don’t know if that helps, but I’m just showing the correct location for the code.

5

To follow up: I ended up using an anchor combined with the onViewportLeave() and onViewportEnter() functions to get the desired effect.

$w.onReady(function () {
    $w('#anchor1').onViewportLeave((event) => {
        $w("#text3").hide("fade");
    });
});

$w.onReady(function () {
    $w('#anchor1').onViewportEnter((event) => {
        $w("#text3").show("fade");
    });
});