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


Circle Member
  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by tuanphan

  1. Try adding a Code Block <div class="container tcontainer"> <section data-bgcolor="#bcb8ad" data-textcolor="#032f35"> <div> <h1 data-scroll data-scroll-speed="1"><span>Horizontal</span> <span>scroll</span> <span>section</span></h1> <p data-scroll data-scroll-speed="2" data-scroll-delay="0.2">with GSAP ScrollTrigger & Locomotive Scroll</p> </div> </section> <section id="sectionPin"> <div class="pin-wrap"> <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h2> <img src="https://images.pexels.com/photos/5207262/pexels-photo-5207262.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=900" alt=""> <img src="https://images.pexels.com/photos/3371358/pexels-photo-3371358.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=900" alt=""> <img src="https://images.pexels.com/photos/3618545/pexels-photo-3618545.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=900" alt=""> </div> </section> <section data-bgcolor="#e3857a" data-textcolor="#f1dba7"><img src="https://images.pexels.com/photos/4791474/pexels-photo-4791474.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt=""> <h2 data-scroll data-scroll-speed="1" class="credit"><a href="https://thisisadvantage.com" target="_blank">Made by Advantage</a></h2> </section> </div> <link rel="stylesheet" href="https://use.typekit.net/skn8ash.css"/> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.css"/> <script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js"></script> <script> gsap.registerPlugin(ScrollTrigger); const pageContainer = document.querySelector(".container"); /* SMOOTH SCROLL */ const scroller = new LocomotiveScroll({ el: pageContainer, smooth: true }); scroller.on("scroll", ScrollTrigger.update); ScrollTrigger.scrollerProxy(pageContainer, { scrollTop(value) { return arguments.length ? scroller.scrollTo(value, 0, 0) : scroller.scroll.instance.scroll.y; }, getBoundingClientRect() { return { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight }; }, pinType: pageContainer.style.transform ? "transform" : "fixed" }); //////////////////////////////////// //////////////////////////////////// window.addEventListener("load", function () { let pinBoxes = document.querySelectorAll(".pin-wrap > *"); let pinWrap = document.querySelector(".pin-wrap"); let pinWrapWidth = pinWrap.offsetWidth; let horizontalScrollLength = pinWrapWidth - window.innerWidth; // Pinning and horizontal scrolling gsap.to(".pin-wrap", { scrollTrigger: { scroller: pageContainer, //locomotive-scroll scrub: true, trigger: "#sectionPin", pin: true, // anticipatePin: 1, start: "top top", end: pinWrapWidth }, x: -horizontalScrollLength, ease: "none" }); ScrollTrigger.addEventListener("refresh", () => scroller.update()); //locomotive-scroll ScrollTrigger.refresh(); }); </script> and add this to DESIGN > CUSTOM CSS /* CSS test code */ .tcontainer { section:not(#sectionPin) { min-height: 100vh; width: 100%; position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-gap: 2rem; padding: 50px 10vw; margin: auto; place-items: center; } img { height: 80vh; width: auto; object-fit: cover; } h1 { font-size: 5rem; line-height: 1; font-weight: 800; margin-bottom: 1rem; position: absolute; top: 10vw; left: 10vw; z-index: 4; overflow-wrap: break-word; hyphens: auto; } @media (max-width: 768px) { h1 { font-size: 16vw; } } h1 span { display: block; } h2 { font-size: 2rem; max-width: 400px; } .credit { font-family: Termina, sans-serif; } .credit a { color: var(--text-color); } * { box-sizing: border-box; } #sectionPin { height: 100vh; overflow: hidden; display: flex; left: 0; background: var(--text-color); color: var(--bg-color); } .pin-wrap { height: 100vh; display: flex; justify-content: flex-start; align-items: center; padding: 50px 10vw; } .pin-wrap > * { min-width: 60vw; padding: 0 5vw; } p { position: absolute; bottom: 10vw; right: 10vw; width: 200px; line-height: 1.5; } }
  2. Hi, Can you share link to your site? Do you use Personal or Business Plan? You will use Squarespace 7.0 or 7.1? You will add this to Portfolio Page or Standard Page?
  3. Hi, I think this is possible in Personal Plan. Can you share link to page in screenshot? We can check code easier
  4. Add to Design > Custom CSS /* Bio image text mobile */ @media screen and (max-width:767px) { div#page-section-612981a55c105b558260b356 .sqs-block[class*=float-left] { float: left !important; margin-right: 17px !important; width: 60% !important; } }
  5. Okay. Let me know if you have any other problems. (y)
  6. Oh, I think I used to code this to help a member. I think the code is still on demo site. Do you still need help? I will find the code.
  7. You can also use Advanced Map Block to achieve this.
  8. You can try Universal Filter Plugin to achieve this. The plugin use Project SEO Description to create tag/categories sort/filter.
  9. I think you can try Advanced Map Block to add multiple locations? I used to use it to embed libraries list on my country.
  10. Add to Design > Custom CSS /* resize mobile home top video */ @media screen and (max-width:767px) { [data-section-id="60466712d8d3031cc51665a4"] { min-height: unset !important; } }
  11. Hi, You mean top image? Add to Design > Custom CSS /* resize about image mobile */ @media screen and (max-width:767px) { [data-section-id="612d1deeb577d75aeea6faa4"] { min-height: unset !important; height: 35vh; } }
  12. If you still can't get the receive from here, you can let me know. I will check * find similar code
  13. Hi, Which section are you referring to? Can you take a screenshot? We can check easier
  14. Hi, It looks fine now. Do you still need help? If problem still appear, try disable Ajax Loading
  15. You mean clock ion in Business Hours? It looks like you solved this?
  16. Hi, Where are these people? I don't see on homepage
  17. Try edit your blog title, use this format If it doesn't work, keep this format & share link to a blog, we will try checking again
  18. Hi, I see email in header here. What is problem now?
  19. Can you share link to your site? We can check it easier
  20. Hi, I see the site used Mega Menu Plugin by @ThompsonWebDesign However, you can also consider use Mega Menu Plugin by @WillMyers
  21. Answered your message. You can check it again.
  22. Hi, Yes. Justify won't work on all browsers/devices. There is no way to fix this. Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/text-align#browser_compatibility
  23. Hi, Add to Design > Custom CSS /* Mobile */ @media screen and (max-width:767px) { /* Hide Supersize logo */ div#block-yui_3_17_2_1_1631108394982_7909 { display: none; } /* Hide people with hand mobile image */ div#block-7e169b3e9a202adbd76b { display: none; } [data-section-id="6138b217fc9a13700027ef17"] { display: none; } }
  • Create New...