DOF Typography, what the hell is that exactly? Well I needed one day to make the text from a header page someway different, sadly color, position, angle and all other stuff didn’t quite get the main idea of different. Then I thought to make it look like the letters were put there by hand and look like they were hanging, some sort of smooth 3D effect.

Well the idea is not new I’m sure of that, but the solution to do it in Photoshop is quite easy peasy and no super cool plugins or 1000 layers are necessary (feel free to search for other solutions over the net, but this is how I did it so stick around to see my version).

The Desired Effect – Magnified

So, the desired effect in the end should look like the one in the example above, you can see that some letters are in front of the others and the light casted drops a shadow just enough to make them look like they are hanging there without a pin (some sort of a 3D effect)

Step 1 – Add some background

Let me show you how easy is to make something like this. Open PhotoShop and create a new document, 2000 x 1000 pixels with transparent background.

Rename the newly created Layer 1 in Background (or something to tell you that in this layer the background color will be painted) and using the bucket tool () add some color to the layer. I used #000d1b.

Step 2 – Add the Letters Using Individual Layers

In order to get the desired effect each letter from the word or phrase that we need to make must be separate in different layers because later on we will rearrange them to make the effect. I chose for my example the word MAKE and I have created the letters as I said in different layers like the image bellow.

Now using the Align Vertical / Horizontal Centers align them to be in the absolute middle of our document. I used a folder to do this after I aligned all the Text Layers to be on the same Bottom edge. The document should look like this now:

I used the Berlin Sans font for my example but you can use whatever font you like as long as it’s bolded and thick so you can make the effect more obvious.

Step 3 – Bring them all together

Now we need to bring the letters closer to one another and overlap them a little bit so we can do the magic afterwards. Use the SHIFT key (press and hold) to move them on a horizontal line so you won’t break the bottom alignment.

They should look like this now:

I’ve added a red stroke so you can better see what I’m talking about.

Step 4 – The True Power of “Drop Shadow”

You didn’t expect this right? Now go and move the A letter in front of all the other letters by dragging the layer on top of everyone. Go to Blending Options and select Drop Shadow. From the properties pane make the following changes:

Now select also Bevel Emboss and set the style to be Inner Bevel, softened to the max and the size to be only 5 pixels so we give the letter a smooth 3D effect. Also look at my Shading settings bellow and see how it looks like directly on the document, because these settings differ from the type of font you are using so be free to play along with this one.

Now press Ok and take a look at the document, can you see the difference? The A letter stands in front of the other and the shadow makes it look very cool.

And this is it, pretty Easy, right? Now to complete the effect, apply the same settings to the K letter using Copy Layer Style and Paste it over the K layer. To the other letters M and E you should only set the same Bevel and Emboss settings without the Drop Shadow effect and that’s it, you are done.

The Conclusion

Using just the basic settings from Photoshop and the very common drop shadow effect you can create very cool and interesting effects for you Typography. If you have a long word or a phrase try to play with the order of the letters and bring them in front of all the others until you get the desired effect.

You can also ditch the Bevel and Emboss effect and leave them as they are if you like them more like this, the effect looks very cool also without bevel so you can play with this settings also, I personally prefer the effect to be without Bevel and Emboss.

Ei bine totul a inceput in dimineata lui 12 Iunie cand trebuia sa ma intalnesc cu Luana sa ajungem si noi la timp ca doar suntem oameni seriosi. Ajunsi la Hotel Pantex cu 10 minute intarziere am constatat  cu stupoare ca nu eram ultimii oameni veniti, dar printre primii. Dupa ce ne-a explicat Bobby ca o sa ii asteptam si pe ceilalti, care s-au anuntat, am schimbat o vorba doua cu cateva persoane. Una peste alta intr-un final am inceput workshopul.

Cine ce si de ce, ultimul blogtrip

Au vorbit Bobby, Dorin, Tudor, Bogdan si Adrian. Primul a fost Bobby care a vorbit despre Blogtrip, ce inseamna el si cum ar trebuii noi cei care participam la asa ceva sa incercam sa furam din experienta celor din jurul nostru. Am zis experienta, si zic experienta pentru ca din ce am vazut eu noi incercam sa cautam raspunsul la intrebarea “Ca sa fac asta … ce trebuie sa fac mai exact?” scurtatura catre marea lovitura, calea usoara catre obiectivul nostru. Este aproape imposibil sa ne raspunda cineva la intrebarea de mai sus. Tot ce pot oamenii din jurul nostru sa faca este sa ne arate o cale sa ne ajute cu un sfat si sa ne impartaseasca experienta lor, iar noi mai departe pentru ca suntem fiintele superioare pe acest pamant (desi incep sa ma indoiesc de asta) prin personalitatile noastre diferite si prin natura  noastra diferita de la individ la individ trebuie sa aranjam toate piesele pe care le avem in forma cea mai corecta pentru noi…

Bobby  a explicat pe final de ce face Ultimul Blogtrip ca si initiativa, si a punctat foarte clar si transant ca sa pricepem ca din peste 40 de oameni inscrisi nu au venit decat vreo 20. Eu il inteleg si ma mir cum de nu a pus piciorul in prag mai demult. Poate ca prin alte orase nu a fost ca la noi aici, poate ca deja un pahar sa umplut, e mai putin important, ce am inteles eu este faptul ca experienta se plateste scump daca vrei sa faci share si ii felicit pe cei care au profitat de ea cat a fost gratis.

Dorin, Marketing Afiliat

Dorin Boerescu ne-a vorbit despre Marketing Afiliat, ce presupune, ce este, cum poate fi folosit si cel mai important ce beneficii ne poate aduce pentru ca pana la urma asta cautam toti. Ca sa intelegem mai bine ce inseamna Dorin a incercat sa explice pentru muritorul de rand marketingul afiliat prin intermediul companiei pe care o conduce 2parale.ro si bine a facut.

Ce mi-a placut la prezentarea sustinuta de Dorin:

• Am inteles ce este Marketing Afiliat (suna banal, dar este ceva foarte important sa intelegi un lucru inainte sa te apuci sa il folosesti)
• Am inteles chiar daca off topic ce insemna persoana potrivita pe postul potrivit. Dorin stie sa vanda si cred ca asta spune totul.
• Exemplele bine alese. Am vazut ce se poate face cu 2parale si in general cu platformele de marketing afiliat. Pe scurt ca sa nu o lungesc, poti sa faci un magazin online fara ca tu sa ai nici macar cea mai vaga idee despre ce inseamna sa vinzi ceva, de la distributie pana la gestiune si toate asta  se fac folosind feeduri.
• Am bagat bine la cap faptul ca marketingul afiliat nu se face doar pentru magazinele mari care au produse de larg consum ci poate functiona pentru oricine

Ce nu mi-a placut la prezentarea sustinuta de Dorin:

• Sa lasat intrerupt de prea multe ori pe subiecte care nu aveau nici o legatura cu ce incerca el sa ne explice. Era clar ca omul incerca sa isi vanda platforma, dar o facea intr-un mod inteligent sa si pricepem de ce si nu erau necesare discutiile cum ca nu ai nevoie de 2parale pentru asta.
• … si cam atat

Tudor, OnlinersVSCorporate 2.0

Tudor Galos ne-a vorbit despre interactiunea dintre noi (onliners) si ei (corporatistii). Nu o sa insist foarte mult pe subiect pentru ca si eu sunt parte din zi corporatist si stiu cum merg anumite lucruri. Ce trebuie sa intelegem noi (si Tudor a incercat sa ne explice asta) este faptul ca vrem sau nu sa recunoastem avem nevoie unii de altii si nu o zic in sensul rau.

A facut foarte bine ca ne-a prezentat cateva tips & tricks pentru o interactiune mai buna intre onliner si corporatist, desi nu mi-a placut ca a trecut foarte repede prin buline (eram si in intarziere).

Tudor a mai prezentat rezultatele #tweetIE8 care din punctul meu de vedere a fost cea mai importanta parte din prezentarea lui. Cum se porneste o campanie de genul, cum sa ii definesti un scop clar, cum se selecteaza cei 8 “web celebs” cum le-au spus ei si despre cum au reusit sa scrie o carte folosind Twitter si comunitatea din Romania.

Bogdan, PR Ce si Cum

Bogdan Theodor Olteanu ne-a vorbit din punctul de vedere al unei agentii de PR, cum se interactioneaza cu o agentie si ce face agentia. Am invatat ceva foarte important si nu stiu daca Bogdan a vrut sa faca shareing sau i-a scapat

Agentia de PR in general incearca sa faca mai mult decat ii este stipulat in contract

El chiar are target pentru oamenii cu care lucreaza pe treaba asta. A reusit sa ne explice de ce este necesara si care sunt avantajele vizibilitatii online, desi este inclinata mai mult catre companii se poate aplica foarte usor si in alta parte.

Un alt aspect foarte important pe care il puncteaza Bogdan este persoana care trebuie. Am inteles si din cateva exemple date de ce este important sa vorbesti cu persoana care trebuie cand vrei sa initiezi o discutie. In anumite situatii este mult mai bine sa mergi direct la agentie decat la companie direct, pentru ca asa cum spuneam mai sus acestea incearca sa faca mai mult decat este scris in contract. Daca nu discuti cu persoana care trebuie risti sa o dai in bara aiurea si de aceea un alt aspect important punctat de Bogdan este documentarea. Trebuie sa invatam sa ne documentam, sa incercam sa aflam mai multe despre compania cu care vrem sa discutam, sa gasim agentia cu care lucreaza si sa incercam sa cautam persoana care trebuie pentru a initia un dialog.

Ce nu mi-a placut la Bogdan a fost faptul ca era foarte sincer atat de sincer ca se astepta de la noi sa cunostem concepte legate de PR si era foarte transant cand puneai o intrebare stupida din punctul lui de vedere.

Adrian, Lecturi Urbane si Contextul

Adrian Ciubotaru a incheiat seria de prezentari cu una dintre cele mai frumoase initiative sociale din Romania Lecturi Urbane. Adrian este cel mai urat vis pe care poti sa il ai datorita pasiunii cu care omul acesta vorbeste si face ceea ce face, dar in acelasi timp este cel mai frumos sentiment pe care il poti avea cand te gandesti ca si tu poti face ceva.

In spatele proiectului Lecturi Urbane Adrian a pus foarte multa pasiune si asta a incercat si el sa ne transmita, trebuie pasiune ca sa poti face ceva, nu se poate fara pasiune. Prin pasiune a reusit sa porneasca un trend care este deja un eveniment national.

Din povestea asta cum ii place lui sa spuna pe care ne-a prezentat-o am inteles ce inseamna contextul, am inteles de ce este important contextul si cum poti schimba o tara intreaga daca te folosesti de el. Exemplul dat de el este foarte clar: Cum poti sa convingi o tara intreaga sa citeasca si sa imbratiseze cultura? Este aproape imposibil am putea spune, dar ganditi-va cand mergeti la servici si in mijlocul de transport cand intri intr-o zi toata lumea citeste, ramai uimit incepi sa te intrebi ce se intampla, ce face lumea si de ce asa dintr-o data. Apoi vine cineva la tine sa iti explice si sa iti faca cadou o carte. Tu ca om cand cand esti intr-un context ai o alta inclintie (mai mare) catre acel context si iti este mult mai usor sa incerci sa schimbi ceva la tine.

Ce nu mi-a placut la Adrian este abilitatea lui de prezentator , ca sa explic mai bine, din punctul meu de vedere Adrian nu este o persoana care sa tina o prezentare, nu cred ca poate, are prea multe de spus si niciodata timp, este omul cu care trebuie sa ai o conversatie.

Concluzia Finala

Fiind primul meu blogtrip nu cred ca pot sa ma pronunt mai mult decat ce a fost prezentat aici la noi. Ii felicit pe organizatori pentru acest workshop si le multumesc. Ii felicit pe toti cei care au prezentat pentru pasiunea cu care fac lucrurile si pentru prezentarile foarte bine alese.

Ce a contat la fel de mult ca workshopul in sine a fost asa cum spune americanul si Tudor: networking, am cunoscut oameni noi si oameni cu care am interactionat doar prin intermediul internetului si ma bucur foarte mult cand ma gandesc ca mai exista si oameni ca ei.

Nu pot spune ca am iesit mai destept, acela care spune asta din punctul meu de vedere e clar ca nu a inteles nimic, ce pot spune este ca am iesit de acolo cu o alta perspectiva de explorat si asa cum spunea Dorin la un moment dat am inteles ca o sa descopar lucruri despre mine care nu or sa imi placa, dar astea inseamna maturizare nu? maturizare care poate sa dureze o viata.

Ce nu mi-a placut in toata povestea asta suntem noi, noi cei care parem interesati, dar viata merge inainte si cateodata e bine sa nu judecam pana nu suntem pusi in tema cu toate datele problemei. Nu mi-au placut discutiile pe langa subiect si ma refer aici la cele care erau cu adevarat pe langa subiect. Este una sa comentezi incercand sa faci o paralela sau sa explici folosind alte exemple si alte metode si este alta sa pornesti discutii care pur si simplul nu isi au rostul.

Acestea fiind spuse le multumesc inca odata organizatorilor si sper sa ne vedem si in alte circumstante.

Imediat dupa am fost la #NationalTweetmeet de unde tot ce pot spune este ca am plecat cu un gust foarte amar si cu aceiasi concluzie pe care am mai avut-o… Una peste alta aparatul meu foto a circulat din mana in mana la un moment dat si mai jos sunt rezultatele pentru cine vrea sa le vada.

[Show as slideshow]

Au mai scris despre si au si imagini: Dragos, Alex, Pandutzu, Zoso, BadPisi, Sorin Rusi,  DreamTeamRo, Marius Moga, Corina Georgescu, Victor Caras, Sadak si daca am mai ratat pe cineva va rog buzz me

Am continuat cu mai multe detalii in articolul urmator: The Good, The Bad and The Ugly la #blogtrip Brasov

Zynga

The Facebook games that millions love (and hate) -  asa suna un articol pe CNN pe care l-am citit si eu acum cateva minute dupa ceva timp. Este practic un raport publicat de Zynga legat de activitatea utilizatorilor sai pe jocurile care ruleaza in Facebook.

Ca oricare dintre voi am si eu cativa prieteni care joaca treburile alea cu inversunare, dar sincer sa fiu nu mi-am imaginat niciodata ca situatia sta cu totul altfel decat credeam eu. Facebook are 400 de milioane de utilizatori si este platforma care a facilitat cresterea impresionanta a utilizatorilor de FarmVille, Mafia Wars, FishVille, Vamipres si Cafe World (mai sunt si altele), acestea fiind cele mai importante jocuri pe care le ofera Zynga pentru utilizatorii sai.

Raportul ne spune ca in medie mai mult de 65 de milioane de oameni din lumea intreaga joaca unul din prostiile alea de mai sus, adica de trei ori populatia Romaniei, sau mai mult decat populatia Frantei.

Cel mai popular joc de la Zynga este FarmVille care la randul sau este jucat de 75 milioane de oameni in fiecare luna. 75 000 000 … WOW … Tetrisul in toata istoria lui nu are strans 75 milioane de oameni care sa il joce chiar daca este printre putinele jocuri arcade care se spune ca iti dezvolta inteligenta. Dar uite ca noi oamenii consideram ca un joc total inutil este mult mai important decat orice alta activitate care iti poate aduce ceva mai mult.

Si daca totusi nu suntem impresionati ei bine media de timp petrecuta in joc, oferita de Zynga este de 33 de minute pentru FarmVille si 60 de minute pentru CafeWorld. Fratilor 60 de minute este o cifra incredibil de mare. Si ca sa fie tortul cu cireasa cu tot media de varsta a jucatorilor este la fel de mare, 30 de ani, practic copii acestor oameni or sa se nasca deja cu informatia genetic imprimata despre cum sa joci unul din tampeniile astea.

Sunt peste 150 de milioane de taskuri indeplinite zilnic in Mafia Wars si 13 milioane de utilizatori activi in fiecare saptamna in FishVille, un joc care are o medie de varsta a utilizatorilor undeva pe la 20 de ani, desi el ar putea fi mai potrivit la nivel de concept, nu ma intelegeti gresit, in scoli generale unde ai putea sa ii inveti pe cei mici responsabilitate si putina cultura, dar nici macar asta nu este o solutie.

Eu sunt profund confuz si nu gasesc nici un rationament logic sau o explicatie normala pentru a juca aceste prostii total inutile utilizatorului. Ce va lipseste oameni buni de jucati acest jocuri stupide lipsite de sens? Ce le lipsesc femeilor care joaca aceste jocuri si care prefera sa faca click click click click click click click click click pentru a culge porumbul virtual sau eu mai stiu ce pomi fructiferi de pe niste patratele pe monitor? Sunt 60% femei care joaca astfel de jocuri, oare noi barbatii / baietii chiar nu mai avem nici un atribut care sa merite atentia in detrimentul acestor jocuri, sau poate ca si noi ne-am orientat la randul nostru catre alte distractii …

De ce as vrea sa ma trezesc dimineata la ora 8 AM si pana la ora 9 AM (asa cum ne spune raportul ca fac majoritatea) in loc sa facem exercitii sau orice altceva alegem sa culegem cu Tractorul (pentru care am pierdut ore bune sa il achizitionam) recolta adunata peste noapte.

Si ca sa inchid totul in mintea mea si sa uit ce am citit vreau sa mai spun ca inca nu am acoperit partea financiara in toata treaba asta. Zynga face bani multi, adica chiar foarte multi bani de la utilizatorii sai care isi fac abonamente sau cumpara diverse utilaje, premii sau chiar bani fictivi folosindu-se de bani reali pentru care muncesc zi noapte. Nu stiu daca mediul corporatist este de vina pentru toata treaba asta si sincer sa fiu nici nu vreau sa intru in acest subiect, dar in momentul acesta pare sa fie cel mai bun incubator de oameni care cauta inutilitatea si metode de pierderea a timpului.

Powerful brainstorming tool designed to take you in inspiring, unexpected directions.

Moodstream streams music and images along with video clips to create a sort of audio-visual mix. There are manny other applications for desktop or mobile that are trying to impose the same effect, like StereoMood or Sourcetone, I for example use on my iPod touch RjDj, but none of them have incorporated a visual element (yet).

Moodstream is able to adjusts its output based on settings users input via some sliders that should describe their state of mind. Happy to Sad, Humorous to Serious, etc. Also the type of transitions between image assets can be controlled by the user, the amount of color vs. black and white imagery, and the type of music.

For the new users to the application we are provided with 6 preset moods as well. Once you’ve entered your mood settings, the application delivers a steady stream of video clips and still images set to short snippets of music (this is where it comes short apart from the rest).

Also if you see a picture or hear some music you like, you can add it to your “moodboard” and get additional information on purchasing it from Getty’s library.

Although is not a new thing or it’s not using some new alien technology Moodstream can be a very useful mashup to use in some of your uninspiring moments so try to make use of it and see how a mood changer can make you feel.

[Via MakeUseOf]

Flame is a painting program, it belongs to my ‘I am Artist’ experimental project. I think with tools which inspires you, everybody can be an artist. You can try it here, change different brush settings and paint your own flame paintings. When you change background from black to white, palette changes from additive to substactive and the feeling of the painting is very different. It’s not easy to explain all brush parameters, so I leave this for your experimentation.

Flame Painter Main Screen

Build by Peter Blaškovič Flame is a Processing application that can make a simple mouse movement look like a 1000 brush strokes on a canvas. Basically your brush is transformed into a multiple particle elastic one that can fill your strokes like you would do it with lots of small brushes put together. The only and the most important difference here is that you can control the intensity, color, opacity and size of each of the brushes.

A tool like this used by the proper hand can generate some impressive results. Bellow are three of my own aberrations but you can check the gallery for cool ones here.

[Show as slideshow]

]]> http://radumicu.info/blog/2010/03/07/flame-painter-escapemotions/feed/ 1 http://radumicu.info/blog/2010/02/28/iograph-do-your-business-do-art/ http://radumicu.info/blog/2010/02/28/iograph-do-your-business-do-art/#comments Sun, 28 Feb 2010 10:33:15 +0000 Radu http://radumicu.info/blog/?p=1033 Moscow designer Anatoly Zenkov to brighten up the routine work made a really nice application called MousePath. It was a simple Java based tool that records your mouse movements and records all your paths drawing a line as it’s goes along running in the background.

Posting it at Flickr, the tool very quickly made some noise and everyone was trying to see what was too discover in the chaotic movements of their mouse. Some of us even called it ART

Now the tool has evolved from the little Java application to

IOGraph — is an application that turns mouse movements into a modern art. The idea is that you just run it and do your usual day stuff at the computer. Go back to IOGraph after a while and grab a nice picture of what you’ve done!

The tool works quite easy: Open, Press Start, Do your thing, Save the image…

And here are some examples of the end result

[Show as slideshow]

The main design advantage that bottom shadow effects have is that it will give you the impression of deepness to your content and elements.

Here is the desired effect

Step 1 – Open your image / document

Open your document or image in Photoshop and create a new Layer right after your main Layer. In this layer we will add the bottom shadow effect and because the new layer is positioned right after our main one it will display in the back without overlapping the main layer…

Add a new layer

Step 2 – Foreground color and Brush

Set your foreground color to black so we can paint our bottom shadow

Now select your Brush Tool () and from the brush preset picker select a soft brush. And set  the diameter to be a little smaller than the shadow size you want to add.

Select a soft brush

Click once just below the shape to which you want to add shadow. Try to add the brushed point right on the middle of your shape. Like this:

Step 3 – Bottom shadow using Motion Blur

Now using the Motion Blur Filter we will create our bottom shadow. So go to Filter » Blur » Motion Blur and from the properties pane that appears make sure your motion angle is set to 0 (horizontal) and in my example I have set a 90 pixels Distance but you can set a lower value depending of your shape size. In most cases 90 pixels will do the job just fine. After the settings are set press OK to apply the effect.

Now to complete the effect press CTRL + F 2 or 3 times to re-apply the blur motion effect. Bottom shadow effect is added to your shape or image.

Now the end result looks quite good and very neat on your shape or image. Using this method you can add bottom shadow effects to virtually everything in Photoshop, it takes just a little practice to master the settings but the results could be quite interesting and nice to use in your designs.

The end result after the Motion Blur effect

The expected outcome

The general idea was to try and add a link on the right side of the page that will appear and stick there after a  certain percentage of the page is scrolled down and when clicked will smoothly scroll the page back to the top. Also it’s mandatory that this should work on all major browsers (including IE).

Here is an example how this should look like (example working already on this page, just scroll down to see it)

The button and the placement problems

In order to add the button to the page we just need to add this code to our page just after the <body> tag:

<a href="#header-top">
<div id="back-top" style="display: block;"></div>
</a>

The DIV tag will be used to show our top link using a background-image (but you can use a text just as well) and the anchor will be used to link us to the top of the page (in this case by the most outer div tag with the #header-top id) .

Now the CSS code to style our Top button should look like this:

#back-top{
 background:transparent url(arrow-up.gif) no-repeat scroll 0 0px;
 display:none;
 text-decoration:none;
 position:fixed;
border:none;
}

So we’ve set a background image that will be seen by the user, in order to get the desired effect and the position of our DIV is FIXED so that will stick in the bottom right corner when scrolling the page. DISPLAY = NONE to hide it until we scroll down inside the page and afterwards show it to the user.

All good now we can say, but after some testing in Internet Explorer we will see that in some versions POSITION:FIXED is not working at all (ex: IE6) or buggy on other versions (ex: IE7). In order to fix this we will have to insert some hacks in our CSS code (I won’t get more into this matter because it will be a really long article but you can search all about it). What we need to do is to add overflow:hidden to the code and this will be the easiest way to solve position problems that we may encounter, now the CSS code should look like this:

#back-top{
 background:transparent url(arrow-up.gif) no-repeat scroll 0 0px;
 display:none;
 text-decoration:none;
 position:fixed;
 bottom:10px;
 right:10px;
 overflow:hidden;
 border:none;
 text-indent:-999px;
 height:32px;
 width:42px;
}

Now that our button is inserted to the page and styled to appear on the right side  we can go further with some mouse over css code and the java-script that will animate the button.

The mouse over css code could be like the one bellow. I just practically used a sprite image to show the default and hover effect of our button.

#back-top:hover{
 background-position:0 -32px;
 display:block;
 overflow:hidden;
}

Code used for the Top Link show / hide effect

The main idea is to bind the scroll event of the page and when a certain percent is scrolled down we just show the button to the user. If the user scrolls back to the top we need to hide the button once again. I used jQuery to do this and turned out in the process to be a plugin so we can use it wherever we want.

The plugin function will take 3 parameters:

• tag object of the button – the DIV used to show or hide the top link button (passed as the selector)
• min – Amount of pixels from the top needed to show the button
• fadeSpeed – The speed of the fade in / fade out effect set in milliseconds

We first declare the settings and the default values for each of them:

jQuery.fn.topLink = function(settings) {
 settings = jQuery.extend({
 min: 1,
 fadeSpeed: 200,
 ieOffset: 50 //used to properly calculate the height in IE
 }, settings);

Then we listen for the scroll event and we check the height from the top until it gets bigger then our min value, in witch point we show our button using the fade in effect. If the height from the top is smaller then our min value we will hide our button in the same manner.

 return this.each(function() {
 //Listen for scroll
 var el = $(this);
 el.css('display','none'); //in case the user forgot
 $(window).scroll(function() {
 if(!jQuery.support.hrefNormalized) {
 el.css({
 'position': 'absolute',
 'top': $(window).scrollTop() + $(window).height() - settings.ieOffset
 });
 }
 if($(window).scrollTop() >= settings.min)
 { el.fadeIn(settings.fadeSpeed); }
 else
 { el.fadeOut(settings.fadeSpeed); }
 });
 });
};

The jQuery.support.hrefNormalized means that using the jQuery features we are trying to detect browser features. The support object contains boolean flags and was added just for this purpose to write code using browser feature detection. Because IE has a different mode to handle the href attribute (it returns the full URL instead of the exact href attribute) I used .hrefNormalized to see if the code is executing in IE or not and if it does using css we are setting the top property every time the users scrolls the page, assuring us in this way that the position of our button remains constant without flickering or any other bugs we may encounter with different browsers.

Final code used to show / hide our button

The full code of our jQuery plugin should look like this:

jQuery.fn.topLink = function(settings) {
 settings = jQuery.extend({
 min: 1,
 fadeSpeed: 200,
 ieOffset: 50
 }, settings);
 return this.each(function() {
 //Listen for scroll
 var el = $(this);
 el.css('display','none'); //in case the user forgot
 $(window).scroll(function() {
 if(!jQuery.support.hrefNormalized) {
 el.css({
 'position': 'absolute',
 'top': $(window).scrollTop() + $(window).height() - settings.ieOffset
 });
 }
 if($(window).scrollTop() >= settings.min)
 { el.fadeIn(settings.fadeSpeed); }
 else
 { el.fadeOut(settings.fadeSpeed); }
 });
 });
};

Now in order to use the plugin using a separate js file (or in what way you may like) we add the code to our page and then we just call it when the dom is ready or at the end of the page right before the </body> tag:

// Go to Top Link
$('#back-top').topLink({
 min: 800,
 fadeSpeed: 500
});

According to our settings above the go to top button will appear after at least 800 pixels will be scrolled down from the page and the effect will be completed in half of a second. After the page scrolls back to top the code is executed again and the button will hide again because our min value is not reached.

Smooth scrolling all anchor links inside your page

For the smooth scroll effect I used another plugin made by Karl Swedberg that you can get from Github here. In order to use it just load the js file to your page and add the following code.

// All anchor tags will be bind to smooth scroll in page
$('a').smoothScroll();

Now all anchor tags inside your page will be smoothly scrolled when clicked. For example the Go to Comments link inside your blog, or any other anchor that points somewhere inside your current page will have this nice effect.

Final considerations

I’ve checked the code in FF 2.0 +, IE 7+, Opera 10, Safari 4 and Chrome 5 and works well on all of them. If anyone finds a version that breaks or is buggy just let me know and perhaps we could fix it. This article is not meant to be a tutorial for all users and some or more programming skills are required in order to integrate the code in your HTML pages but you don’t have to alter anything to it it works as it is. Hope you will find it useful and give feedback if you have some.

Click here to view the embedded video.

Coder Girl Lyrics:

to be the keys underneath her finger tips

Her class makes a brotha’s back buffer wanna flip

and be number one on her link list

and get a callback, I’m in all caps

feels like my first hello world

what it is to run with a coder girl

and it ain’t hard to like how she writes

with her pretty interface, plus her source is tight

wanna get in where I fit in like a plug-in

this is the true meaning of computer lovin’

She’s got a data stack that’s straight stunning

No mismatch, exceptions or debuggin

invariably, how would I pass this

when my coder girl grants me root access

basically, she’s a certified A+

yo, it’s more than just technolust

(chorus)

Feels like my first Hello World ’cause

She’s my Coder Girl

Man, I had to dedicate this one

To my Coder Girl

I’ll put it like this, so you can understand

She makes me wanna update to be a better man

When we compile she’s easy to interpret

A cross-platform version I can work with

She’s not wrapped in flash

all she wants is her java and a shell to bash

While, she’s a sight to C, plus

Her smile glimmers just like a Ruby does

She could never be subroutine

The high priority process of my machine

Sharper than most chics ya’ know

She’s not another shallow copy actin’ sudo

It’s that good type dependancy

I function better with C.G. next to me

and it always leads to an overflow

When it’s runtime and we take it slow