AnnaNeedsHelp Posted September 3, 2022 Share Posted September 3, 2022 Site URL: https://elephant-raspberry-f4jz.squarespace.com/about-us Successfully added HTML + Java & CSS for make a gallery slider section at the bottom of the "Our Culture" page but now all the other sections on that page are gone -- but it's still showing the gallery. I feel like I am so close to success! I'm not sure if it's something I did with the code or something else. Below is the code that I modified (and probably botched) from this CodePen: https://codepen.io/sfi0zy/pen/PoGvYyy Code Block: <link rel='stylesheet' href='https://unpkg.com/locomotive-scroll@4.0.6/dist/locomotive-scroll.min.css' /> <script src='https://unpkg.com/locomotive-scroll@4.0.6/dist/locomotive-scroll.min.js'></script> <div class='scroll-animations-example' data-scroll-container> <div class='scrollsection' data-scroll-section> <div class='item -normal' data-scroll data-scroll-speed="2"> <img class='image' src='https://picsum.photos/id/1005/300/400'> </div> <div class='item -big' data-scroll data-scroll-speed="1"> <img class='image' src='https://i.imgur.com/Rdhhm02.jpg'> </div> <div class='item -small -horizontal' data-scroll data-scroll-speed="4"> <img class='image' src='https://i.imgur.com/UUTdpwt.jpg'> </div> <div class='item -normal' data-scroll data-scroll-speed="3"> <img class='image' src='https://i.imgur.com/DJaduFT.jpg'> </div> <div class='item -normal -horizontal' data-scroll data-scroll-speed="2"> <img class='image' src='https://i.imgur.com/CWOwpwF.jpg'> </div> <div class='item -big -horizontal' data-scroll data-scroll-speed="4"> <img class='image' src='https://i.imgur.com/vi1E64P.jpg'> </div> <div class='item -small' data-scroll data-scroll-speed="2"> <img class='image' src='https://i.imgur.com/Ncd1GTP.jpg'> </div> <div class='item -normal -horizontal' data-scroll data-scroll-speed="1"> <img class='image' src='https://picsum.photos/id/1056/300/400'> </div> <div class='item -small -horizontal' data-scroll data-scroll-speed="3"> <img class='image' src='https://picsum.photos/id/1062/400/300'> </div> <div class='item -big' data-scroll data-scroll-speed="1"> <img class='image' src='https://i.imgur.com/vi1E64P.jpg'> </div> <div class='item -normal -horizontal' data-scroll data-scroll-speed="2"> <img class='image' src='https://i.imgur.com/CNhqK3N.jpg'> </div> <div class='item -normal -horizontal' data-scroll data-scroll-speed="1"> <img class='image' src='https://i.imgur.com/ZbEkM0c.jpg'> </div> <div class='item -small -horizontal' data-scroll data-scroll-speed="4"> <img class='image' src='https://i.imgur.com/vi1E64P.jpg'> </div> <div class='item -big' data-scroll data-scroll-speed="3"> <img class='image' src='https://i.imgur.com/sy3SA3P.jpg'> </div> <div class='item -normal -horizontal' data-scroll data-scroll-speed="2"> <img class='image' src='https://picsum.photos/id/111/400/300'> </div> <div class='item -small -horizontal' data-scroll data-scroll-speed="4"> <img class='image' src='https://i.imgur.com/7NqFHwf.jpg'> </div> <div class='item -big' data-scroll data-scroll-speed="2"> <img class='image' src='https://picsum.photos/id/137/600/800'> </div> <div class='item -normal -horizontal' data-scroll data-scroll-speed="1"> <img class='image' src='https://i.imgur.com/7NqFHwf.jpg'> </div> <div class='item -small -horizontal' data-scroll data-scroll-speed="3"> <img class='image' src='https://i.imgur.com/7NqFHwf.jpg'> </div> <div class='item -normal' data-scroll data-scroll-speed="1"> <img class='image' src='https://i.imgur.com/YluXeH7.jpg'> </div> </div> </div> <script> class Example { constructor(options) { this.root = options.root; this.init(); setTimeout(this.showImages.bind(this), 1000); } init() { this.scroll = new LocomotiveScroll({ el: this.root, direction: 'horizontal', smooth: true, lerp: 0.05, tablet: { smooth: true }, smartphone: { smooth: true } }); this.images = this.root.querySelectorAll('.image'); [].forEach.call(this.images, (image) => { image.addEventListener('click', () => { image.classList.add('-clicked'); this.hideImages(); }); }); } showImages() { [].forEach.call(this.images, (image) => { image.classList.remove('-clicked'); image.classList.add('-active'); }); } hideImages() { [].forEach.call(this.images, (image) => { image.classList.remove('-active'); }); setTimeout(this.showImages.bind(this), 2000); } } window.addEventListener('DOMContentLoaded', (event) => { const example = new Example({ root: document.querySelector('.scroll-animations-example') }); }); </script> Custom Css: //CULTURE PHOTO SLIDER// #block-yui_3_17_2_1_1662153700056_214084 .scroll-animations-example { > .scrollsection { padding: 10vh 10vh 10vh 10vmax; min-width: 550vh; } > .scrollsection > .item { display: inline-block; position: relative; margin: 0 -30vh 0 3vh; } > .scrollsection > .item::before { content: ''; display: inline-block; vertical-align: middle; height: 100%; } > .scrollsection > .item.-big { height: 80vh; width: 60vh; } > .scrollsection > .item.-big.-horizontal { height: 60vh; width: 80vh; } > .scrollsection > .item.-normal { height: 60vh; width: 45vh; z-index: 1; } > .scrollsection > .item.-normal.-horizontal { height: 45vh; width: 60vh; } > .scrollsection > .item.-normal:nth-of-type(3n) { bottom: 5vh; } > .scrollsection > .item.-normal:nth-of-type(4n) { bottom: -5vh; } > .scrollsection > .item.-small { height: 40vh; width: 30vh; z-index: 2; } > .scrollsection > .item.-small.-horizontal { height: 30vh; width: 40vh; } > .scrollsection > .item.-small:nth-of-type(3n) { bottom: 13vh; } > .scrollsection > .item.-small:nth-of-type(4n) { bottom: -13vh; } > .scrollsection > .item > .image { height: 100%; width: 100%; position: absolute; top: 0; left: 0; filter: grayscale(1); opacity: 0; pointer-events: none; transform: translateX(0) translateY(0) scale(1); transition: filter .3s ease, opacity 1s ease, transform 1s ease; } > .scrollsection > .item:nth-of-type(4n) > .image { transform: translateX(-30vh) translateY(-30vh) scale(.8); transition-delay: 0; } > .scrollsection > .item:nth-of-type(4n - 1) > .image { transform: translateX(30vh) translateY(30vh) scale(.8); transition-delay: .05s; } > .scrollsection > .item:nth-of-type(4n - 2) > .image { transform: translateX(-30vh) translateY(30vh) scale(.8); transition-delay: .1s; } > .scrollsection > .item:nth-of-type(4n - 3) > .image { transform: translateX(-30vh) translateY(-30vh) scale(.8); transition-delay: .15s; } > .scrollsection > .item > .image.-active { transform: translateX(0) translateY(0) scale(1); opacity: .8; pointer-events: auto; transition: filter .3s ease, opacity 1s ease, transform 1s ease; } > .scrollsection > .item > .image.-clicked { transform: translateX(0) translateY(0) scale(5); opacity: 0; pointer-events: auto; transition: filter .3s ease, opacity 1s ease, transform 1s ease; } > .scrollsection > .item > .image.-active:hover { height: 100%; width: 100%; position: absolute; top: 0; left: 0; filter: grayscale(0); opacity: 1; cursor: pointer; } } Link to comment
tuanphan Posted September 6, 2022 Share Posted September 6, 2022 With effect like this, it usually affect on other sections. It is complex so I can't help. You try posting to some groups on Facebook, eg: Squarespace Customization Resource Group Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment