-
Posts
14 -
Joined
-
Last visited
Recent Profile Visitors
1,459 profile views
Ad7am's Achievements
-
Ad7am reacted to a post in a topic: Add parallax scroll to image block (not section background)
-
JimmyWalter started following Ad7am
-
supportairlines started following Ad7am
-
Thanks for asking. The code above works fine. I'm just looking to target the entire row, or the 4th-6th and 10th-12th items, etc — just not by name as those images may change.
-
Ad7am reacted to a post in a topic: Display border around code block in edit mode only
-
For a gallery grid, I want to offset every other row so it's not a tic-tac-toe board. (I'm also changing the perspective to be 3D, but that's secondary.) Right now I'm targeting the specific images on my example page (see the bottom section) with the following CSS, but when I make larger galleries I hope to target the whole row, or target items 4-6 and 10-12, etc. Any ideas? Site: https://www.adamkuhr.com/dhllgridtest Password: test Custom CSS: img[src*="WAVES"], img[src*="PRISTINE"], img[src*="BRINGING"] { margin-left: 40px; }
-
Ad7am started following camilla.ciappina
-
sfphotogirl reacted to a post in a topic: [Share] Squarespace 7.1 CSS ID List
-
Ad7am reacted to a post in a topic: Add JS effects & SVG effects to Squarespace 7.1 site — server-side code?
-
Ad7am reacted to a post in a topic: Add JS effects & SVG effects to Squarespace 7.1 site — server-side code?
-
Ad7am reacted to a post in a topic: Add JS effects & SVG effects to Squarespace 7.1 site — server-side code?
-
itsgus reacted to a post in a topic: Add JS effects & SVG effects to Squarespace 7.1 site — server-side code?
-
Not yet. Very interested to see what you do & how you do it.
- 8 replies
-
- javascript
- css
-
(and 1 more)
Tagged with:
-
Ad7am reacted to a post in a topic: Add JS effects & SVG effects to Squarespace 7.1 site — server-side code?
-
Ad7am reacted to a post in a topic: Add JS effects & SVG effects to Squarespace 7.1 site — server-side code?
-
I'm looking to add the javascript & SVG effects shown in the following tutorials to my Squarespace 7.1 portfolio site: 1. "Making Stagger Reveal Animations for Text": https://tympanus.net/codrops/2020/06/17/making-stagger-reveal-animations-for-text 2. "Ideas for Distorted Link Effects on Menus": https://tympanus.net/Development/DistortedMenuLinkEffects/index5.html 3. "Animated Custom Cursor Effects": https://tympanus.net/Development/AnimatedCustomCursor/index3.html 4. "Text Distortion Effects using Blotter.js": https://tympanus.net/Development/TextDistortionEffects/index.html It looks like they require JS libraries such as Blotter.js, GSAP, Splitting.js, Paper.js, and Simplex Noise. A few are specifically about using SVG effects. And while I know a bit of HTML & CSS, these are all beyond me. One JS expert I know says the job isn't difficult — except that these require server-side code, and Squarespace won't allow that. He offered to move my site off Squarespace, which isn't an option, or recreate the effects with client-side code, but that would be way too expensive and might cause other issues like slowing down my site. Is he correct? Is there a solution? Thanks for looking. Adam
- 8 replies
-
- javascript
- css
-
(and 1 more)
Tagged with:
-
Ad7am started following colin.irwin
-
Ad7am started following derricksrandomviews
-
Thanks for asking, Tuan. I emailed you, and will do so again. Nope, on mobile I still can't get the long images to show in the lightbox at full width without cutting off at the bottom — there's no scrollbar. It seems “overflow-y: auto !important;” is being overruled somewhere.
-
Here's how to make it larger: .gallery-lightbox-close-btn-icon { transform: scale(2, 2); } You can also do something like this: .gallery-lightbox-close-btn-icon { transform: scale(2, 2); transition: 1s; } .gallery-lightbox-close-btn-icon:hover { transform: rotate(270deg) scale(4, 4); }
-
Solved my own question of how to my enable lightbox images to show at their full width, no matter the height. Here's the CSS: .gallery-lightbox-item[data-active='true'] { height: auto !important; } .gallery-lightbox-list { overflow-x: hidden; overflow-y: auto !important; z-index: 100; } That puts the scrollbar in the correct place, and keeps the arrows outside the image, where they should be. HOWEVER... I just noticed that on mobile the images are still cut off at the bottom of the lightbox. So it seems the overflow-y property does not work on mobile, though it works fine on desktop. Anyone have a solution for this, please?
-
Ad7am changed their profile photo
-
Thanks for posting this list, Tuanphan. For gallery lightboxes, I've found the following IDs: .gallery-lightbox-wrapper .gallery-lightbox-item-wrapper .gallery-lightbox-item .gallery-lightbox-list .gallery-lightbox-item-src .gallery-lightbox-item-img I wanted to enable my gallery images to show at their full width (no matter the height), so I used this code: .gallery-lightbox-item { height: auto !important; } .gallery-lightbox-wrapper { overflow-x: hidden; overflow-y: auto; } It works, with one issue: The scroll bar is outside the <Next> arrow. I tried substituting .gallery-lightbox-wrapper with each of the other IDs above. But the only one that came close was .gallery-lightbox-list. That put the scroll bar inside the arrow, but for some reason scrolling didn't work. Any ideas to solve this? Thanks in advance.