Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How to Create a Visually Appealing Homepage: Part II

DZone's Guide to

How to Create a Visually Appealing Homepage: Part II

This time the author is going to tell more about his website’s search bar and its effects.

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

How to Add Specific Effects and Animations to the Search bar

As I’ve promised in my first article about creating a homepage with Bootstrap and jQuery, this time I’m going to tell more about our website’s search bar and its effects. In short, our search bar should open up dynamically and display a modal window with a little bit of nitty-gritty effects. So, let’s dive in!

Basically, our website’s search bar operates in two states: active (image 1) and inactive (image 2).

Image 1

Image 2

The applied effect needs to be the following: when a user clicks on a search button, a search field should open up smoothly – from a page’s center to the borders.

To utilize that effect on our website, I need to use specific animation styles that are responsible for opening and closing of search fields. I had to rely on as a special script that is responsible for search clicking and closure the search bar as well. The same script was used when a user clicked on any area not covered by the search field or search button (it closed the search bar too).

Here’s how it works: when a user presses the search button, our special script will add up a class style with animation effects to the input field. But, when a user clicks to close the search field, the class style will be deleted.

Below is the code that is in place when our search bar is not used:

color: transparent;

cursor: pointer;

padding: 0;

margin: -12px auto 0 auto;

transition: width 0.5s;

border: 6px solid rgba(255, 255, 255, 0.3);

height: 66px;

width: 69px;

border-radius: 50px !important;

font-size: 36px;

position: absolute;

left: 0;

right: 0;

top:7px;

Here’s the code that is added up to the search fields when a user clicks on search (active):

width: 100% !important;

height: 60px!important;

margin: -8px auto 0 !important;

padding-left: 25px!important; ;

color: #fff!important;

cursor: auto!important;

top:7px !important;

transition: height 0.2s linear,margin 0.2s linear, width 0.3s linear!important;

z-index: 999;

The most important thing about the code above is Transition. This property is used when our search bar is either active or inactive. And, as you can see from the code, I’ve transferred several parameters to it, such as height, width, margin. This element’s properties are crucial of our special animation effects. So, if you compare these two states, the main difference is produced by these properties.

Below, I’d like to present my code for making our search field first active and them inactive again:

$(".form-control").on('click',function() {

      $("#search").addClass("search-focus");

      $(".btn-block-search").find('.btn-search').show();

      $(".btn-block-search").fadeIn(500, 'swing');

      $(".navbar-collapse").removeClass("in");

      $(".close-search").on("click", function () {

          $(".btn-block-search").fadeOut(500, 'swing');

          $(".btn-block-search").find('.btn-search').hide();

          $("#search").removeClass("search-focus");

      })

  }

);

Below is the code that is responsible for actions, such as when a user clicks on any area that doesn’t belong to the search field. It allows us to transition our search field from active to inactive state as well.

$(window).on('click', function (event) {

  var element = $(event.target);

  if(element.closest('#search').length === 0 && element.closest('.btn-block-search').length === 0) {

      $('.btn-block-search').fadeOut(500, 'swing');

      $(".btn-block-search").find('.btn-search').hide();

      $("#search").removeClass("search-focus");

  }

});

How to Implement Smart Scroll Between the First Screen and a Website’s Main Content

Now, I’d like to talk a little bit about a plugin called jQuery scrollify. Our task was the following: when a user scrolls with his/her mouse or clicks on a scroll bar, a website’s ‘home screen’ should move to the main-content area of the website. As you might expect, jQuery scrollify will help us out here.

I’ve chosen this plugin for a reason. It differs a lot with other, comparable plugins in a sense that it is very fast and efficient, plus has all the necessary features of larger libraries. It is very easy to install and set up as well. You can find lots of documentation about this plugin on the Web.

But the main reason why I’ve chosen jQuery scrollify is that it provides an impeccable structure for HTML. As a rule, analogous plugins tend to add up unnecessary code to the files, and, as you might guess, it leads to lots of issues on the layout stage of the development process. A developer sees that the code is quite neat and clear and just doesn’t expect to find out some additional elements added by the plugin in it.

But jQuery scrollify is quite the other story. Here’s why:

<div class="example-classname"></div>
<div class="example-classname"></div>

<script>

$.scrollify({

  section : ".example-classname",

  });

</script>

Basically, you can create any number of elements with any class you want (e.g. example-classname). After that, you just use jQuery scrollify to declare the names to classes which are used as an ‘unbreakable’ scroll. As you see, the process is quite simple.

How to Enlarge a Block with Hover and Open up a Hidden Block

The task at hand is the following: when a user hovers over any block, it should get bigger in size and open up a hidden block with the text within. Below, you can see that image 3 describes the gist of the problem quite well.

Image 3

On the image above, you can clearly see what happens to an active element when a user hover over it.

But here’s the problem: if we try to build our block in a conventional way (one element per line), it will lose its height when a user hovers over it. Basically, it will come under the absolute positioning rule. But we need that element to be positioned above all others when someone hovers over it. Below is the code that triggers the issue described above.

<div class=”block”>

<div class=”1”></div>

<div class=”2”></div>

<div class=”3”></div>

<div class=”4”></div>

</div>

<div class=”show-more”></div>

In short, if we’re going to use the code above, when someone hovers over the four-class element, an element with show-more class will be positioned above it. And the reason for that is quite simple: the element loses its height property.

Let’s have a look at how I managed to solve that problem. I break down the elements with classes 1-4 per line. Then, I evaluate the element’s height in line and the block’s height where all the elements are stored. After that, I implement the height. Consequently, I get a block which height is similar to the height of a selected element. So, when someone hovers over any info block on the page (and if it is a single block per line), the element with show-more class won’t fidget around the page, blocking other elements.

Here’s a part of my HTML code I used to solve the problem:

<div class=”block”>

        <div class=”help-block”>

<div class=”1”></div>

<div class=”2”></div>

<div class=”3”></div>

</div>

<div class=”help-block”>

<div class=”4”></div>

</div>

</div>

<div class=”show-more”></div>



Image 4

As seen from the image above, element 2 will be positioned above element one if we don’t have a special, backup block to fix that. Here’s the code that is used to enlarge a block on hover:

.your-class:hover{

  -webkit-transform: scale(1.1);

  -moz-transform: scale(1.1);

  -o-transform: scale(1.1);

  box-shadow: 2px 2px 10px rgba(0,0,0, 0.5);

  transition: 0.5s;

  position: absolute;

  z-index: 222;

}

.block-that-you-want-show{

    display:none;

}

.your-class:hover .block-that-you-want-show{

  display:block;

}

Now, I’d like to share a part of code that enables the implementation of info block’s height to our backup block. Here’s how it looks like:

$(".relevant-publications-items .row-relevant").each(function(){

  var mh = 0;

  $(this).find(".item").each(function () {

      var h_block = parseInt($(this).outerHeight());

      if(h_block > mh) {

          mh = h_block;

      }

  });

  $(this).css("min-height", mh + 20);

As you see, that piece of code is not huge but very important. Here’s what behind it. Basically, I take a line and compare the height for every item element with the max height available. But, as all the elements should have the same height, you can measure only a single height stat to move forward.

Bottom Line

When you begin to work on any development task, first off you should focus on choosing the stack of technologies you’ll have to use. In my case, these are bootstrap, jQuery, FontAwesome, etc. as they are quite convenient use.

However, the main reason why I’ve chosen that stack is multitasking. For instance, the Bootstrap grid’s main advantage is that you shouldn’t think much about the responsive part of your website or ponder over styles of tables, buttons, forms, etc.

Basically, you can just edit the code a little bit to product the necessary result. So, if you haven't ever tried the stack I’ve used, give it a try. It will allow you to work with visual elements much faster and with much better results.

Also, I’d like to pay your attention to another feature of that Framework: you can be sure that HTML structure is valid (which is very important). The better your HTML structure is, the better SEO performance you can expect from your website.

I hope that this article will help you develop cool and impressive homepages. Thanks for your time!

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:
bootstrap ,jquery ,web dev

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}