Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › How to make interactive logos?
New Posts  All Forums:Forum Nav:

How to make interactive logos? - Page 2

post #11 of 29
Thread Starter 
Quote:
Originally Posted by xyexz View Post

Yeah most of the stuff I work on is quite large so I try to think in those terms, also I find the method I used somewhat easier to maintain/read which is something I always strive to do biggrin.gif

Either solution, OP, would work - you still around? biggrin.gif

I cleaned it up and tried to make it look identical to yours but the fade effect still doesn't want to connect with the rollover images. http://jsbin.com/oxahed/1/edit
My System
(13 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7 2600K @ 4.2GHz Asus Maximus Gene V Asus DirectCU II 290x Corsair Platinum 2x8Gb 1600MHz 
Hard DriveOSPowerCase
Samsung 840 EVO 500Gb, WD Black 1TB Windows 7 x64 Thermaltake 1200W Modular Silverstone TJ08 
  hide details  
Reply
My System
(13 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7 2600K @ 4.2GHz Asus Maximus Gene V Asus DirectCU II 290x Corsair Platinum 2x8Gb 1600MHz 
Hard DriveOSPowerCase
Samsung 840 EVO 500Gb, WD Black 1TB Windows 7 x64 Thermaltake 1200W Modular Silverstone TJ08 
  hide details  
Reply
post #12 of 29
Just saying, could you give me the font file for that? And the sizes (in pt) used in those images? I think that what you really want is @font-face. Much cleaner and I can get it working better with the jQuery. smile.gif
post #13 of 29
Thread Starter 
Quote:
Originally Posted by 3930K View Post

Just saying, could you give me the font file for that? And the sizes (in pt) used in those images? I think that what you really want is @font-face. Much cleaner and I can get it working better with the jQuery. smile.gif

The font: http://fontfabric.com/nexa-free-font/
Font size for Inspire... 80pt
Font size for Location... 11pt
My System
(13 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7 2600K @ 4.2GHz Asus Maximus Gene V Asus DirectCU II 290x Corsair Platinum 2x8Gb 1600MHz 
Hard DriveOSPowerCase
Samsung 840 EVO 500Gb, WD Black 1TB Windows 7 x64 Thermaltake 1200W Modular Silverstone TJ08 
  hide details  
Reply
My System
(13 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7 2600K @ 4.2GHz Asus Maximus Gene V Asus DirectCU II 290x Corsair Platinum 2x8Gb 1600MHz 
Hard DriveOSPowerCase
Samsung 840 EVO 500Gb, WD Black 1TB Windows 7 x64 Thermaltake 1200W Modular Silverstone TJ08 
  hide details  
Reply
post #14 of 29
OK, first of all, you're going to need to credit them (it's in the license, extract relevant: Embedding this font in a web page with a @font-face declaration is allowed once you credit Fontfabric (www.fontfabric.com) with a link somewhere on your site.) But just a small link at the bottom will do. However, no more JSBin frown.gif @font-face needs a directory structure.
So, name your main file index.html, save it in your root folder. Its contents:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="fonts/stylesheet.css" rel="stylesheet"/>
<link href="css.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="js.js"></script>
</head>
<body>
<div>
<p>
<a href="#"><h1>DARRIEN TU</h1></a>
<a href="#"><h1>RESUME</h1></a>
<a href="#"><h1>LOCATION</h1></a>
<a href="#"><h2>INSPIRE</h2></a>
<a href="#"><h2>PORTFOLIO</h2></a></p>
<a href="#"><h2>ABOUT ME</h2></a></p>
<a href="#"><h2>CONTACT</h2></a></p>
</div>
<p id="footer">
Font provided by <a href="http://www.fontfabric.com">fontfabric.com</a>
</p>
</body>
</html>
Now another one, css.css:
Code:
h1
{
font-family:'nexa_boldregular';
font-size: 11pt;
}
h2
{
font-family:'nexa_boldregular';
font-size:80pt;
}
#footer
{
font-size:8px;
}
And then the js (in a file named js.js)
Code:
$(document).ready(begin);
function begin()
{
$(a h1).css('opacity', 0.65);
$(a h2).css('opacity', 0.65);
$(a h1).hover(function() {$(this).fadeIn(250);}, function() {$(this).fadeTo(0.65, 500);});
$(a h2).hover(function() {$(this).fadeIn(250);}, function() {$(this).fadeTo(0.65, 500);});
}
Now, the tricky part. Download the font's zip. Copy out the "Nexa Bold.otf" to some place. Go to fontsquirrel.com, first of all. Click "webfont generator". Click "add fonts". Add the Nexa Bold otf. Tick the checkbox that begins with "Yes, the fonts...". Click "download your kit". Then, when it downloads, put all the files from the zip into a subdirectory, fonts. So, folder structure:

In some folder put in it the index.html, js.js, and css.css. Also in there, a folder named fonts. In there all the files from the zip.

I think that should work. Ask me if you have any problems!
post #15 of 29
Thread Starter 
Quote:
Originally Posted by 3930K View Post

OK, first of all, you're going to need to credit them (it's in the license, extract relevant: Embedding this font in a web page with a @font-face declaration is allowed once you credit Fontfabric (www.fontfabric.com) with a link somewhere on your site.) But just a small link at the bottom will do. However, no more JSBin frown.gif @font-face needs a directory structure.
So, name your main file index.html, save it in your root folder. Its contents:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="fonts/stylesheet.css" rel="stylesheet"/>
<link href="css.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="js.js"></script>
</head>
<body>
<div>
<p>
<a href="#"><h1>DARRIEN TU</h1></a>
<a href="#"><h1>RESUME</h1></a>
<a href="#"><h1>LOCATION</h1></a>
<a href="#"><h2>INSPIRE</h2></a>
<a href="#"><h2>PORTFOLIO</h2></a></p>
<a href="#"><h2>ABOUT ME</h2></a></p>
<a href="#"><h2>CONTACT</h2></a></p>
</div>
<p id="footer">
Font provided by <a href="http://www.fontfabric.com">fontfabric.com</a>
</p>
</body>
</html>
Now another one, css.css:
Code:
h1
{
font-family:'nexa_boldregular';
font-size: 11pt;
}
h2
{
font-family:'nexa_boldregular';
font-size:80pt;
}
#footer
{
font-size:8px;
}
And then the js (in a file named js.js)
Code:
$(document).ready(begin);
function begin()
{
$(a h1).css('opacity', 0.65);
$(a h2).css('opacity', 0.65);
$(a h1).hover(function() {$(this).fadeIn(250);}, function() {$(this).fadeTo(0.65, 500);});
$(a h2).hover(function() {$(this).fadeIn(250);}, function() {$(this).fadeTo(0.65, 500);});
}
Now, the tricky part. Download the font's zip. Copy out the "Nexa Bold.otf" to some place. Go to fontsquirrel.com, first of all. Click "webfont generator". Click "add fonts". Add the Nexa Bold otf. Tick the checkbox that begins with "Yes, the fonts...". Click "download your kit". Then, when it downloads, put all the files from the zip into a subdirectory, fonts. So, folder structure:

In some folder put in it the index.html, js.js, and css.css. Also in there, a folder named fonts. In there all the files from the zip.

I think that should work. Ask me if you have any problems!

Wow! Thanks for your hard work. I got it mostly to work with
Code:
function init() {
                $("div a").mouseover(function() { // fire this when any anchor tag under a div has mouseover event
                    $(this).animate({color: "#000"}, 500); // animate to black over 500ms
                });

                $("div a").mouseout(function() { // fire this when any anchor tag under a div has mouseout event
                    $(this).animate({color: "#FFF"}, 500); // animate to white over 500ms
                });
            }

            $(document).ready(init); // call init once the document has been loaded in the browser, that way you know elements have loaded before trying to access

But the text is all jaggedly and seems to need antialiasing. Also the colour of the text when it first loads is a dark purple so I'm not quite sure how to change that. http://jsbin.com/akijos/1/edit
Edited by Dar_T - 4/5/13 at 11:41am
My System
(13 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7 2600K @ 4.2GHz Asus Maximus Gene V Asus DirectCU II 290x Corsair Platinum 2x8Gb 1600MHz 
Hard DriveOSPowerCase
Samsung 840 EVO 500Gb, WD Black 1TB Windows 7 x64 Thermaltake 1200W Modular Silverstone TJ08 
  hide details  
Reply
My System
(13 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7 2600K @ 4.2GHz Asus Maximus Gene V Asus DirectCU II 290x Corsair Platinum 2x8Gb 1600MHz 
Hard DriveOSPowerCase
Samsung 840 EVO 500Gb, WD Black 1TB Windows 7 x64 Thermaltake 1200W Modular Silverstone TJ08 
  hide details  
Reply
post #16 of 29
Quote:
Originally Posted by Dar_T View Post

Quote:
Originally Posted by 3930K View Post

OK, first of all, you're going to need to credit them (it's in the license, extract relevant: Embedding this font in a web page with a @font-face declaration is allowed once you credit Fontfabric (www.fontfabric.com) with a link somewhere on your site.) But just a small link at the bottom will do. However, no more JSBin frown.gif @font-face needs a directory structure.
So, name your main file index.html, save it in your root folder. Its contents:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="fonts/stylesheet.css" rel="stylesheet"/>
<link href="css.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="js.js"></script>
</head>
<body>
<div>
<p>
<a href="#"><h1>DARRIEN TU</h1></a>
<a href="#"><h1>RESUME</h1></a>
<a href="#"><h1>LOCATION</h1></a>
<a href="#"><h2>INSPIRE</h2></a>
<a href="#"><h2>PORTFOLIO</h2></a></p>
<a href="#"><h2>ABOUT ME</h2></a></p>
<a href="#"><h2>CONTACT</h2></a></p>
</div>
<p id="footer">
Font provided by <a href="http://www.fontfabric.com">fontfabric.com</a>
</p>
</body>
</html>
Now another one, css.css:
Code:
h1
{
font-family:'nexa_boldregular';
font-size: 11pt;
}
h2
{
font-family:'nexa_boldregular';
font-size:80pt;
}
#footer
{
font-size:8px;
}
And then the js (in a file named js.js)
Code:
$(document).ready(begin);
function begin()
{
$(a h1).css('opacity', 0.65);
$(a h2).css('opacity', 0.65);
$(a h1).hover(function() {$(this).fadeIn(250);}, function() {$(this).fadeTo(0.65, 500);});
$(a h2).hover(function() {$(this).fadeIn(250);}, function() {$(this).fadeTo(0.65, 500);});
}
Now, the tricky part. Download the font's zip. Copy out the "Nexa Bold.otf" to some place. Go to fontsquirrel.com, first of all. Click "webfont generator". Click "add fonts". Add the Nexa Bold otf. Tick the checkbox that begins with "Yes, the fonts...". Click "download your kit". Then, when it downloads, put all the files from the zip into a subdirectory, fonts. So, folder structure:

In some folder put in it the index.html, js.js, and css.css. Also in there, a folder named fonts. In there all the files from the zip.

I think that should work. Ask me if you have any problems!

Wow! Thanks for your hard work. I got it mostly to work with
Code:
function init() {
                $("div a").mouseover(function() { // fire this when any anchor tag under a div has mouseover event
                    $(this).animate({color: "#000"}, 500); // animate to black over 500ms
                });

                $("div a").mouseout(function() { // fire this when any anchor tag under a div has mouseout event
                    $(this).animate({color: "#FFF"}, 500); // animate to white over 500ms
                });
            }

            $(document).ready(init); // call init once the document has been loaded in the browser, that way you know elements have loaded before trying to access

But the text is all jaggedly and seems to need antialiasing. Also the colour of the text when it first loads is a dark purple so I'm not quite sure how to change that. http://jsbin.com/akijos/1/edit
Quote:
Originally Posted by Dar_T View Post

Quote:
Originally Posted by 3930K View Post

OK, first of all, you're going to need to credit them (it's in the license, extract relevant: Embedding this font in a web page with a @font-face declaration is allowed once you credit Fontfabric (www.fontfabric.com) with a link somewhere on your site.) But just a small link at the bottom will do. However, no more JSBin frown.gif @font-face needs a directory structure.
So, name your main file index.html, save it in your root folder. Its contents:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="fonts/stylesheet.css" rel="stylesheet"/>
<link href="css.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="js.js"></script>
</head>
<body>
<div>
<p>
<a href="#"><h1>DARRIEN TU</h1></a>
<a href="#"><h1>RESUME</h1></a>
<a href="#"><h1>LOCATION</h1></a>
<a href="#"><h2>INSPIRE</h2></a>
<a href="#"><h2>PORTFOLIO</h2></a></p>
<a href="#"><h2>ABOUT ME</h2></a></p>
<a href="#"><h2>CONTACT</h2></a></p>
</div>
<p id="footer">
Font provided by <a href="http://www.fontfabric.com">fontfabric.com</a>
</p>
</body>
</html>
Now another one, css.css:
Code:
h1
{
font-family:'nexa_boldregular';
font-size: 11pt;
}
h2
{
font-family:'nexa_boldregular';
font-size:80pt;
}
#footer
{
font-size:8px;
}
And then the js (in a file named js.js)
Code:
$(document).ready(begin);
function begin()
{
$(a h1).css('opacity', 0.65);
$(a h2).css('opacity', 0.65);
$(a h1).hover(function() {$(this).fadeIn(250);}, function() {$(this).fadeTo(0.65, 500);});
$(a h2).hover(function() {$(this).fadeIn(250);}, function() {$(this).fadeTo(0.65, 500);});
}
Now, the tricky part. Download the font's zip. Copy out the "Nexa Bold.otf" to some place. Go to fontsquirrel.com, first of all. Click "webfont generator". Click "add fonts". Add the Nexa Bold otf. Tick the checkbox that begins with "Yes, the fonts...". Click "download your kit". Then, when it downloads, put all the files from the zip into a subdirectory, fonts. So, folder structure:

In some folder put in it the index.html, js.js, and css.css. Also in there, a folder named fonts. In there all the files from the zip.

I think that should work. Ask me if you have any problems!

Wow! Thanks for your hard work. I got it mostly to work with
Code:
function init() {
                $("div a").mouseover(function() { // fire this when any anchor tag under a div has mouseover event
                    $(this).animate({color: "#000"}, 500); // animate to black over 500ms
                });

                $("div a").mouseout(function() { // fire this when any anchor tag under a div has mouseout event
                    $(this).animate({color: "#FFF"}, 500); // animate to white over 500ms
                });
            }

            $(document).ready(init); // call init once the document has been loaded in the browser, that way you know elements have loaded before trying to access

But the text is all jaggedly and seems to need antialiasing. Also the colour of the text when it first loads is a dark purple so I'm not quite sure how to change that. http://jsbin.com/akijos/1/edit
Put the start colour in the css file.
Also sorry it was off, and the text antialiasing issue is browser bug, nothing can be do about it (that I know of) frown.gif
post #17 of 29
Thread Starter 
Hmm well I got pretty much all I wanted (www.darrientu.com) except for that extra little hover delay but I can live without it. Thanks a ton 3930K, glad to see someone this helpful hanging out around OCN. biggrin.gif
My System
(13 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7 2600K @ 4.2GHz Asus Maximus Gene V Asus DirectCU II 290x Corsair Platinum 2x8Gb 1600MHz 
Hard DriveOSPowerCase
Samsung 840 EVO 500Gb, WD Black 1TB Windows 7 x64 Thermaltake 1200W Modular Silverstone TJ08 
  hide details  
Reply
My System
(13 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7 2600K @ 4.2GHz Asus Maximus Gene V Asus DirectCU II 290x Corsair Platinum 2x8Gb 1600MHz 
Hard DriveOSPowerCase
Samsung 840 EVO 500Gb, WD Black 1TB Windows 7 x64 Thermaltake 1200W Modular Silverstone TJ08 
  hide details  
Reply
post #18 of 29
So what you want to do is when it hovers, wait a bit and then start fading in?

If so, all you do is this:
Code:
//whatever
goes to
Code:
setTimeout(function() {//whatever}, time to wait before running it in ms);
post #19 of 29
I would make an actual function and use that as a call in setTimeout, that way if you want to call it in multiple places you can.

Also you can store the timeout object for later use in case you would like to cancel the timer, which is common place for doing effects in things as you want to prevent collisions - I've given you some code to start with.
Code:

// config vars

var fadeLag = 500; // how many ms to wait before fade, good idea to set things up like this so it's easy to tweak timings later
var currFader = null; // holds the latest fade timer set

// end config vars

function init() {
  currFader = setTimeout("linkFader", fadeLag); // this would most likely be called in a .hover() or .mouseover()/.mouseout() event but just showing here for example
}

function cancelCurrLinkFader() {
   clearTimeout(currFader);
   currFader = null;
}

function linkFader() {
  // fade code here
}

// when document html loaded, run js
$(document).ready(init);


Hope that helps, you could make this more robust and create an array of fadeTimers so you can cancel more than the latest fadeTimer but I think that's more advanced than you need for your purposes.
AMD Rig
(12 items)
 
  
CPUMotherboardGraphicsGraphics
8320 FX Gigabyte 990FX-UD3 XFX R9 270X XFX R9 270X 
RAMHard DriveOptical DriveCooling
Crucial Ballistix Sport Kingston V300 Bluray Cooler Master Seidon 240M 
OSKeyboardPowerCase
Windows 7 x64 Ultimate CM QuickFire Corsair CX750M Corsair 540 Air 
  hide details  
Reply
AMD Rig
(12 items)
 
  
CPUMotherboardGraphicsGraphics
8320 FX Gigabyte 990FX-UD3 XFX R9 270X XFX R9 270X 
RAMHard DriveOptical DriveCooling
Crucial Ballistix Sport Kingston V300 Bluray Cooler Master Seidon 240M 
OSKeyboardPowerCase
Windows 7 x64 Ultimate CM QuickFire Corsair CX750M Corsair 540 Air 
  hide details  
Reply
post #20 of 29
Thread Starter 
Thanks but I still don't understand how to target the rollover images in the first place. I can grasp the other functions though. I thought if you put everything in a div tag, all the items inside link together in that you can target all 5 items at once (http://jsbin.com/oxahed/1/edit). Doesn't seem to work though. I'm pretty sure its that other rollover script that is interfering with everything but I don't know another way to use images as such.
My System
(13 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7 2600K @ 4.2GHz Asus Maximus Gene V Asus DirectCU II 290x Corsair Platinum 2x8Gb 1600MHz 
Hard DriveOSPowerCase
Samsung 840 EVO 500Gb, WD Black 1TB Windows 7 x64 Thermaltake 1200W Modular Silverstone TJ08 
  hide details  
Reply
My System
(13 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7 2600K @ 4.2GHz Asus Maximus Gene V Asus DirectCU II 290x Corsair Platinum 2x8Gb 1600MHz 
Hard DriveOSPowerCase
Samsung 840 EVO 500Gb, WD Black 1TB Windows 7 x64 Thermaltake 1200W Modular Silverstone TJ08 
  hide details  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › How to make interactive logos?