Today we are going to take a look at “marquee” once again. We actually have covered about it in our previous post which talked about using the -webkit-marquee property, but this time we will take this subject a little further.

In this post, we are going to create a marquee-like effect using the CSS3 Animation. That way we will be able to add more functionalities that could not be attained with only the -webkit-marquee.

Unless you are already familiar with the CSS3 Animation module, we recommend you take a look at the following references before proceeding with this documentation:

• CSS3 Animations – W3School
• CSS Animations – Mozilla Dev. Network

Also take a note that, at the moment, CSS3 Animation can only work in Firefox 8+, Chrome 12+ and Safari 5.0+ with the prefixed version (-moz- and -webkit-). However, we will only use the official version from W3C without the prefix to avoid overstuffing this article with superfluous codes.

Addressing Marquee Issue

One of the problems with marquee is that the text is continuously moving. This behavior is disruptive to reading, and the text is also difficult to read. This time, we will try to create our own version of marquee and make it user-friendlier. For example; instead of having the text move continuously, we will stop it when it is fully visible, so the user can read the text for a moment.

The Storyboard (sort of)

Every creative and design creation, like a logo, an illustration or a website, usually starts with a sketch. In the field of animation production, this is done with a storyboard. Before we start on any coding, we will first create a sort of storyboard, to help us visualize our animation.

As you can see from the above storyboard, we plan to show only two lines of text, which will both move sequentially from the right to the left.

Our storyboard is not as complicated as a storyboard for real animation movie, but the point is: we are now able to visualize how our marquee will look like.

The HTML Markup

Since our animation is going to be simple, the HTML markup will also be as simple as:

  <div class="marquee">  	<p>How to add WordPress Related Posts Without Plugins</p>  	<p>Automate Your Dropbox Files With Actions</p>  </div>  

The Basic Styles

Before working around the animation stuff, let’s add some basic styles. Let’s start off by adding a background texture for the html element.

  html {  	background: url('../images/skewed_print.png');  }

Next, we will place the marquee at the center of the browser window as well as add some details like inner shadow, background color and borders.

  .marquee {  	width: 500px;  	height: 50px;  	margin: 25px auto;  	overflow: hidden;  	position: relative;  	border: 1px solid #000;  	margin: 25px auto;	    	background-color: #222;      -webkit-border-radius: 5px;    border-radius: 5px;      -webkit-box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .5), 0px 1px 0px rgba(250, 250, 250, .2);    box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .5), 0px 1px 0px rgba(250, 250, 250, .2);  }

Then, we will position the text – which in this case is wrapped inside a paragraph tag – absolutely, and since the absolute position will cause the element to collapse, we will have to define the width’s element to 100% so as to cover its parent’s width.

  .marquee p {  	position: absolute;  	font-family: Tahoma, Arial, sans-serif;  	width: 100%;  	height: 100%;  	margin: 0;  	line-height: 50px;  	text-align: center;  	color: #fff;    text-shadow: 1px 1px 0px #000000;    filter: dropshadow(color=#000000, offx=1, offy=1);  }

Let’s take a look at the result for a while.

At this point, we have done with all the basic styles we need; you are free to add more or personalized the styles. But, we suggest you stick with our specified marquee dimension (the height and the width) until the end of the tutorial.

The Animation

In short, animation is a presentation of moving objects. Each movement is defined in a time frame. So, when we are working on animation, we are mostly dealing with the Time. We take into account matters like:

• When does the object start moving?
• How long does it take for the object to move from one point to another?
• When and how long should the object remain at a given point?

In CSS3 Animation, the time can be defined with the @keyframe syntax. But, before jumping into this section, let’s first specify the marquee text starting position.

We have planned that the text will start from the right then move to the right. So, here we will first position it to the right using the CSS3 Transformation property.

  .marquee p {  	transform:translateX(100%);  }

Remember, the 100% that we have defined for our paragraph element was equal to its parent width. So, the same will also be applied here; the paragraph element will be translated to the right for 100% which in this example is equal to 500px.

Keyframes

The @keyframe syntax may be a bit puzzling for some people, so here we have created a simple visual guide to help you easily understand what is happening in the @keyframe syntax.

Click here to see the larger version.

The whole animation will last about 20 seconds and is divided into two sequences lasting 10 seconds each.

In the first sequence, the first text will instantly slide-in from the right and remain visible momentarily to let the user read the text, while the second text will remain hidden. In the second sequence, the first marquee text will slide-out to the left, and the second text will immediately slide-in from the right.

And here are all the keyframe codes we need to apply to run the animation.

  @keyframes left-one {  	0%	{  		transform:translateX(100%);  	}  	10% {  		transform:translateX(0);  	}  	40% {  		transform:translateX(0);  	}  	50% {  		transform:translateX(-100%);  	}  	100%{  		transform:translateX(-100%);  	}  }  @keyframes left-two {  	0% {  		transform:translateX(100%);  	}  	50% {  		transform:translateX(100%);  	}  	60% {  		transform:translateX(0);  	}  	90% {  		transform:translateX(0);  	}  	100%{  		transform:translateX(-100%);  	}  }

The left-one keyframes will define the first sequence of the animation, while the left-two keyframes will define the second sequence.

Applying Animation to the Elements

For the animation to work, don’t forget to apply the animation to the element. The first sequence is applied for the first text or in this case first paragraph and the second sequence is applied for the second paragraph as well.

  .marquee p:nth-child(1) {  	animation: left-one 20s ease infinite;  }  .marquee p:nth-child(2) {  	animation: left-two 20s ease infinite;  }

We are all done with our animation; let’s see the results on the browser.

• Demo
• Download Source

Bonus

We can also define the marquee text to move it from top to bottom or vice versa, just like we did in our previous post. Here is how to do it; replace our above Animation codes with this one below to move the text downwards:

  .marquee p {  	transform:translateY(-100%);  }  @keyframes down-one {  	0%	{  		transform:translateY(-100%);  	}  	10% {  		transform:translateY(0);  	}  	40% {  		transform:translateY(0);  	}  	50% {  		transform:translateY(100%);  	}  	100%{  		transform:translateY(100%);  	}  }  @keyframes down-two {  	0% {  		transform:translateY(-100%);  	}  	50% {  		transform:translateY(-100%);  	}  	60% {  		transform:translateY(0);  	}  	90% {  		transform:translateY(0);  	}  	100%{  		transform:translateY(100%);  	}  }

Notice that we have changed the X-axis to Y-axis and flip all the translation negative value to positive and vice versa.

We also have renamed the Animation to down-one and down-two, so we need to re-apply the Animation name in the paragraph element as well.

  .marquee p:nth-child(1) {  	animation: down-one 20s ease infinite;  }  .marquee p:nth-child(2) {  	animation: down-two 20s ease infinite;  }

Or else, if you want to move it the opposite; from bottom to the top. Here are all the codes you need to apply:

  .marquee.up p {  	transform:translateY(100%);  }  .marquee.up p:nth-child(1) {  	animation: up-one 20s ease infinite;  }  .marquee.up p:nth-child(2) {  	animation: up-two 20s ease infinite;  }  @keyframes up-one {  	0%	{  		transform:translateY(100%);  	}  	10% {  		transform:translateY(0);  	}  	40% {  		transform:translateY(0);  	}  	50% {  		transform:translateY(-100%);  	}  	100%{  		transform:translateY(-100%);  	}  }  @keyframes up-two {  	0% {  		transform:translateY(100%);  	}  	50% {  		transform:translateY(100%);  	}  	60% {  		transform:translateY(0);  	}  	90% {  		transform:translateY(0);  	}  	100%{  		transform:translateY(-100%);  	}  }

• Demo
• Download Source

Conclusion

Despite the lack of current browser support, CSS3 Animation, if done properly, will undoubtedly solve many usability issues in the future, like we have done in this example. If we need only a short animation intended for modern browsers, using CSS3 Animation is probably better than having to load a jQuery script.

Lastly, we are aware that this article may be a bit overwhelming for some people, so if you have any questions regarding this article, feel free to post it in the comments section below.

Related posts:

1. Marquee in CSS – Beginner’s Guide
2. 38 Inspiring CSS3 Animation Demos
3. Creating A Rocking CSS3 Search Box
4. How to Create Gmail logo with CSS3

The taste of success in the life of freelancers is much sweeter, if they can overcome the barrage of insecurities scattered on their path to success. Take a peep into the life of a freelancer, and all may look hunky-dory: freelancers seem to work on less than what a full-time employee would, they seem to sleep a lot, and most importantly, they get work based on their own convenience. Those who are not freelancers are particularly impressed by the laidback style that defines the working life of freelancers, which may in turn spur them to decide going down the same path.

(Image Source: Asuka111)

What these ‘outsiders’ don’t see is the amount of hard work and insecurity every freelancer has to go through to realize their dreams. The truth is, despite consistent hard work, not every freelancer can turn up successful. One reason is that they are unable to deal with the pressure of having insecurities as a major part of their career. Those who depend solely on freelancing for their daily bread are the ones who are most insecure.

In this article, we give you an inside look into the insecurities that trouble freelancers and what you have to prepare yourselves for to establish a career in freelancing in the long run.

Recommended Reading: More Freelance-related posts.

Ensuring a Steady Flow of Work

The nature of a freelancing profession is such that nothing is guaranteed. As soon as he completes an assignment, he has to start looking for another one. New freelancers will feel this more than seasoned ones, but even the most successful, at times, struggle to get new jobs. This is the most striking insecurity that freelancers face these days. The tough competition for jobs has made the piece of the pie smaller for each freelancer. To ensure a steady flow of work and income, it is important for a freelancer to build a strong and large clientele to pull assignments from. It is equally as important for freelancers to complete each assignment well, and win over the client. A satisfied client will return with more job offers. Building good rapport with clients will pave more opportunities for freelancers, keeping the hunt for assignment minimal, so that more time can be spent on getting the job done well.

Fear of losing clients

In all my years as a freelancer, I feel that losing a client tops the list of a freelancer’s insecurities. It’s hard for me to pinpoint the reasons for a loss. I had faced situations in which I thought I had completed assignments perfectly, but still, I lost the client. Despite the amount of hard work you put in, clients can be very hard to deal with at times. I came to realize eventually that it’s not just about doing things perfectly, but also doing them in a manner which impresses your clients.

(Image Source: Kusut Masai)

This is why freelancers should never get complacent with their work, even when working with long-term clients. Such an attitude could be detrimental to your career. It doesn’t matter how many good jobs you have done for them, it takes only one mistake to make a clients stop coming back to you. Each client is precious, so give your best in order to retain your clients. One good thing from this insecurity is that a little fear could turn into a recipe for success.

Scouting for New assignments

You never know when you may go through a dry spell when it comes to getting assignments from your clients. At times, there seems to be no end to the wait for the next job. Such situations do arise, and the best thing a freelancer could do is to scout for new sources of job opportunities. But even this should be attempted within reason – don’t increase your clientele base too quickly, otherwise you might just crash from the overlapping deadlines and conflicting requirements.

Fulfilling commitments from a long list of clients simultaneously can affect freelancers. You don’t want to deliver a bad first impression with new clients and you can’t afford to renegade on the deadlines set by your long-term clients. The decision on which job to rush first may be a real pain, so it’s best to not put yourself in the terrible position to have to choose.

Quoting the Worth of your Services

Many freelancers fall into a dilemma when asked to quote a price for their services. They fear losing a client if they quote a higher price. On the other side of the fence, clients might reject freelancers who quote below par for their services, believing that they may not be up to the mark for the required task. I myself had faced similar situations when I was not sure on how to break the ice. The best solution I follow is to quote a price I have been charging other clients. It is important to find jobs that pay according to your expectations. Finding jobs that pay less will always throw you into a fix. These clients will never increase the price, and instead may force you to decrease your price.

Losing money from unsatisfied clients

There are plenty of instances when freelancers fail to receive their payment, just because the client believes that the completed assignment is what was requested, or substandard. You may have worked hard all through the project, given 18 hours a day to it, but finally, all your efforts go unrecognized and poured down the drain. If your client has decided not to use your work, there is very little you can do anything about it. A freelancer will always be plagued with the fear that a client might refused to pay, if he doesn’t like the work. The only way left is to sell the work to someone else. If your client refuses to pay you the money for the completed assignment, you have the right to sell it to other clients, or use it somewhere else. A client may have his own reason for not accepting your work. Instead of worrying about the money lost, think of ways to salvage what you can by taking your work elsewhere.

Conclusion

Insecurities will always exist for freelancers. The best freelancers are those who learn to accept and overcome such insecurities and come out stronger than ever. In the freelancing line, you have to learn to live with these insecurities and learn to deal with them.

Related posts:

1. 6 Essential (But Boring) Tasks Freelancers Hate Doing
2. Freelancers: 3 Ways to Motivate Yourself When You’re Running Low
3. Freelancers: 8 Awesome Reasons Why You Should Join Online Forums
4. Brainstorming Tips and Techniques for Freelancers

Watching movies with fast or delayed subtitles is like singing a karaoke song when the subtitles doesn’t sync with it’s music. It can be stressful especially when it’s a movie you like to watch, but which is not in your own language.

Probably, the ability to just pause a movie and drag the subtitle to a suitable timeline position may put you at ease, but this is never the case. So having the option to edit the subtitle so that it will sync with your movie timeline may be a solution you want to look into.

That’s right, there’s a way to re-sync your movie subtitle and we will show you how to do it with KMPlayer, a video player that supports many video formats with options to change, re-sync and even edit your movie subtitle.

Recommended Reading: How To Make Time-Lapse Video – Ultimate Guide

Sync subtitles with the video

In this tutorial, we will be using KMPlayer to sync subtitles with its video, therefore if you don’t have one, head over to the download page and install KMPlayer on your computer.

1. When it’s already installed, launch KMPlayer and open the video you want to re-sync the subtitles of.

   

2. Click on the Control Box at the bottom left of the KMPlayer.

   

3. Click on the ‘A’ icon to edit (re-sync) the subtitles.

   

4. Now you will be presented with a small window of options to edit your subtitle.

   

   The button ‘Sync-’ is to delay the subtitle for the current timeline, while ‘Sync+’ is to fast-forward the subtitle, both changes are by 0.5 seconds. Click on ‘Resync’ if you want to specifically set the delay time.

   In this tutorial, we will do some changes for the whole movie, now click on ‘More…’ button.

5. Now you will be listed with all available subtitles for the video, alongside the timeline.

   

6. Double-click on the subtitles you want to re-sync. At the top left of the edit window, there are number of buttons you can use to re-sync your subtitles.

   

   [ - Delay subtitles by -0.5 seconds

   ] – Push forward subtitle by +0.5 seconds

   TS – Sync whole subtitle with a specific time

   SS – Sync the selected subtitle with a specific time

   R – Reset subtitle sync

   S – Reset selected subtitle sync

   There are more buttons at the top right of the window, but you will be using more on the left.

7. Now to specifically re-sync selected subtitle, double-click on any specific subtitle, click on the ‘SS’ button and set the time you want to adjust, use positive integer to push-forward while negative integer to delay a little. When ready, click ‘OK’ and your subtitles will re-sync following the time you have set.

   

   Note: The time set is in mili seconds.

Conclusion

Everything is now set with KMPlayer. Now you need not stress out from watching movies with delayed subtitles, since you can now re-sync the subtitles on your own, on any specific line or for the whole movie. There are many more options available on KMPlayer which you can explore and find useful.

Related posts:

1. How to Make Time-lapse Video – Ultimate Guide
2. How To Make Your Own Facebook Timeline Movie [Quicktip]
3. Free and premium Video Hosting Platforms – Best Of
4. How To Sync ITunes From Mac to Android [Quicktip]