Тёмный

Scrolling Logo using Gallery Section in Squarespace [Jan 2022] 

Will Myers
Подписаться 4,5 тыс.
Просмотров 14 тыс.
50% 1

Code: www.will-myers.com/articles/s...
/* DESCRIPTION */
This is an update to my previous Scrolling Logo in Squarespace Tutorial. This tutorial walks you through creating your own Auto Scrolling Logo Slider on your website. We’ll be using a Squarespace 7.1 gallery section to get this done.
/* ADDITIONAL LINKS */
Plugin Store: www.will-myers.com/products
Learn: www.will-myers.com/newsletter
Newsletter: www.will-myers.com/learn-css-...

Наука

Опубликовано:

 

6 авг 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 45   
@abi-at-WillMyersSupport
@abi-at-WillMyersSupport 2 года назад
Hi all, in an effort to provide quicker responses to your comments, we need to update this channel to a “Brand” account. Unfortunately this means any previous comments left by Will are going to be deleted. If you’re watching this video and it looks like a question or comment has gone unanswered, please ask again and we will respond as soon as we can! We will be updating this account on July 20th, 2022. Thanks for your understanding!
@sambaker.1
@sambaker.1 Год назад
Brilliant stuff Will, followed a few of your videos already and bought a couple of your custom plugin codes on your website! Super easy and very useful, thanks so much!
@DiamondBFarm1994
@DiamondBFarm1994 2 года назад
THANK YOU! This saved me so much time and headache! You are the best! You definitely gained a follower!
@Annastasia13
@Annastasia13 Год назад
Thank you so much! such a great resource and so generous of you to provide it for free 🙏
@jamessbca
@jamessbca Год назад
This is outstanding. Exactly what I needed. And it works. Thank you!!!!
@whousefilms
@whousefilms 2 года назад
This is awesome! Thank you.
@chanelbrookelyn
@chanelbrookelyn 7 месяцев назад
Thank you so much!! Super helpful!
@ashleycarloni2227
@ashleycarloni2227 Год назад
Thank you for this!
@nemz_yts
@nemz_yts Месяц назад
Top tier 👌🏽 Thanks
@julianmeyer-oven8729
@julianmeyer-oven8729 2 месяца назад
Awesome. My first ever "code". Thank you !
@will-myers
@will-myers 2 месяца назад
Super exciting!
@Simone-pz4gb
@Simone-pz4gb 5 месяцев назад
Thank you so much! 🙂
@mvddic
@mvddic 8 месяцев назад
THANK YOU! I really didn't wanna have to pay for one. You rule.
@torreyjaycreative-squaresp9071
@torreyjaycreative-squaresp9071 2 года назад
Thank you SO much for this video! is there a way to make it to where its a seamless scroll without the pause? I played with adjusting the speed but it wasn't that scrolling text banner effect I was hoping for.
@leletomii
@leletomii Год назад
I am wondering the same, was this answered?
@DrewMcKechnie
@DrewMcKechnie 2 года назад
Will, this is awesome. Do you know how to change the "active alignment" of the image during the scroll? For example, your script defaults to a centered active alignment, and I was wondering if I coud do one that was left-aligned (like the option provided in the 7.0 templates). It looks like there's a script dynamically calculating a negative left offset value based on the image width and the viewport width. Anyway...bonus points! :-)
@kondjanegongo796
@kondjanegongo796 2 года назад
Will your a lifesaver. Works like a charm. How do you change the spacing between the logos
@KellyAnneMcDowell
@KellyAnneMcDowell 3 месяца назад
Was there a response to this? I am also curious how to change the spacing between the logos to give them a little room
@marissagoodmanthieriot4393
@marissagoodmanthieriot4393 10 месяцев назад
Hi, this was very helpful. I used this to make a beautiful auto scrolling gallery. There is a small glitch Im hoping you can help me with. Every time the rotation lands back on the first image, the screen does a little flash. Is there a way to get rid of that?
@abi-at-WillMyersSupport
@abi-at-WillMyersSupport 9 месяцев назад
Hey Marissa, if you could reach out via our Support page (linked in our Website Footer) we can take a look.
@gavinburke2572
@gavinburke2572 2 года назад
thank you for all your videos they have been a great help to me the last two weeks at new job. I am having trouble with this one however, my company won't yet upgrade to premium squarespace level so cannot use the code the way you have shown in Advanced settings. i tried to do with Design - Custom CSS - Paste in there but gives error missing opening '{'. When i include this opening and closing i get syntax error message ?
@IndieRockLover100
@IndieRockLover100 Год назад
THIS WAS SO FUCKING AMAZING. seriously simple and LOOKS AMAZING. THANK U A MILLION TIMES THANK U THANK U THANK U THANK U.
@jeremy000
@jeremy000 Год назад
Thanks very much. Sorry if I'm missing something, but Is there a way to put horizontal padding between images?
@abi-at-WillMyersSupport
@abi-at-WillMyersSupport Год назад
Hey Jeremy, the easiest way to do this would be to add that space on the image that you upload itself.
@ehanson
@ehanson 6 месяцев назад
Is there a way to make the gallery scroll smoothly, without stopping for each image?
@abi-at-WillMyersSupport
@abi-at-WillMyersSupport 5 месяцев назад
Hey, unfortunately not, that isn't something we have control over with this code.
@vdodan
@vdodan 2 года назад
You could do the squarespace home-page next. I bet you'll find a lot of non-standard features to explain. The hero image has a scrolling-container. The 3rd child has a hiding title and some on-scroll animations. And as you keep scrolling there's some text animation and some mask-animations. I personally am interested in the hero-image container scroll z-index mumbo-jumbo.
@vdodan
@vdodan 2 года назад
@@will-myers Yes, in chunks, but it could round up as a nice playlist "The 20+ secrets Squarespace doesn't want you to know" :))
@jobbentren9694
@jobbentren9694 7 месяцев назад
Hi! Very helpful video! Question though, is there a way to make this not look crazy when people are using their phones? It seems as if the images become huge and the automatic scrolling does not work.
@abi-at-WillMyersSupport
@abi-at-WillMyersSupport 6 месяцев назад
Hey, if you could reach out via our Support Page on our website we can take a look to see if what you're seeing is expected behaviour.
@StartupSupportCenter
@StartupSupportCenter 2 месяца назад
Great stuff! How do I add padding between logos?
@will-myers
@will-myers 2 месяца назад
Hey, this is something that is very fiddly with the Gallery Sections. Unfortunately the best option is to manually add the spacing into the image itself that you upload.
@Driskillfilms
@Driskillfilms 2 года назад
Where do we put this code if the scrolling section will be on the home page? I'm not seeing a gear for this area?
@maxwellkorn9956
@maxwellkorn9956 Год назад
Go to Home -> Settings -> Advanced -> Code Injection and put all his code in the "Header" section!
@Marketingforthenow
@Marketingforthenow Год назад
I have multiple gallery sections on one page and if I use this bit of CSS it changes them all. How do I change this so it only changes one of the galleries? .gallery-reel { height: clamp(75px, 25vw, 200px) !important; padding: 17px 0px !important; }
@abi-at-WillMyersSupport
@abi-at-WillMyersSupport Год назад
Hey Steven, you'll want to use the specific Section ID's of each gallery section to only target certain galleries.
@goateeguyreviews9663
@goateeguyreviews9663 5 месяцев назад
is there a way to add space between the logos?
@will-myers
@will-myers 4 месяца назад
Hey, unfortunately this isn't something the tutorial covers. We recommend adding the extra white space to the image itself.
@user-wf3tk2pd9g
@user-wf3tk2pd9g 6 дней назад
Hi there! Is there an update to this since Gallery no longer exists in 7.1?
@will-myers
@will-myers День назад
Hey, Gallery Sections still exist, they're under the 'Images' option when adding a new section.
@magdiel007
@magdiel007 Год назад
How do i make it move slowly and smoothly
@santiskiffa
@santiskiffa Год назад
same question here - and how to add margin between the logo's ..
@abi-at-WillMyersSupport
@abi-at-WillMyersSupport Год назад
Hey, unfortunately with this tutorial we can't alter the smoothness of the scroll.
@abi-at-WillMyersSupport
@abi-at-WillMyersSupport Год назад
@@santiskiffa hey, the easiest way is to add space on the actual image, its difficult to add a margin with this tutorial
@santiskiffa
@santiskiffa Год назад
@@abi-at-WillMyersSupport thank you for replying!!!
Далее
51 Squarespace Tips for Creating an Amazing Website
18:32
Auto Scrolling List Sections in Squarespace 7.1
7:19
Schoolboy - Часть 2
00:12
Просмотров 7 млн
Мой инстаграм: v1.ann
00:13
Просмотров 105 тыс.
Animated Scrolling Logos in Squarespace 7.1
8:03
Просмотров 17 тыс.
Create Stylish Pricing Tables in Squarespace
12:08
Просмотров 7 тыс.
Different Logo on Each Page Squarespace 7.1
2:48
Просмотров 18 тыс.
Create a Mega Menu in Squarespace 7.1
13:19
Просмотров 22 тыс.
Stop, Intel’s Already Dead!
13:47
Просмотров 536 тыс.
КАКОЙ SAMSUNG КУПИТЬ В 2024 ГОДУ
14:59
Чем нельзя протирать экран?
0:44
Мой новый мега монитор!🤯
1:00
Просмотров 2,5 млн
Самая редкая видеокарта NVIDIA
1:00
iPhone 14 китайский сборка!
1:00
Просмотров 140 тыс.