have you seen the Nike site www.nikebetterworld.com ?!!! I can’t get over how amazing it is – the point where the orange Nikes look like they are passing each other as you scroll down…incredible!
It’s embarassing just trying to use JQuery in the face of that greatness!!
so my rainbow front page is working but I still can’t seem to figure out the slide in contact form. I have the tab there (but not in the right place yet!) but its not active so obviously there’s something wrong with my code (what’s new?!)
It’s all getting a bit tense over at a forum on Photoshop knockouts…I shut down the window after reading several comments on a thread about creating knockout images where two guys were using the forum to have a bit of a go at each other! I’m still amazed at what people will put into writing over the web and I do wonder sometimes whether they’d be like that in person…probably not (or at least I hope not!).
Anyway, I ventured over to the forum because I was looking for a lazy way out in knocking out some colour in images I want to apply a CSS rainbow animation to…however, after the above altercation there doesn’t seem to be any really easy or automatic way to do it! Back to channel masking for me 😦 I shouldn’t complain it’s actually not that hard given my images are one colour on a white background! Two down, one to go and I’m looking forward to trying out the tutorial I found here I don’t want the hover animation to look too tacky though so I’m thinking I might just go for a restrained three colours instead of the whole rainbow but I guess I’ll see how that works out! I want to use this on my front page to give some animation to the current links I have because they’re looking a bit boring. Of course that may be overkill so who knows, I might just be practicing my channel masking for fun 🙂
I’ve seen these awesome slide in contact forms that I just know use JQuery and PHP. I really want one on my site so I’ve been studying the tutorials but none of that really helps me understand PHP in all its glory! Its also rather late in the game to be thinking about adding something more complex to my site given the issues I was having earlier!
I do consider it a challenge though and I’ve found a tutorial that uses the most basic on PHP so if I can figure that out I’ll be good to go…maybe! I’ve tried out adding a slide down contact tab and so far I haven’t managed to get it to interact – I have to go back and look at the code and figure out what I’ve done wrong (I should be used to this by now!!). If I can get it working I’ll be pretty happy though 🙂
of course it was something simple that I had neglected to check – hover anybody? Oh yes I left it out of the code for my home button! Nice work 😉
I am of course having problems with CSS3 sprites! I am using an inactive and hover state for the buttons on my site. I decided only to use the two states (although I know to do it ‘properly’) you’re supposed to use three. I figure that the hover state is dramatic enough to give the user enough feedback to know what’s happening on the site when they hover, and then when they click. That part’s not the problem (unfortunately!).
My home button refuses to align itself and loves to go missing, in addition to which it now has this weird (no other way to describe it) background shape to it. I spent yesterday afternoon studying my code mercilessly, but since simplifying my html & CSS to accomodate the hover and linking there’s not all that much to see. So I’ve been slightly baffled as to what on earth is causing my errant home button. If it’s not placement now it’s appearance! I did have one moment of clarity where the home button decided to do what it was told and it looked pretty good where it was. Of course, go change some code for the content box on the page and see you later home button!
I’ve gone back to go over the box model once again as well as hierarchy in CSS so hopefully I can resolve that issue today. I’d love to move on from it! The other brainwave I had this morning was – did I remove the other image files associated with the home button? My initial response? No I did not! Which might explain its current crazy appearance. Here’s hoping…
I’ve installed Lightbox 2 as my image library which uses JQuery and is the typical enlarge animation with next and previous tabs, upon reaching the final image you close the box. Generally I don’t mind the effect but it’s not quite what I was wanting. I’ve found another JQuery gallery called Suckerfish and it allows you to have the images as thumbnails across the screen before selecting images to view. I like this idea and am going to see if I can use it to show student images on my site. As always online there is a bit of debate around which is better and whether they both work equally well, I’m going to try out both and then decide which works best for my current purposes!
After going back and checking the website for Lightbox2 I think I may have coded some of it incorrectly as I am getting text links instead of the image links that they show. I think I’ll check over my code again before jumping ship to suckerfish just cos I think it looks prettier 😉
and indeed it might be! Thanks again to Chris Coyier (2011) this color animate demo might be the way to spice up my front page. In an effort to keep the aesthetic similar I seem to be sticking with using the same images on the background, as the buttons and as the page links on my front page. Can anyone say boring?!! I’ve been looking for a JQuery rainbow animation as one of my group members suggested last night in class (thanks Ganjar!) but I’m not sure I can’t achieve the same in CSS3.
The article here titled “Color animate any shape with a knockout PNG” by the abovementioned Chris Coyier, on the CSS tricks website css-tricks.com , has made me think it may be more straightforward to use CSS3 to animate my front page images before the user clicks through to the next page. I like the rainbow animation effect although I don’t want it looking too cheesy or tacky so I may have to choose my colours wisely!! It also frees me up to use almost any image on my front page so I’m going to now look at what images will work the best and have a go at them in Photoshop. Ah so much to do!
Coyier, C. 2011, Color animate any shape with a knockout PNG, http://www.css-tricks.com, viewed 2.11.10
…in an effort to leave my CSS obsession behind I am now turning my attentions to JQuery in creating a slide down (or slide in!) contact panel to replace my daggy mailto: link.
I’ve seen these around on a few website with designs that I like, although for some the use of a slide in contact form on the main page as well as an email link and a link to a contact page seemed a little excessive! However, if the aim was to enable people to communicate with you then I guess that’s a good way to go about achieving it. Different users will want to make contact in different ways. I suppose that’s something I should consider- I think the slide in contact form will be a good way of covering most of the bases with the users I expect will visit my site. As I am designing my site with school in mind, I work for a public school so there are very strict rules around email and internet use so having a contact page that doesn’t require the user to access their own government email (teachers/students) is likely to be a good idea. Especially as this week and last has seen our email portal having ‘issues’ (to put it politely!! 🙂
I’ve found a great tutorial here that uses only JQuery and CSS3. They also have a website here called Design Newz and its got lots of cool stuff on it for designers, developers & digital artists.
Off to give it a go! (how hard can it be 😉
Saw a sign for this awsome street art event Outpost anything on Cockatoo Island is always fun!! It’s a great place to take photos and its even better when there’s some art around!
My Blog 