diaaannna

Hey there! I'm currently trying to add this Codepen to my site and I'm having some issues. Would really appreciate any help: https://codepen.io/vikram-rajan/pen/dyqRGQm

On 5/27/2021 at 8:39 AM, Wolfsilon said:

Hello,

To install this plugin, just make sure that you are using a javascript enabled subscription, I believe that it is available on the Business plan. After you've set up your layout, I would then install the plugin because it will sometimes cause issues with the editor mode and drag-and-dropping blocks. The code I will provide uses several 'Script libraries. The first being, Jquery, a Jquery Easing library, and the Scrollify library. 

Start by navigating on your website. Home > Settings > Advanced > Code Injection.

To install the 'Scripts, copy and paste the following in your "Header Code Injection" field:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.21/jquery.scrollify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js" integrity="sha512-0QbL0ph8Tc8g5bLhfVzSqxe9GERORsKhIn1IrpxDAgUsbBGz/V7iSav2zzW325XGd1OMLdL4UiqRJj702IeqnQ==" crossorigin="anonymous"></script>

Immediately following those links, you'll begin setting up the functions, events, and features for Scrollify. Copy and paste the following code:

<script>
  $(document).ready(function() {
    $.scrollify({
      section: ".page-section",
      sectionName: ".page-section",
      easing: "jswing",
      scrollSpeed: 800,
      standardScrollElements: ".swiper-wrapper",
      offset: 0,
      overflowScroll: true,
      setHeights: false,
      scrollbars: true,
      touchScroll: false,
       before: function() {
        $('.page-section').removeClass('active')
        current = $.scrollify.current();
        current.addClass('active')
      },
    });
  });
</script>

Here, we're telling Scrollify the objects or sections that should be identified and what the app should do with them. Essentially, we need each ".page-section" to be scroll-snapped into position. If you've taken a look at the Scrollify website, you'll see all of the options and methods that can be applied. You'll also have a better description of what they do. I've included a full code that I've used in the past because it provides a good example for demonstrating the flexibility of Scrollify.

For example: I have a page that uses a "Swiper" carousel for a touch enabled/mouse-wheel scrolling gallery. Scrollify will let me identify this as a "standardScrollElement" and it won't snap to the next section when a user is interacting with that gallery. You can remove this if you have no "micro-interactions" on your website or use it for certain circumstances. Otherwise, when a user scrolls, it will snap it to the next section. Scrollify is good about knowing if a section is "long" and will let users scroll normally through longer sections or sections with long paragraphs by using the "overflowScroll" option, which is currently set to "true". 

The "scrollSpeed" is a number that you can play around with, the larger the number, the slower the scroll transition. The "easing" setting is set to "jswing" which is the name of the transition and part of the easing library we installed at the top of this code. You can view all of the easing names and swap them interchangeably if you prefer a different transition. You can find the names to swap here. Just use the drop-down menu to test them.

For me, I found that when using the plugin on mobile devices, it wasn't always ideal for mobile users. Most mobile devices already have a "smooth" scroll when they flick up or down, so I disabled the ability for mobile users see the effect by setting "touchScroll" to "false". Scrollify defaults with updating the "hash" for each scrolled section and indexes them automatically based on the number of sections available on a single "page". Each section that a user is currently viewing has an "active" class. This is useful for triggering animations or other functions as they are scroll-snapped into view but you can remove this function by removing these lines: 

 before: function() {
        $('.page-section').removeClass('active')
        current = $.scrollify.current();
        current.addClass('active')
      },

As I said, there are many different options and default settings and I encourage you to experiment with them but hopefully this helps you get up and running!

Hope this helps,

-Dan

Hey @Wolfsilon! Just had a quick question about this. Is there a way to disable this effect in edit mode? It can get kinda annoying to have sections snapping while trying to make updates. Would really appreciate any insight on this. Thanks so much in advance! 😊

2 hours ago, creedon said:

SS is making changes all the time and that is why your code stopped working.

Change the following...

#page .page-section .section-background {
background: transparent !important;
}

...to...

#page .page-section .section-border,
#page .page-section .section-background

  {
  
    background : transparent;
    
    }

Watch out for the unneeded use of !important.

Let us know how it goes.

Yeah, I figured the issue had to be a result of Squarespace making changes.

But this worked perfectly! Thanks so much! 😊

58 minutes ago, creedon said:

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Oops! I thought I added the site URL when I made the post. The site's live already at: https://www.vitalmusic.com/

Thanks for letting me know!

Hey everyone! I was wondering if anyone has any solutions for the issue I'm running into. I have a background image that spans the entire homepage. It was working fine up until a few days ago, but now the image won't load in. 

Here's the code snippet I used:

#collection-62ad24adc2341363832f702f{
#siteWrapper, #page, body {
background-image:url(https://static1.squarespace.com/static/629fc86d51f5e1642d21c366/t/62c6116c75e51d5206ce36aa/1657147761583/background.png)!important;
background-size: cover!important;
}
}

#page .page-section  {
background: transparent!important;
}

#page .page-section .section-background {
background: transparent !important;
}

I also attached a screenshot of the homepage when it was working as planned. Thanks so much for any help you can provide!

On 8/10/2022 at 7:56 PM, tuanphan said:

Did you solve? It looks fine to me

Thanks so much! Yes, I was able to figure it out after a bit more playing around. 🙂

Site URL: https://www.dianaoviedo.work/

Hello! I was wondering if anyone had any idea how I can fix this issue I'm having with the image blocks on my homepage. I've really tried everything I could think of CSS-wise and have come up with nothing that seems to work. 

The problem: The image blocks are all slightly different heights, despite being the same size images. And this causes the bottom of the images to be misaligned. The tops of all the images are all at the same level, but the bottoms are not. 

Any help you can provide would be greatly appreciated! 😊

My site: https://www.dianaoviedo.work/