Jump to content

5 lines of text slightly moving horizontally upon scroll

Recommended Posts

Hello,

 

I've been trying to find a solution to this for a few days now. Still, it doesn't seem to work on my Squarespace website.

Here is an effect I would like to reproduce: https://codepen.io/nikantic/pen/VwLjGyE

I want to have 5 lines of text horizontally moving in different directions only upon scrolling. I want them to move very slightly (much slower than in the example above) and don't have to incline on moving.

Additionally, I want to be able to scroll down to see other sections below. Injecting this exact code seem to block the page on this section only.

Do you think it is possible with Squarespace at all?

 

Thanks so much!

Alex

Link to comment
  • Replies 2
  • Views 1.6k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Try adding a Code Block > Use this code from Codepen

<div class="container" speed=70>
  <div class='scrolling-text'>
    <h2 class="scrolling-text-content">This is some other text, not so big but still very big This is some other text,
      not so big but still very big</h2>
  </div>
</div>
<div class="container left-to-right" speed=100>
  <div class='scrolling-text'>
    <h2 class="scrolling-text-content">This is some other text, not so big but still very big This is some other text,
      not so big but still very big</h2>
  </div>
</div>
<div class="container">
  <div class='scrolling-text'>
    <h2 class="scrolling-text-content">This is some other text, not so big but still very big This is some other text,
      not so big but still very big</h2>
  </div>
</div>
<style>
  .container {
  position: relative;
  width: 100vw;
  overflow: hidden;
}

.scrolling-text {
  display: inline-block;
  transition: transform 0.5s cubic-bezier(0.23, 0.36, 0.28, 0.83);
  will-change: transform;
  backface-visibility: hidden;
}

.scrolling-text .scrolling-text-content {
  color: #fff;
  font-size: 120px;
  white-space: nowrap;
  transition: transform 0.5s cubic-bezier(0.23, 0.36, 0.28, 0.83);
  line-height: 1em;
  margin: 50px 0;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    var containers = $('.container');

    if (containers.length) {
        containers.each(function() {
            var container = $(this);

            // Support small text - copy to fill screen width
            if (container.find('.scrolling-text').outerWidth() < $(window).width()) {
                var windowToScrolltextRatio = Math.round($(window).width() / container.find('.scrolling-text').outerWidth()),
                    scrollTextContent = container.find('.scrolling-text .scrolling-text-content').text(),
                    newScrollText = '';
                for (var i = 0; i < windowToScrolltextRatio; i++) {
                    newScrollText += ' ' + scrollTextContent;
                }
                container.find('.scrolling-text .scrolling-text-content').text(newScrollText);
            }

            // Init variables and config
            var scrollingText = container.find('.scrolling-text'),
                scrollingTextWidth = scrollingText.outerWidth(),
                scrollingTextHeight = scrollingText.outerHeight(true),
                startLetterIndent = parseInt(scrollingText.find('.scrolling-text-content').css('font-size'), 10) / 4.8,
                startLetterIndent = Math.round(startLetterIndent),
                scrollAmountBoundary = Math.abs($(window).width() - scrollingTextWidth),
                transformAmount = 0,
                leftBound = 0,
                rightBound = scrollAmountBoundary,
                transformDirection = container.hasClass('left-to-right') ? -1 : 1,
                transformSpeed = 200;

            // Read transform speed
            if (container.attr('speed')) {
                transformSpeed = container.attr('speed');
            }
        
            // Make scrolling text copy for scrolling infinity
            container.append(scrollingText.clone().addClass('scrolling-text-copy'));
            container.find('.scrolling-text').css({'position': 'absolute', 'left': 0});
            container.css('height', scrollingTextHeight);
        
            var getActiveScrollingText = function(direction) {
                var firstScrollingText = container.find('.scrolling-text:nth-child(1)');
                var secondScrollingText = container.find('.scrolling-text:nth-child(2)');
        
                var firstScrollingTextLeft = parseInt(container.find('.scrolling-text:nth-child(1)').css("left"), 10);
                var secondScrollingTextLeft = parseInt(container.find('.scrolling-text:nth-child(2)').css("left"), 10);
        
                if (direction === 'left') {
                    return firstScrollingTextLeft < secondScrollingTextLeft ? secondScrollingText : firstScrollingText;
                } else if (direction === 'right') {
                    return firstScrollingTextLeft > secondScrollingTextLeft ? secondScrollingText : firstScrollingText;
                }
            }
        
            $(window).on('wheel', function(e) {
                var delta = e.originalEvent.deltaY;
                
                if (delta > 0) {
                    // going down
                    transformAmount += transformSpeed * transformDirection;
                    container.find('.scrolling-text .scrolling-text-content').css('transform', 'skewX(10deg)');
                }
                else {
                    transformAmount -= transformSpeed * transformDirection;
                    container.find('.scrolling-text .scrolling-text-content').css('transform', 'skewX(-10deg)');
                }
                setTimeout(function(){
                    container.find('.scrolling-text').css('transform', 'translate3d('+ transformAmount * -1 +'px, 0, 0)');
                }, 10);
                setTimeout(function() {
                    container.find('.scrolling-text .scrolling-text-content').css('transform', 'skewX(0)');
                }, 500)
        
                // Boundaries
                if (transformAmount < leftBound) {
                    var activeText = getActiveScrollingText('left');
                    activeText.css({'left': Math.round(leftBound - scrollingTextWidth - startLetterIndent) + 'px'});
                    leftBound = parseInt(activeText.css("left"), 10);
                    rightBound = leftBound + scrollingTextWidth + scrollAmountBoundary + startLetterIndent;
        
                } else if (transformAmount > rightBound) {
                    var activeText = getActiveScrollingText('right');
                    activeText.css({'left': Math.round(rightBound + scrollingTextWidth - scrollAmountBoundary + startLetterIndent) + 'px'});
                    rightBound += scrollingTextWidth + startLetterIndent;
                    leftBound = rightBound - scrollingTextWidth - scrollAmountBoundary - startLetterIndent;
                }
            });
        })
    }
});
</script>

I adjusted something with Codepen

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

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.