CSS Tricks: August 2016

Smooth scrolling for your website is very useful to look your site professional and stunning. Smooth scrolling effect will provide an excellent feeling of scrolling a site when you scroll an anchor link within the same page.

Steps:

Install jQuery on your webpage either linking to any CDN (Content Delivery Network) or downloading jquery package.

Both Google and Microsoft host jQuery and you can grasp latest version of jQuery from there. Simple use either one from below:

Google CDN:

1:  <head>  
2:  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  
3:  </head>

Copy/paste below codes anywhere of your page you want to use the effect. You can use the code in header, footer, or body of you page.

1:  $(function() {  
2:   $('a[href*=#]:not([href=#])').click(function() {  
3:    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {  
4:     var target = $(this.hash);  
5:     target = target.length ? target : $('[name=' + this.hash.slice(1) +']');  
6:     if (target.length) {  
7:      $('html,body').animate({  
8:       scrollTop: target.offset().top  
9:      }, 1000);  
10:      return false;  
11:     }  
12:    }  
13:   });  
14:  });

Congratulations you are done!

In this brief tutorial I will be showing you how to add a big triangle that will add a bit of flare to your designs.

**Note that this tutorial is geared toward Platform 5 users and may not work as intended for other frameworks or themes.**

To begin we need to add some important css. The first bit of css will give the sections a relative position this will help contain the before and after elements we will add. Next we need to contain any overflow that might happen so you don't get a scroll bar at the bottom of your webpage.

Here is the CSS we will be adding:

1:  section {  
2:  position: relative;  
3:  overflow: hidden;  
4:  }

Adding the triangle effect

Let me explain how the effect works.

The triangle effect is applied to the section above to give the illusion that it is part of the one below it. So the color of the triangle should match the color of the section that it is on top of. I hope that make sense if not be sure to leave a post in the comments.

For the effect we will be use the pseudo classes :before and :after .

Here is the CSS for the big triangle:

1:  .big_triangle {  
2:    background-color: #286090;  
3:    height: 20px;  
4:  }  
5:  .big_triangle:before {  
6:    right: 50%;  
7:    border-right: 1000px solid transparent;  
8:    border-left: 1000px solid;  
9:  }  
10:  .big_triangle:after {  
11:    left: 50%;  
12:    border-left: 1000px solid transparent;  
13:    border-right: 1000px solid;  
14:  }  
15:  .big_triangle:after,  
16:  .big_triangle:before {  
17:    content: '';  
18:    position: absolute;  
19:    bottom: 0;  
20:    width: 50%;  
21:    z-index: 100;  
22:    border-bottom: 100px solid #FFF;  
23:    -moz-transform: rotate(0.000001deg);  
24:    -webkit-transform: rotate(0.000001deg);  
25:    -o-transform: rotate(0.000001deg);  
26:    -ms-transform: rotate(0.000001deg);  
27:    transform: rotate(0.000001deg);  
28:  }

Heare is html example :

1:  <section class="big_triangle_wrapper">  
2:    <div class="container">  
3:      <div class="row">  
4:        <div class="col-md-12">  
5:          <h2 class="text-center">What We do</h2>  
6:          <p class="text-center">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>  
7:        </div>  
8:      </div>  
9:    </div>  
10:    <div class="big_triangle"></div>  
11:  </section>

To have the triangle show up we will need to add the class of big-triangle to the container.

If you have done everything correctly you should see your triangle. To view some other examples visit here.

Congratulations.

CSS Tricks

Tuesday, August 23, 2016

Smooth Scrolling Effect Using jQuery Simple Code

Steps:

Congratulations you are done!

Creating The Big Full Widht Triangle Separator

Heare is html example :