Website template based on this link

Tips and Tricks
1

I’m after building a site link this Jaywing - Award Winning Interiors & Architecture - 93ft

Basically the sections of the page (or blocs) lock to the height of the screen and settle on each section.

Can this be done using standard blocs at all, or does it need lots of code, is it even possible in the current version of the app?

Cheers

2

Hi @Stubbsy,

/ *****

It should also be noted before hand, that many consider this style of effect faulty concerning usability practices and usability adherence.

***** /

Having said that:

The effect you wish to emulate is commonly referred to as scroll jacking (etc.,). Most libraries you find require a specific setup for usage. One library that should work currently with Blocs is – Scrollify. Since with it you just need to assign a class and then configure the code setup with desired options and methods.

There may be others also with a similar setup as Scrollify that would also work with Blocs. But Scrollify is the first one that came to mind which should work easily with the current Blocsapp version using easy implementation inside of the app, without needing to do post export modifications. One possible drawback to Scrollify however is it also highjacks the browser back button. So as you scroll I don’t think you can return to the previous section (hashtag) via the browsers back button, at least with a quick glance of the samples I have seen.

The page link you referenced in your above post actually uses a different one called Fullpage.js which does the same effect but the required setup is a bit different, it and others use a common parent container, etc., so the setups of some are not as easy or even possible to use with the current Blocsapp UI structure. But some do in fact offer other nice features which Scrollify appears not to.

There are many others to be found regarding existing plugins and libraries out there. If you desire to use a different one then you just need to check and understand what the setup and usage is and how they would work and fit in with the current Blocsapp’s capabilities and UI structure.

So anyway back to the desired effect and Blocs:

Here is the generic non-Blocs example of Scrollify , so if the Scrollify effect is what you want , then …

Here is the Blocs implementation of " Scrollify ", via a simple 3 Step tutorial:

  1. Set each main parent Bloc you use to – Appearance > Padding > FullScreen , then design each Bloc according to your desires.
  • Appearance-Padding-FullScreen
  1. In the Sidebar, assign each parent Bloc a class of “scrollify-full-height” ( Caution: read ** Note below ** )
  • Sidebar-Assign-CSS-Class
  1. Put the following below script in: Page Setting > Add Code > Footer ( ** You can add whatever Scrollify options and methods you desire for the below configuration, per their documentation. ** )

Code:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.19/jquery.scrollify.min.js"></script>
<script type="text/javascript">
    $(function() {
        $.scrollify({
            section: ".scrollify-full-height",
        });
    });
</script>
  1. Preview in Browser (with an internet connection - as the library is referenced and pulled from a CDN). You can change that if desired to be local in your project. ** But it must be viewed in a browser currently, as it won’t work correctly when viewed in app with the current in app Blocs Preview Mode.

If it seems complicated, its actually really only 3 simple steps + preview , when you understand the NOTE below about some Blocs that use Blocs Groups.

** NOTE:

You’ll need to avoid assigning the defined class “scrollify-full-height” mentioned above in #2, to multiple Blocs contained in Bloc Groups such as the Structure Blocs #2, #3, #4, #5, or any of the others like Article Blocs #2 & #4 - which are pre-divided inside a Bloc Group.

Too my knowledge there is no current way to assign a class to the parent Bloc Group in the app, or is that incorrect @norm? So if you would happen to assign it to each Bloc of the Bloc Group and not just the parent or first Bloc in the group - left side, you will get instances of dead scroll attempts that occur and do nothing with Scrollify. So the user will need to scroll multiple times to continue down the page, which is wrong. But if you avoid doing that (described below) it will work fine with Blocs.

So just to clarify further regarding how it pertains to Step #2:

  • For Blocs that contain Bloc Groups, like the Structure Blocs #2, #3, #4, #5, or the Article Blocs #2 & #4, etc. Only assign the “scrollify-full-height” class (in step #2 above) to the leftmost parent Bloc in those that use Bloc Groups as shown below, when designing with these Blocs in your page layouts and using Scrollify.

Structures-with-Bloc-Groups
Structures-with-Bloc-Groups1042×201 7.12 KB

Articles-with-Bloc-Groups
Articles-with-Bloc-Groups846×210 8.02 KB

Because each of those are wrapped in a Bloc Group as seen in the exported code:

Bloc-Group

Which currently we cant access that via the app UI.

Hopefully, Blocs 3 will make many things easier and provide all the required entry points for working with all the available JS & CSS plugins and libraries which can be commonly found, so current restrictions will no longer be an issue.

Anyway, I hope that above little 3 Step tutorial helps your efforts, with creating the effect and site you are after.

:wink:

4 Likes
3

Thanks for the reply, I’ll have a look and see if I can suss it out.

:+1:

4

You’re welcome @Stubbsy, hope you accomplish what you were seeking.

@mackyangeles,

I now see you too asked about this previously, so perhaps this thread may help you in some way also.

1 Like