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

tuanphan

Circle Member
  • Content Count

    6,657
  • Joined

  • Last visited

  • Days Won

    65

Posts posted by tuanphan


  1. Try adding to Code Block

    <h1 class='title'>PARTICLES!</h1>
    <h4 class='subtitle'>Click / Touch Anywhere</h4>
    <div class='particle-count'>
      <span class='number'>0</span>
      Particles
    </div>
    <span class='credit'>
      Created by
      <a href='https://codepen.io/ShawnCG' target='_blank'>Shawn G.</a>
    </span>
    <div class='particles'></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
      var d = document, $d = $(d),
        w = window, $w = $(w),
        wWidth = $w.width(), wHeight = $w.height(),
        credit = $('.credit > a'),
        particles = $('.particles'),
        particleCount = 0,
        sizes = [
          15, 20, 25, 35, 45
        ],
        colors = [
          '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5',
          '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4CAF50',
          '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800',
          '#FF5722', '#795548', '#9E9E9E', '#607D8B', '#777777'
        ],
        
        mouseX = $w.width() / 2, mouseY = $w.height() / 2;
    
    function updateParticleCount () {
      $('.particle-count > .number').text(particleCount);
    };
    
    $w
    .on( 'resize' , function () {
      wWidth = $w.width();
      wHeight = $w.height();
    });
    
    $d
    .on( 'mousemove touchmove' , function ( event ) {
      event.preventDefault();
      event.stopPropagation();
      mouseX = event.clientX;
      mouseY = event.clientY;
      if( !!event.originalEvent.touches ) {
        mouseX = event.originalEvent.touches[0].clientX;
        mouseY = event.originalEvent.touches[0].clientY;
      }
    })
    .on( 'mousedown touchstart' , function( event ) {
      if( event.target === credit.get(0) ){
        return;
      }
      mouseX = event.clientX;
      mouseY = event.clientY;
      if( !!event.originalEvent.touches ) {
        mouseX = event.originalEvent.touches[0].clientX;
        mouseY = event.originalEvent.touches[0].clientY;
      }
      var timer = setInterval(function () {
        $d
        .one('mouseup mouseleave touchend touchcancel touchleave', function () {
          clearInterval( timer );
        })
        createParticle( event );
      }, 1000 / 60)
      
    });
    
    
    function createParticle ( event ) {
      var particle = $('<div class="particle"/>'),
          size = sizes[Math.floor(Math.random() * sizes.length)],
          color = colors[Math.floor(Math.random() * colors.length)],
          negative = size/2,
          speedHorz = Math.random() * 10,
          speedUp = Math.random() * 25,
          spinVal = 360 * Math.random(),
          spinSpeed = ((36 * Math.random())) * (Math.random() <=.5 ? -1 : 1),
          otime,
          time = otime = (1 + (.5 * Math.random())) * 1000,
          top = (mouseY - negative),
          left = (mouseX - negative),
          direction = Math.random() <=.5 ? -1 : 1 ,
          life = 10;
      
      particle
      .css({
        height: size + 'px',
        width: size + 'px',
        top: top + 'px',
        left: left + 'px',
        background: color,
        transform: 'rotate(' + spinVal + 'deg)',
        webkitTransform: 'rotate(' + spinVal + 'deg)'
      })
      .appendTo( particles );
      particleCount++;
      updateParticleCount();
      
      var particleTimer = setInterval(function () {
        time = time - life;
        left = left - (speedHorz * direction);
        top = top - speedUp;
        speedUp = Math.min(size, speedUp - 1);
        spinVal = spinVal + spinSpeed;
        
        
        particle
        .css({
          height: size + 'px',
          width: size + 'px',
          top: top + 'px',
          left: left + 'px',
          opacity: ((time / otime)/2) + .25,
        	transform: 'rotate(' + spinVal + 'deg)',
        	webkitTransform: 'rotate(' + spinVal + 'deg)'
        });
        
        if( time <= 0 || left <= -size || left >= wWidth + size || top >= wHeight + size ) {
          particle.remove();
      		particleCount--;
          updateParticleCount();
          clearInterval(particleTimer);
        }
      }, 1000 / 60);  
    }
    </script>

     


  2. On 4/2/2020 at 5:42 AM, BlackWidow said:

    Hey Tuanphan
    One other quick question slighty off topic: I'm trying to get the top navigation to break into two lines when I vertically view the website on a tablet. I'm using the following code:

    
    @media only screen
      and (min-width: 641px)
      and (max-width: 1024px)
       {
    .tweak-header-primary-nav-hover-style-fade .Header-nav .Header-nav-inner {
    
        margin: -.20em -.20em;
            margin-right: -22em;
            margin-left: -22em;
         }}

    It does break it at first but reverts back to one line when I view another page. Can you let me know what I'm doing incorrect.

    Cheers
    Black Widow

    @media screen and (min-width:641px) and (max-width:900px) {
    [data-nc-container="bottom-center"] {
        flex: 100% !important;
    }
    }

     


  3. Your header isn't fullwidth, so it is difficult to set background color. See screenshot below

    On 4/1/2020 at 10:15 PM, aaron_leduc said:

    Thank you so much for your help! 

    When I copied your code in, it didn't work as intended. I tweaked some of the parameters to get the logo and menu back to where they should be, but the header is limited to the box around the content.  Screenshots attached

    image.thumb.png.3f5d2542421ef525e1053a1fd84a3a7a.png


  4. 12 hours ago, mpuls1 said:

    I am having the same problem. The CSS isn't working for me and when I inspect the page, I also have "MagicPaddingController. Can anyone help? I am trying to reduce the padding on all gallery sections.

    Use CSS

    [data-section-id="enter section id here"] .content-wrapper {padding-top: 5px; padding-bottom: 5px;}

    Each section has different ID. If you share link to your site, I can take a look


  5. 15 hours ago, edmhawkins said:

    @tuanphan I tried out the code and i think I haven't explained myself correctly - sorry. I have a scrolling gallery block that i want to become my homepage banner. How can I add live text, and if possible, a button, on top of the scrolling slides? Different copy per slide - I want it to look like the static banner that you see on the homepage. Thanks! 

     

    SS 7.1 doesn't support text on Gallery. You can follow this guide to add text. https://forum.squarespace.com/topic/151777-gallery-caption-workarounds-for-71-round-two/


  6. 18 hours ago, djm said:

    So good. This both works perfectly. Thanks @tuanphan.

    Just noticing another issue: some words are cut off. Any way of expanding the navigation width? Reducing the font size doesn’t help here...

    Just checked quickly. Increase width seems time-consuming.

    You can use this code to solve.

    .folder-toggle~.subnav div span {
        word-break: break-word;
    }

     


  7. Add to Home > Design > Custom CSS

    /* Select dropdown */
    .variant-select-wrapper {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    /* Quantity */
    .product-quantity-input input {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

     

×
×
  • Create New...