Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How to Create Full Page Sections / Single Page Website with Locked Scrolling / CSS Snapping


wearesilk

Question

11 answers to this question

Recommended Posts

  • 1

Hi @wearesilk. This can be accomplished. It is often called "scroll snapping" in modern-day CSS terms. However, CSS scroll snapping is still a bit unreliable and difficult to cross-browser test. So, another alternative is to use JavaScript. Here's an example of what can be accomplished using index page sections in Brine. Your specific application may require a lot more consideration (section length becomes a major concern with layouts like this that have to entirely fit on the screen, one-at-a-time). You'd most likely need to hire a developer to write the code to accomplish it, even if using third-party tools. If your layout is quite simple, it might be easier to write a custom implementation than to bend third-party tools to do your bidding.

Understanding that this doesn't help you accomplish it, I do hope this helps a little in that it shows that it's possible.

-Brandon

Edited by brandon

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Link to comment
  • 0
14 hours ago, brandon said:

Hi @wearesilk. This can be accomplished. It is often called "scroll snapping" in modern-day CSS terms. However, CSS scroll snapping is still a bit unreliable and difficult to cross-browser test. So, another alternative is to use JavaScript. Here's an example of what can be accomplished using index page sections in Brine. Your specific application may require a lot more consideration (section length becomes a major concern with layouts like this that have to entirely fit on the screen, one-at-a-time). You'd most likely need to hire a developer to write the code to accomplish it, even if using third-party tools. If you're layout is quite simple, it might be easier to write a custom implementation that bend third-party tools to do your bidding.

Understanding that this doesn't help you accomplish it, I do hope this helps a little in that it shows that it's possible.

-Brandon

Note: For the sake of others finding this, you might consider renaming the title of this question to something like " How to Create Full Page Sections / Single Page Website with Locked Scrolling / CSS Snapping "

Hey Brandon,

thank you so much.

this is exactly my idea os scrolling through my page.

is there any chance to see the code you use for this effect?

maybe i can play around and find the right code for my website.

and thanx for your advise, i have to work on my english to ask better questions 🙂

greetings from germany,

Dani!

Link to comment
  • 0

Hi Dani.

Unfortunately I'm a bit swamped at the moment, and the code used on the example site is a prototype, is over-complicated and prone to failure. It's probably not ready to be put into production, since it would need a few more features added to check for various conditions (like content length) and adjust accordingly.

I do hope to come back to this soon and post a more flexible solution.

Also, your English is much better than my German! My suggestion about the post title was simply to include as many similar terms as possible, so that others may be able to find your question even if they type in something slightly different.

-Brandon

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Link to comment
  • 1

If you're looking for an answer I used Brine.

Paste into header code injection.

Let me know how you go.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.19/jquery.scrollify.min.js"></script>
<script>
        $(function() {
          $.scrollify({
            section : ".Index-page",
          });
        });
</script>

Link to comment
  • 0
On 11/16/2019 at 6:55 PM, Justmadeit said:

If you're looking for an answer I used Brine.

Paste into header code injection.

Let me know how you go.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.19/jquery.scrollify.min.js"></script>
<script>
        $(function() {
          $.scrollify({
            section : ".Index-page",
          });
        });
</script>

This code works great on my site for the desktop version, but doesn't play nice with the mobile versions. Is there a way to disable it on the mobile version of the site?

Link to comment
  • 0
12 hours ago, NWCPhotos said:

This code works great on my site for the desktop version, but doesn't play nice with the mobile versions. Is there a way to disable it on the mobile version of the site?

Have you solved it yet?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 11/16/2019 at 1:55 PM, Justmadeit said:

If you're looking for an answer I used Brine.

Paste into header code injection.

Let me know how you go.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.19/jquery.scrollify.min.js"></script>
<script>
        $(function() {
          $.scrollify({
            section : ".Index-page",
          });
        });
</script>

Hi! 

I used this and it works great by how do I change it so it only scroll snaps to my home page instead of the other pages on my website? 

Thanks in advance 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...