Affiliate Marketing – Is it Still a Viable Source of Income?

There are many ways that you can make money online. The internet has given rise to eCommerce, and this in turn has paved the way for companies like Amazon. As a result, we now have things like affiliate marketing. Affiliate marketing is essentially where you get paid to promote and sell other company’s products.

For example, you can become an Amazon Associate. This means that you will provide links to various Amazon products on your website. When customers click on the link and make a qualifying purchase – you get a commission. But is this still a viable business plan and can you make money from affiliate marketing? Find out below.

Advantages of Affiliate Marketing

First, let’s look at the advantages of affiliate marketing. What makes it so popular? The following are some of the main advantages:

  • You don’t have to develop and sell your own products.
  • There is no shipping or delivery to organize.
  • Someone else essentially fronts the main business’s costs.
  • There is a vast range of affiliate platforms and products available.
  • Anyone can become an affiliate marketer with minimum experience.

As you can see, it is an accessible business model. Anyone can sign up to affiliate platforms and start promoting products on their website. Also, due to the event of simple website builders like Weebly and Wix, anyone can easily create a website.

Also, the main advantage is that you do not have to do anything other than research products and advertise them on your content. You don’t have to design and manufacture products. Nor do you have to deliver products or deal with customer feedback – you are essentially a third-party marketing tool for the business that actually makes the product.

Disadvantages of Affiliate Marketing

However, affiliate marketing does have its drawbacks as you can see below:

  • It is a highly competitive market with many other affiliate marketers.
  • Commission can often be low.
  • The commission is usually only based on qualifying product sales, not just clicks.

It is an incredibly competitive type of business – there are thousands of other people doing exactly the same thing. It also takes time to research the best products and to develop an SEO strategy to promote your website to hopefully earn an affiliate commission. You may also have to do additional promotions like creating business cards (You can use tools like Businesscards.co to do this) or social media campaigns.

So Can You Make Money Via Affiliate Marketing?

The short answer is yes. Affiliate marketing is still lucrative and there is certainly money to be made. However, you cannot expect to make a fortune overnight, with minimal effort.

Developing a successful affiliate portfolio and brand takes time and effort. Firstly, you must spend time developing a business website or blog where you can utilize affiliate links. This in itself is no small task.

Secondly, you must then promote your website or blog successfully to gain exposure. As a result, you may have to learn basic SEO, and how to optimize your web content for search engines like Google. This again takes time and effort, and you must be willing to learn new skills.

Lastly, you must also spend time researching products and develop strategies for your affiliate business. There are millions of potential products that you could promote – but which are suitable for your business? You must therefore be willing to spend time looking through platforms like Amazon, and finding out which products have the best potential to earn a commission.

So yes, it is perfectly possible to make money with affiliate marketing – but it may not be as simple as you may have initially thought!

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How To Create A Responsive Pinterest Style Layout With CSS

If you’ve seen the layout on Pinterest you probably already know what we are going to be creating here. If not, it’s essentially the stacking of divs or images of different sizes with a set number of columns (view demo). We really do love this style of layout, it gives a different kind of look to the standard Bootstrap columns. So let’s begin:-

HTML


<div class="container">
	<div id="list" class="section">
		<div class="item" style="height: 14em;"></div>
		<div class="item" style="height: 26em;"></div>
		<div class="item" style="height: 8em;"></div>
		<div class="item" style="height: 14em;"></div>
		<div class="item" style="height: 8em;"></div>
		<div class="item" style="height: 18em;"></div>
		<div class="item" style="height: 16em;"></div>
		<div class="item" style="height: 12em;"></div>
	</div>		
</div>

CSS


#list {
    width: 100%;
    overflow: hidden;
    margin-bottom: -1.875em;
    -webkit-column-count: 3;
    -webkit-column-gap: 1.875em;
    -webkit-column-fill: auto;
    -moz-column-count: 3;
    -moz-column-gap: 1.875em;
    -moz-column-fill: auto;
    column-count: 3;
    column-gap: 1.875em;
    column-fill: auto;
}

.item {
    background-color: #169fe6;
    margin-bottom: 1.875em;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
}

You can see a working demo here.

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How To Start Learning HTML – A Beginners Guide

Being a computer programmer usually means that you can expect open job positions anytime while also sustaining your own tech-related needs sufficiently. Indeed, even knowing the basics of computer programming can get you places you never thought of before.

But there are other reasons to get started with computer programming and coding. For instance, learning HTML can help you easily build your own website from scratch. Hence, here’s how to start learning HTML even as a beginner.

What Is HTML and Why Do You Need It?

HTML stands for Hypertext Markup Language. To put it simply, it is a language used for writing websites and their web pages. HTML is somewhat like a backbone for websites making their pages functional and creating the structure of your website. In addition to HTML, you will need to use CSS (or Cascading Style Sheets). This is another language used for creating the visual look of your web pages.

Created in 1989, HTML was the invention of Tim Berners-Lee and Robert Cailliau among others. The latest version of HTML is HTML5. As you start learning HTML, you will likely realise that it isn’t as difficult as it may seem at first. It’s just a matter of building a strong foundation with basic HTML knowledge and then learning more about it as you go.

Organise Your Learning Process

Before you begin learning HTML, you should first think about organising your learning process. By having a schedule for your study sessions and considering all the learning materials you will be using, you will be able to get ready on time and organise yourself better. And, of course, by being organised, you will be able to manage your time much better, learning at a faster pace and getting other work done throughout the day swiftly.

In other words, organising your learning process will help you save a lot of time and effort while also streamlining your learning journey. After (or even before) you have chosen your courses and study materials, think about how often you can actually study. Aim for at least three to four hours a week and adjust your schedule accordingly. If you enrol on a course with a fixed schedule, you will also have to take this into account when making your schedule.

But how long will it take you to learn HTML properly? The good news is that you can grasp the basic elements of HTML in no more than a few hours. However, these are just the bare basics and no more than that. To truly understand HTML or even master its advanced elements, you will need to invest more time in learning theory and practising what you have learned. Practice is the keyword here – without it, you won’t be able to learn HTML properly.

Consider Other Things You Should Learn

As mentioned earlier, HTML is not the only thing you will need to use to create your website. There’s also CSS to think about because the two come together. As Veronica Hills professional essay writers review site puts it, “HTML lets you create the skeleton for your website while CSS builds on it creating the bones, the muscles, and everything else.”

Much like with HTML, CSS will require you a few hours to grasp the basics and then tons of practice to properly learn it. Luckily, many resources available to you for learning actually combine materials for HTML and CSS which means you can learn the two simultaneously. Alternatively, you can first seek out HTML resources and then move on to CSS once you are confident with using HTML.

Choose Your Learning Platform and Resources

So, how exactly can you start learning HTML? Well, you can buy a book, enrol in a university course… or you can start learning it yourself by finding relevant online courses or using online learning materials. Here are some options to consider:

  • W3Schools is a website that covers the basics of such languages as HTML, CSS, Python, JavaScript, and others. There are examples and interactive tests available absolutely for free.
  • freeCodeCamp is a free online course on HTML and CSS focusing on practice.
  • Udacity is an e-learning platform where you can find free HTML and CSS courses taught by an instructor who will explain all the basics to you.
  • Codecademy is one of the most popular platforms for learning HTML piece by piece and focusing on theory.
  • HTML.com is a website for beginners who want to learn HTML. It has step-by-step tutorials guiding you through the foundations of the language.

HTML Editors You Can Use

Last but not least, as you study HTML, you will need to use an HTML editor. As experts from the best websites with custom writing reviews say, “Never use word processors for writing HTML code. Instead, use an HTML editor. Test what you’ve written in different browsers to see how your work varies depending on the browser you use.” Here are some HTML editor options to check out:

  • Notepad++ is a very popular choice in the realm of HTML editors but it can also be used for other languages. It is a small program that offers the basic functions for you to write your code as clean as possible. It has a simple design preventing you from getting distracted and also has some plugin options for more functionality. In addition to that, it has a very handy autocomplete feature. However, Notepad++ isn’t supported by Mac computers and can be a bit difficult to get used to as a beginner.
  • Sublime Text 3 is another popular HTML editor which is both free and available for multiple platforms, including Windows, Mac, and Linux. The best thing about this HTML editor is that it is quite user-friendly and has a number of customisation options while also having a visually appealing interface to look at. On the other hand, there is no toolbar or dashboard and you can’t print code or documents.
  • Komodo Edit is another interesting option to check out. It is a free, open-source editor that supports multiple languages and offers different extensions. Komodo Edit is known for having a user-friendly interface and being supported on multiple platforms (Windows, Mac, Linux). That being said, there is no default autocompletion and some of the settings are hard to find and change.

Final Thoughts

All in all, learning HTML definitely has a variety of benefits, no matter what job you are performing or how you will be applying your HTML knowledge. Whether you want to be a computer programmer, or you are a small business owner looking to build your own website, learning HTML is the way to go.

That being said, as you set out on your learning journey, you will need to follow a number of best practices to be successful in your endeavour. Use the tips in this article to help you start learning HTML.

Frank Hamilton - Profile

Posted by: Frank Hamilton

Frank Hamilton is a blogger and translator from Manchester. He is a professional writing expert in such topics as blogging, digital marketing and self-education. He also loves traveling and speaks Spanish, French, German and English. Meet him on Facebook and Twitter.

 

It’s good to share

How to get the selected file name from an input type file using jQuery

Today we will show you how to get the selected file name from an input type file using jQuery. On a recent job, we were using a form where a user could add up to 3 images to upload to a contact form on CF7. We styled this to look as follows:-

So how do we get the filename on a selection of a file? The answer is jQuery’s change() method.

You can use the jQuery’s change() method to get the file name selected by the HTML form control <input type="file" />. Let’s check out an example to understand how it works:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Selected File Name</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
    $(document).ready(function(){
        $('input[type="file"]').change(function(e){
            var fileName = e.target.files[0].name;
            alert('The file "' + fileName +  '" has been selected.');
        });
    });
</script>
</head>
<body>
    <form>
        <input type="file">
        <p><strong>Note:</strong> Choose any file on your computer and its name will be displayed in an alert dialog box.</p>
    </form>
</body>
</html>

In our case scenario, we wanted to display the filename inside the file box, in which case we added the following to the HTML:-


    <div class="icon-add-file"></div>

So all we did was replace the alert with the following JS code:-


$('.filename').html(fileName);

// If you are using multiple file uploads, you will have to do some traversing, in our case we had to get the parent(x3) selector and find the .filename class:
$(this).parent().parent().parent().find('.filename').html(fileName);

Replacing the default file inputs

Okay, so you might have looked at the first screenshot and wondered how we replaced the default styling of the file input boxes. Don’t worry, we have you covered here as well.


.file-wrapper {
    padding: 10px 20px;
    border: solid 2px #F8F8F8;
    background: #F8F8F8;
    color: #818586;
    max-width: 100%;
    outline: none;
    height: 150px;
    width: 100%;
    display: block;    
}

div.wpcf7 input[type="file"] {
    width: 100%;
    height: 100%;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
}

.icon-add-file {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;    
    background-image: url(../img/icon-plus-symbol.png);
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;    
}

.file-wrapper .wpcf7-form-control-wrap {
    position: relative;
    width: 100%;
    display: block;
    top: 0;
    left: 0;
    height: 150px;
    margin-top: -23px;
}

So what we did here was that we hid the original styling of the file input using opacity 0, we then added a background image which covers the grey input box so anywhere can be clicked to bring up the file upload window. In our example, we were using CF7 so the code may need to be amended to your project.

Well, we sure hope this helps, if you have any questions let us know and we’ll get back to you!

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Limit Text Length to X Lines Using CSS

In this tutorial, we are going to show you how you can limit text length to the number of lines you would like to use with CSS.

Is it possible to limit a text length to “X” amount of lines using CSS? The answer is yes.

There is a way, but it is webkit-only. However, when you combine this with line-height: X, and max-height: X*N, it will also work in other browsers, just without ellipses.

Let’s take the following HTML:-


<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur venenatis blandit. Praesent vehicula, libero non pretium vulputate, lacus arcu facilisis lectus, sed feugiat tellus nulla eu dolor. Nulla porta bibendum lectus quis euismod. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat.
</div>

If we want to limit this so it only shows the first two lines of text we can do so by using the following CSS:-


.text {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   line-height: 16px;     /* fallback */
   max-height: 32px;      /* fallback */
   -webkit-line-clamp: 2; /* number of lines to show */
   -webkit-box-orient: vertical;
}

And there you have it, the text will now only show 2 lines of text regardless of how many lines it contains.

Where is this useful? Well, we recently used this when we had 3 columns displaying news posts and the heights of the boxes were varying heights because of the length of the title. In fact, we actually use this same method on our blog page.

We hope this helps, happy coding everyone!

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Display Related Posts in WordPress

In this tutorial, we are going to show you two ways to display related posts on your WordPress website.

If you know a bit about bounce rate, you are probably already showing related posts on your website. Essentially, the bounce rate is a metric that measures the percentage of people who land on your website and do completely nothing on the page they entered. So they don’t click on a menu item, a ‘read more’ link or any other internal links on the page. This can have an effect on things such as your AdSense earnings. By following this tutorial and adding Related Posts to your WordPress; you are killing three birds with one stone. You are decreasing your bounce rate, increasing your AdSense income, and lastly, you are increasing your page views. As always, we will show you two methods in which you can add related posts to your WordPress website.

How to Display Related Posts in WordPress without a Plugin

As always, we start with our preferred method of adding this without a plugin. In our example, we are going to display two related posts which link to the post. We are adding the featured image, the category, the date, the title and a read more button.

The code can simply be pasted into your single.php file in a position in which you want to display your related posts.


// Related Posts
$tags = wp_get_post_tags($post->ID);
if ($tags) {
	echo '<h3>Related Posts</h3>';
	$first_tag = $tags[0]->term_id;

	$args=array(
		'tag__in' => array($first_tag),
		'post__not_in' => array($post->ID),
		'posts_per_page' => 2, // How many Posts to display
		'caller_get_posts' => 1 // A way to turn sticky posts off in a query.
	);
	$my_query = new WP_Query($args);
	if( $my_query->have_posts() ) {
		while ($my_query->have_posts()) : $my_query->the_post(); ?>										
			<a href="<?php the_permalink(); ?>">
				<?php if(get_the_post_thumbnail_url()) { ?>
    				<img alt="Related - <?php the_title(); ?>" src="<?php echo get_the_post_thumbnail_url(); ?>" />
    			<?php } else { ?>
    				<div class="img-holder"></div>
    			<?php } ?>	
			</a>												
			<?php $category = get_the_category(); ?>
			<p><?php echo $category[0]->cat_name; ?> / <?php echo get_the_date(); ?></p>													
			<a href="<?php the_permalink() ?>" rel="bookmark"><h4><?php the_title(); ?></h4></a>
			<a class="btn" href="<?php the_permalink(); ?>">Read More</a>
	<?php
	endwhile;
	}
wp_reset_query();
}

How to Display Related Posts in WordPress with a Plugin

A plugin can be used instead to do a similar thing. We used Yet Another Related Posts Plugin (YARPP) which gives a list of posts or pages related to the current blog post.

The key features of this plugin are:

  • You can use thumbnail or list view for your related content.
  • It will display related posts, pages, and custom post types.
  • It has a templating system which gives you advanced control of how your results are displayed.
  • It has an advanced and versatile algorithm. This is a fully customisable algorithm which considers post titles, content, tags, categories, and custom taxonomies. A very great feature to ensure your posts are accurately related to the post.
  • It includes an option to display related posts in RSS feeds with custom display options.
  • It includes REST API support which enables you to embed related posts in your web or JavaScript-driven app!
  • It includes shortcode support. So you can simply add the [yarpp] shortcode to place related posts anywhere you like.
  • It supports HTTPS and WordPress Multisite
  • And it's a plugin that is maintained with regular updates

Sounds good right? Download YARPP.

Conclusion

We now know of two methods on how we can add Related Posts to our WordPress website. We also now know the importance of how this can improve our bounce rate. So, which method did you prefer? Let us know in the comments below!

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How To Prevent Pasting Into Input Fields

In this tutorial, we are going to show you how you can prevent users from being able to copy and paste input values into certain fields. This can be especially useful when you have repeating fields for verification. For example, you may want to prevent users from copying the password into the repeat password input field, or you may want to do the same thing if you wish to include a repeat email address field. This is useful as it ensures the password the user is entering is correct, and it also ensures users receive email from your website. Let’s say you input the incorrect email address and then you copy this to the repeat email box, the user could end up not receiving the two-step certification email and in turn, this could lead to customers no longer using your website. You don’t want this to happen so sometimes this can be really effective to have in place.

So, how is this functionality achieved? How can we stop your users from pasting content into an HTML input field?

Well, we can use JavaScript to target an input field’s paste event and change how it works like so:


<input type="text" id="no-paste" />

<script>
if ( $('#no-paste').length > 0 ) {  
  const pasteBox = document.getElementById('no-paste');
  pasteBox.onpaste = e => {
    e.preventDefault();
    return false;
  };
}
</script>

What this code does is cancels the default behaviour of the paste event (i.e. pasting the contents of the clipboard into the input element). When the user tries to paste the content into the field, using either a keyboard shortcut or context menu, nothing will happen. We also wrapped this with if ( $('#no-paste').length > 0 ) {   }, so that the script will only running on pages where it contains the #no-paste element, otherwise you will get an error.

If you want to check out a working CodePen of this in action, you can do so here.

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Create A Simple Looping Background Colour Animation With CSS

In this tutorial, we are going to create a simple animated background colour animation which loops with pure CSS using keyframes along with various CSS animation properties.

In our example, we are going to set this to the body element. However, you can apply the code to any HTML element of your choice either with an id or class. You can check out the CodePen here if you prefer.

Before we begin, let’s understand the looping animation and how we want the end result to appear:

  • How many background colours do we want to use?
  • How long should total animation duration last?
  • What type of animation type should we use?

In this tutorial, we are going to keep things simple and use:

  • Five different background colours
  • A duration of ten seconds (each color gets displayed two seconds)
  • A linear animation curve (the animation has the same speed from start to end)

We used Coolers.co to generate a nice colour palette for our example:

If you want to use the same colour palette then visit this link.

These are the hex colours for the background animation we used in our example:

  • Sunset Orange: #EE6055;
  • Medium Aquamarine: #60D394;
  • Pale Green: #AAF683;
  • Mellow Yellow: #FFD97D;
  • Vivid Tangerine: #FF9B85;

Right, so lets now dig into it!

How to Create the looping CSS animation

The CSS animations keyframes work in percentages from 0% to 100%. So let’s start by adding the following CSS code:


@keyframes backgroundColorPalette {
  0% {
    background: #ee6055;
  }
  25% {
    background: #60d394;
  }
  50% {
    background: #aaf683;
  }
  75% {
    background: #ffd97d;
  }
  100% {
    background: #ff9b85;
  }
}

We have now created the keyframe property called backgroundColorPalette with five separate intervals; these have been dividing evenly between 0% and 100%.

With this part done, now we can create the CSS rules to animate the body and put our backgroundColorPalette keyframes to action.

Now, let’s add the following CSS animation properties inside your body selector:


body {
  animation-name: backgroundColorPalette;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

If you’ve done everything correctly, you will now have a background colour animating evenly between five different colours with a linear animation. Pretty cool aye?

So how does the CSS work exactly?

  • First of all, we added the animation-name property and set the value to backgroundColorPalette. Now the background colour keyframes we previously created were then assigned to the body element.
  • We used the animation-duration property and gave it a value of 10s – This sets the total duration time to ten seconds to process the keyframes we defined.
  • We used the animation-iteration-count property and set the value to infinite. This is so the animation can run in a constant loop and run indefinately.
  • We used the animation-direction property and give it a value of alternate. What this does is it makes the animation play from beginning to end, and from the end to the beginning. We use this property value to avoid an not so attractive jump which happens if you use the normal animation direction value.

And there you have it, liked our tutorial? Then drop us a comment below. If you need any help or further explanation then get in touch!

Live Example

So we decided to create this animation below so you could see how it looks like. We added this HTML; <div id="background-transition"><h3>ANIMATED BACKGROUND</h3></div> then simply replaced body with the ID of the DIV element which in our example is; #background-transition

ANIMATED BACKGROUND

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How To Create A Modern Scroll Down Animation Icon With CSS

In this tutorial, we are going to show you how to create a modern scroll down animation which you can easily add to any website.

These types of animations are typically used on websites that have a full-screen header in which you add an animated element to demonstrate that there is more content on the website if you scroll down.

You can have a look at how this animation works on this CodePen we created.

In a previous article, we created a different type of animation, if you want to check that one out then click here.

So let’s begin with this tutorial; for this we just need to add the following HTML and CSS code:


<div id="scroll-wrapper">
  <div id="scroll-wrapper-inner">
    <div id="scroll-title">Scroll</div>
    <div id="scroll-down"></div>
  </div>
</div>

body {
  background: #20232c;
}

#scroll-wrapper {
    position: absolute;
    display: table;
    width: 100%;
    height: 100%;
    z-index: 9;
    pointer-events: none;
    left: -30%;
}

#scroll-wrapper-inner {
    display: table-cell;
    vertical-align: bottom;
    width: 100%;
    height: 100%;
}

#scroll-down {
    display: block;
    position: relative;
    padding-top: 79px;
    text-align: center;
}

#scroll-title {
    display: block;
    text-transform: uppercase;
    color: #FFF;
    font-family: "Courier-Prime", sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.4em;
    text-align: center;
    transform: rotate(90deg);
    margin-bottom: 45px;
}
#scroll-down::before {
    -webkit-animation: elasticus 2.9s cubic-bezier(1, 0, 0, 1) infinite;
    -moz-animation: elasticus 2.9s cubic-bezier(1, 0, 0, 1) infinite;
    -o-animation: elasticus 2.9s cubic-bezier(1, 0, 0, 1) infinite;
    animation: elasticus 2.9s cubic-bezier(1, 0, 0, 1) infinite;
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -1px;
    width: 2px;
    height: 90px;
    background: #FFF;
    content: ' ';
}
@-webkit-keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}
@-moz-keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}
@-o-keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}
@keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}

And it’s as simple as that!

With this example, we are centring the scroll down animation. If you want to quickly move the position of this we can add left positioning to the #scroll-wrapper element with either a negative or positive percentage value (depending on where you want this displaying).

We hope you enjoyed this tutorial if you need any help implementing; drop us a comment below!

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

CSS – Indenting the second line of LI (List Items)

Have you ever wanted to indent the second line of a list item instead of it appearing directly beneath the bullet point? This is probably why you are here and below is probably the result you are looking for:

Today we are going to show you an easy way to do this.

The reason this is happening is that the tick is inline content so when the text wraps it will continue to flow as usual.

You can stop this behaviour by taking advantage of text-indent:

The text-indent property specifies how much horizontal space should be left before the beginning of the first line of the text content of an element.

By supplying a negative text-indent you can tell the first line to shift a desired amount to the left. If you then specify a positive padding-left you can cancel this offset out.

In the following example a value of 20px:-


ul {  
    list-style: none; 
    width: 200px; 
    text-indent: -20px; /* key property */
    margin-left: 20px; /* key property */
    
}
li { margin-bottom: 10px; }

And there you have it, here is a CodePen of the above in action.

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share