LukasEriksen

53 minutes ago, PartTwoDesign said:

Cool site @LukasEriksen 

The page loading animation of your logo is a nice touch - presumably this is coded? Is your logo carousel also coded? Nice features.

All the best with your launch! 🙂

Thank you @PartTwoDesign!

Yep, I used the code for the loading animation from this post here. Then I whipped up the animation of the logo in After Effects and exported as a gif. 

The logo carousel was just a tutorial from Will Myers. He explains it all super well in his blog post here. 

Thanks for checking out the site! 😀

33 minutes ago, tuanphan said:

Hi,

#1. How did you add text above gallery? 

#2. Also, try checking on mobile, when clicking burger, I see nothing appear.

#3. Learn more page: https://www.perthtimelapse.com/learn-more

Text overflow the box.

Add this to Design > Custom CSS to fix it

/* Learn more tablet list items */
@media screen and (max-width:1024px) and (min-width:768px) {
body#collection-611e4b3a741c6e57aac1c5b7 .user-items-list-simple .list-item[data-is-card-enabled="true"] {
    min-height: 90% !Important;
}
}

@tuanphan Thanks again for taking another look! And thank you for fixing that text overflow issue, was battling with it for some time. For some reason, the mobile menu on my site does not show when you click it on desktop, but on an actual mobile phone it works fine. I am guessing it has something to do with one of the over 1500 lines of Custom CSS I added 😄. If you are referring to the text above the logo carousel, I just repositioned the gallery section up using CSS. That's probably also why it was sliding under the text on extremely small viewports.

One quick question to you, I have a bit of javascript I would like to implement, but I would like for it to only trigger on desktop. I tried doing something like:

<script>
if (window.screen.width > 780) {
  document.write( 
    '<script src="https://www.squarerefresh.xyz/assets/plugins/drag/js/drag.min.js"></script>'
  )
}
</script>

But this doesn't seem to work. Would you know to do this?

Thank you for being a legend, Tuan!

3 minutes ago, tuanphan said:

Text overlap gallery images

Strange, this is what I am seeing

Could be because of viewport height? Would you have any ideas on how to fix?

Site URL: https://perthtimelapse.com

Hi all, I've been working on the website for my new business for the last few weeks, and I think it's finally at a place where I am happy with it.

If anyone has any feedback on the site (good or bad), I would love to hear it 😀

https://perthtimelapse.com

7 hours ago, provenform said:

@LukasEriksen This works when inserted into Settings->Advanced->Code Injection:

You can test by scrolling with your up/down arrow keys and see how it's smooth vs choppy without it.

<script src="https://code.nath.co/src/jQuery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js"></script>

<script>SmoothScroll({
      // Scrolling Core
    animationTime    : 2000, // [ms]
    stepSize         : 100, // [px]

    // Acceleration
    accelerationDelta : 50,  // 50
    accelerationMax   : 3,   // 3

    // Keyboard Settings
    keyboardSupport   : true,  // option
    arrowScroll       : 50,    // [px]

    // Pulse (less tweakable)
    // ratio of "tail" to "acceleration"
    pulseAlgorithm   : true,
    pulseScale       : 4,
    pulseNormalize   : 1,

    // Other
    touchpadSupport   : false, // ignore touchpad by default
    fixedBackground   : true, 
    excluded          : ''    
})</script>

 

Thank you so much!

Found another smooth scroll plugin which seems to work even better: https://github.com/gblazex/smoothscroll-for-websites

No idea how to install it though 😞

On 4/12/2021 at 7:25 AM, tuanphan said:

Hover homepage on Main Navigation or Not Linked >> CLick gear icon to opan Page Header > Advanced > Paste the code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.21/jquery.scrollify.min.js" ></script>
<script>
$(document).ready(function() {
          $.scrollify({
            	section : ".page-section",
          });
});
</script>

 

Thanks for the reply! I've tried doing this, but it seemingly does nothing. When i put the code in the code injection footer area it works however, just not only on my homepage.

My site url is lukaseriksen.com

@bangank36 How would I go about having this script only targeting my home page? 

My Site is lukaseriksen.com

Site URL: https://lukaseriksen.com

I've implemented a custom cursor into my website (https://lukaseriksen.com) but when scrolling the cursor doesn't seem to move with the screen, it only updates it's position when you move the mouse position again. 

Is there any way to fix this?

Here is the code I used:

<div class="cursor cursor-dot"></div>
<style>
  @media (hover: none) {
    .cursor {display:none !important;
    }
  }
  * {
    cursor: none !important;
  }
  .cursor {
    --size: 30px;
    height: var(--size);
    width:  var(--size);
    border-radius: 50%;
    position: absolute;
    z-index: 99999999999;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .cursor.cursor-dot {
    background: #ffffff;  /* This defines the color of the cursor */
    mix-blend-mode: difference;  /* Delete this line if you dont want the circle to invert */
    transition: width .3s, height .3s,
      background-color .3s;
    transition-timing-function: ease-out;
  }
  .cursor-dot.active {
    --size: 50px;
    background-color: #ffffff;
  }
</style>
<script>
  $(window).mousemove(function(e) {     
    $(".cursor").css({
      left: e.pageX,
      top: e.pageY
    })    
  });
  $(window).mousemove(function(e) {
    $("a")
      .on("mouseenter", function() {   
      $('.cursor').addClass("active")   
    })  
  });
  $(window).mousemove(function(e) {
    $("a")
      .on("mouseleave", function() {    
      $('.cursor').removeClass("active")    
    })
  });
</script>

3 minutes ago, LukasEriksen said:

@creedon Thanks for the quick reply! I would want the scroll snapping feature to only be on the home page. I found a codepen using fullpage (https://codepen.io/alvarotrigo/pen/NxyPPp) , does this mean i could potentially be able to implement it?

Thanks for the help!

 

@creedonI did adapt the #collection, but the scrolling was really off, it kept jumping to the bottom of the page.

@creedon Thanks for the quick reply! I would want the scroll snapping feature to only be on the home page. I found a codepen using fullpage (https://codepen.io/alvarotrigo/pen/NxyPPp) , does this mean i could potentially be able to implement it?

Thanks for the help!

On 12/28/2020 at 3:43 AM, creedon said:

That page is using fullPage which uses Javascript. Javascript allows for a wider range of behaviour than CSS.

@creedon do you know if you're able to implement fullpage in squarespace? I have tried to use to code you wrote earlier, but it seems to not be working properly. I am also on 7.1.

Site: lukaseriksen.com

@rwpI would like to get the same cursor for my website, but unfortunately the jsfiddle you posted is no longer available. I have found an alternate code on another squarespace website, but I can't seem to integrate into my website https://www.lukaseriksen.com/.

The code I found is as follows:

<style>
  @media (hover: none) {
    .cursor {display:none !important;
    }
  }
  * {
    cursor: none;
  }
  .cursor {
    --size: 10px;
    height: var(--size);
    width:  var(--size);
    border-radius: 50%;
    position: absolute;
    z-index: 99999999999;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .cursor.cursor-dot {
    background: #ffffff;  /* This defines the color of the cursor */
    mix-blend-mode: difference;  /* Delete this line if you dont want the circle to invert */
    transition: width .6s, height .6s,
      background-color .6s;
    transition-timing-function: ease-out;
  }
  .cursor-dot.active {
    --size: 50px;
    background-color: #ffffff;
  }
</style>

<script>
  $(window).mousemove(function(e) {     
    $(".cursor").css({
      left: e.pageX,
      top: e.pageY
    })    
  });
  $(window).mousemove(function(e) {
    $("a")
      .on("mouseenter", function() {   
      $('.cursor').addClass("active")   
    })  
  });
  $(window).mousemove(function(e) {
    $("a")
      .on("mouseleave", function() {    
      $('.cursor').removeClass("active")    
    })
  });
</script>

Would appreciate any help you could provide!

@tuanphan this code: <script src="https://www.wpromotions.eu/confetti.min.js"></script><script>confetti.start()</script>

@des add a code block to the desired page, and make sure to set it as HTML so it renders. Then paste the following code:

<script src="https://www.wpromotions.eu/confetti.min.js"></script><script>confetti.start()</script>
 

@tuanphan could you help me out with this?

The link is https://www.lukaseriksen.com/order-confirmed

Doesn't matter I've figured it out already! I would however now know how i can have the script fade out over a 5 second period. What kind of code should I inject here?

Site URL: https://www.lukaseriksen.com/

So I really want to add a confetti animation to when someone purchases a product on my site. I have scoured the interwebs and have found some code which may let me do this, but I have no idea how i can integrate it into squarespace (https://codemyui.com/falling-confetti/) could anyone help me out with this? I would be super dooper thankful!

Thanks in advance!

Lukas