Baffle effect

Welcome to another CSS post. In this post, we will discuss on how we can add baffle effect to a text in HTML document using library.

Baffle.js is a tiny JavaScript library for obfuscating and revealing text in DOM elements.

Installation

Add the library from CDN in the top of HTML document.

<script src="<https://cdn.jsdelivr.net/npm/baffle@0.3.6/dist/baffle.min.js>"></script>

Add text

Lets create a paragraph element to show some text which we are going to use to add effect later.

<p class="effect">
    Hello, world..
</p>

Some CSS magic

Here is some CSS magic to add in our document to have some decent look. Basically just aligning the content to center.

body {
    width: 90%;
    height: 90vh;
    background-color: pink;
    display: flex;
    justify-content: center;
    align-items: center;
}

.effect {
    font-family: 'tahoma';
    font-weight: 800;
    font-size: 58px;
}

Baffle configuration

Lets, add the baffle js configuration to apply the effect at the end of document with the help of script tag.

<script>
    // With a CSS selector
    const b = baffle('.effect');
    b.set({
        character: '>▓▒ /█▒</ >▒░>▒ █<░ ░█▒░> ▓░/▒ ▒>░ █<▒▓ ▓▒>░',
        speed: 120
    });

    // Start obfuscating
    b.start();
    
    // Reveal text
    b.reveal(5000);
    
    // Stop obfuscating
    b.stop();

</script>

Here, we have passed the CSS selector which targets the text that needs to obfuscated.

With baffle instantiated, you can start your instance with the start() method, stop it with stop(), or reveal it with reveal().

That’s it, we are done. We can see the changes in the browser.

Happy Coding!

Full Demo:

To get latest updates you can follow or subscribe! #peace

Parallax & Zoom effect

Parallax & Zoom effect is one of the popular effect to add in the homepage or single blog page.

In this post, we will see how we can achieve a simple Parallax & Zoom effect.

Parallax & Zoom effect video

For this, we need a wide image which can serve in the top of page. I’m using jQuery for custom scripts and bootstrap for simple layout view in html.

<pre class="wp-block-syntaxhighlighter-code"><head>
  <link href="<https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css>" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  <a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js</a>
</head>
</pre>

The image used in the code snippet is grabbed from google image search. And we need tons of text or words to present in the page. So that it will looks like page full of content and also we will get vertical scroll bar.

<div class="header" id="parallex">
    <img class="header-image" src="<https://handluggageonly.co.uk/wp-content/uploads/2015/12/London-1.jpg>" alt="">
  </div>
<p class="container">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae similique perferendis quaerat porro, facilis quidem itaque qui excepturi autem ab iure ea quae vero dolorum fugiat alias accusantium, unde laborum facere pariatur soluta quibusdam
</p>

I’m getting that bunch of text from Lorem Ipsum generator from internet. (there is plenty site to generate random text). If you are familiar with emmet, you can generate using that as well.

Next thing, we need to add some CSS magic to make our html looks decent. I’m adding width of image as 100% and if it leads or overflows the screen – we are hiding it.

body: {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}
img {
  width: 100%;
}
.header {
  height: 500px;
  overflow: hidden;
}
p {
  font-family: tahoma;
  font-size: 20px;
  padding: 50px;
}

Next big thing, lets capture the scrolling happening in website using jQuery and zoom the header image to apply Parallax effect.

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  $("#parallex img").css({
    width: 100 + scroll / 5 + "%"
  });
});

Here, we are adjusting the CSS width property of Parallax image based on scroll happens by 5%. So the image will start scaling or zooming whenever the scroll down or scroll up happens.

Here is the full demo with code.

Happy Coding!