Bolk Assets Market

Here are some of the small tips and line of code we have collected throughout the years.
Feel free to duplicate the project and make them yours!

Accent animation

Inspiration from: www.letter.co

Used on: www.masteos.com/pack-meubles

Custom Code:


    .accent {
      -webkit-animation: gradient 5s linear infinite;
      animation: gradient 5s linear infinite;
      background-size: 200% 100%;
      animation-direction: reverse;
    }

    @keyframes gradient {
      to {
        background-position: 200% center;
      }
    }

Type everything you want:  

Documentation: https://github.com/mattboldt/typed.js/

Used on: https://www.mytroop.io/

Custom Code:

Add this script to the <head> of your website:
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.10/typed.min.js"></script>

Then add this code in between these <script></script> tags:


    var typed = new Typed(".typed-words", {
    strings: ["I love Sapiens", "Theo Rocks", "Alex is an amazing surfer", "Have you checked the new Bolk website?"],
    typeSpeed: 75,
    backSpeed: 50,
    backDelay: 800,
    startDelay: 500,
    loop: true,
    showCursor: false,
    cursorChar: "|",
    attr: null,
  });

Create a circle text

I love to turn • I love to turn • I love to turn •

Documentation: https://github.com/peterhry/CircleType

Used on: https://www.mytroop.io/ and also https://www.bolk.studio/about

Custom Code:

Add this script to the <head> of your website:
<script src="https://cdn.jsdelivr.net/npm/circletype@2.3.0/dist/circletype.min.js"></script>

Then add this code in between these <script></script> tags:


  var circles = document.getElementsByClassName("circle-text");
  for (var i = 0; i < circles.length; i++) {
      var circleType = new CircleType(circles.item(i));
  }

Discover Bolk Studio:

Go to Bolk.studio