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

KevinWalton

Member
  • Posts

    13
  • Joined

  • Last visited

Personal Information

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Site URL: https://www.kevinwalton.ca Hi There! Finally got the chance to publish my redesigned website! See what you think, I am always looking to improve my skills! - Kevin W
  2. Yes @Winther I got the chance to figure it out but unfortunately it messed up with another piece of Javascript that I already had on my site so I had to remove it. Thanks for the update!
  3. Site URL: https://lily-oboe-g479.squarespace.com Password is "1" Hi, I have been working on this for over 6 hours and I cannot figure out how to add Parralaxing to my site. I want to mainly add it to parallax images when you scroll, I just want to figure out how to add it to image blocks but I don't know where to put the ID and the Class. Here is the code from this site: https://codepen.io/smlparry/pen/JzGELL HTML <div class="wrapper"> <div class="parallax-container"> <div class="background"> <img class="background__image" src="https://s3-ap-southeast-2.amazonaws.com/daily-fire-assets/codepen-assets/building.jpg" /> </div> <div class="foreground"> <div class="foreground__content"> <h1>Oooo, parallax</h1> </div> </div> </div> </div> CSS /* layout */ .wrapper { display: flex; justify-content: center; align-items: center; height: 420px; } /* Parallax Styles */ .parallax-container { position: relative; width: 100%; height: 100%; overflow-x: hidden; overflow-y: scroll; perspective: 8px; perspective-origin: 0%; display: flex; } .background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: translateZ(0px); } .foreground { margin-top: auto; margin-bottom: 50px; transform-origin: 0; transform: translateZ(3px) scale(0.625); /* Uncomment the code below to see the difference the scale property makes! */ /* transform: translateZ(3px); */ /* transform: translateZ(0) scale(1); */ } .foreground h1 { font-size: 36px; }
  4. Site URL: https://lily-oboe-g479.squarespace.com/ Password is "1" Hi, I have no idea how to install Rolly.js to my site. I want to have smooth scrolling but I know nothing of javascript. Here is the website where you install it: https://rolly.maj.digital/ Here is where you install it: https://mickaelchanrion.github.io/rolly/guide/ Someone please help me Thanks, - Kevin
  5. Site URL: https://www.kevinwalton.ca Hi there, Can someone help me add this to my site? I have tried but I don't know how to make it Squarespace accessible. Index HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Awesome Hover Effect + Animated Cursor | Codegrid</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="nav-wrapper"> <nav> <a href="#" class="hover-this"><span>Home</span></a> <a href="#" class="hover-this"><span>Our Story</span></a> <a href="#" class="hover-this"><span>Studio</span></a> <a href="#" class="hover-this"><span>Contact</span></a> <div class="cursor"></div> </nav> </div> <script> (function () { const link = document.querySelectorAll('nav > .hover-this'); const cursor = document.querySelector('.cursor'); const animateit = function (e) { const span = this.querySelector('span'); const { offsetX: x, offsetY: y } = e, { offsetWidth: width, offsetHeight: height } = this, move = 25, xMove = x / width * (move * 2) - move, yMove = y / height * (move * 2) - move; span.style.transform = `translate(${xMove}px, ${yMove}px)`; if (e.type === 'mouseleave') span.style.transform = ''; }; const editCursor = e => { const { clientX: x, clientY: y } = e; cursor.style.left = x + 'px'; cursor.style.top = y + 'px'; }; link.forEach(b => b.addEventListener('mousemove', animateit)); link.forEach(b => b.addEventListener('mouseleave', animateit)); window.addEventListener('mousemove', editCursor); })(); </script> </body> </html> Style CSS html, body { margin: 0; padding: 0; cursor: none; } .nav-wrapper { width: 100%; height: 100vh; background: #161616; } nav { width: 100%; margin: 0 auto; text-align: center; position: absolute; top: 50%; } .hover-this { transition: all 0.3s ease; } span { display: inline-block; font-family: "Monument Extended"; font-weight: 300; color: #fff; font-size: 36px; text-transform: uppercase; pointer-events: none; transition: transform 0.1s linear; } .cursor { pointer-events: none; position: fixed; padding: 0.3rem; background-color: #fff; border-radius: 50%; mix-blend-mode: difference; transition: transform 0.3s ease; } .hover-this:hover ~ .cursor { transform: translate(-50%, -50%) scale(8); } @media(min-width: 900px) { nav { display: flex; justify-content: space-around; } } @media(max-width: 900px) { nav { top: 30%; } .hover-this { width: 100%; padding: 20px 0; display: inline-block; } }
  6. Site URL: https://sponge-lychee-awaf.squarespace.com password is "1" I was wondering if someone can help me install Page transitions to my site? I don't know how to do it with Javascript. Here is a link of the code that I want to install. https://tympanus.net/codrops/2013/05/07/a-collection-of-page-transitions/ I am mainly looking at the "DIFFERENT EASING" page transitions. Thanks again! - Kevin W
  7. Site URL: https://sponge-lychee-awaf.squarespace.com Password is "1" I am having problems with Javascript. I don't know how to code in Java script so I was wondering if anyone can help me. I have a java script code for Luxy scrolling for smoother scrolling like Webflow, and I also have a code that works when scrolling on a page, the background colours fade together. For some reason, they don't like one another. The fading when scrolling no longer works and removes my background. Here is my code: Background change colour when scrolling: Header <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <div wm-plugin="background-change-all"></div> Footer <script src="https://assets.codepen.io/3198845/WMBackgroundScroll101820v1.0.7.min.js"></script> Luxy javascript Header <!-- before <body/> tag --> <!-- Smooth scrolling --> <script src="https://min30327.github.io/luxy.js/dist/js/luxy.js"></script> <script charset="utf-8"> var isMobile = /iPhone|iPad|Android/i.test(navigator.userAgent); if (!isMobile) { luxy.init({ wrapper: '#siteWrapper', }); } </script> <script> $(document).ready(function() { luxy.init({ wrapper: '#siteWrapper', wrapperSpeed: 0.085, }); }); </script>
  8. Okay so I have a new problem, I have an automatic background colour change on scroll that now doesn't work, here is my header code injection: <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <div wm-plugin="background-change-all"></div> <!-- before <body/> tag --> <!-- Smooth scrolling --> <script src="https://min30327.github.io/luxy.js/dist/js/luxy.js"></script> <script charset="utf-8"> var isMobile = /iPhone|iPad|Android/i.test(navigator.userAgent); if (!isMobile) { luxy.init({ wrapper: '#siteWrapper', wrapperSpeed: 0.085, }); } </script> <script> $(document).ready(function() { luxy.init({ wrapper: '#siteWrapper', wrapperSpeed: 0.065, }); }); </script> This is the footer <script src="https://assets.codepen.io/3198845/WMBackgroundScroll101820v1.0.7.min.js"></script> These other lines of code make it so that when I scroll, each page block adds a fade transition. Does that make sense?
  9. That worked! Thank you so much for your help! I didn't know you needed that line you posted! What does that line do If I may ask?
  10. Site URL: https://www.kevinwalton.ca Hi, I was wondering if someone can help me with slowing down scrolling like they use on Webflow. I want my site to scroll like this: https://ceremonycoffee.com/ Researching what kind of scroll technique is used, I found that it is called "Luxy" javascript. I can't seem to figure out why it is not working on my site. <!-- before <body/> tag --> <!-- Smooth scrolling --> <script src="https://min30327.github.io/luxy.js/dist/js/luxy.js"></script> <script charset="utf-8"> var isMobile = /iPhone|iPad|Android/i.test(navigator.userAgent); if (!isMobile) { luxy.init({ wrapper: '#luxy', wrapperSpeed: 0.065, }); } </script> Can someone help? Thanks, Kevin
×
×
  • Create New...