Category Archives: CSS

Untold Entertainment Made in jQuery Part 3 – The Project Slider

Being a showcase for the Flash work of Untold Entertainment, the image slider is used as the main focus of the home page and displays his latest projects. Continuing from the first two tutorials, I’ll now show you how to create this slider with jQuery.

We’ll be treating the slider as a separate element from our Twitter bar before, so no need to use old code here.

With the abundance of jQuery image gallery plugins and scripts it’s safe to say that jQuery makes this sort of thing in particular run a lot more smoothly than with plain JavaScript. This section will be the easiest part of the series.

Let’s dive in. Continue reading Untold Entertainment Made in jQuery Part 3 – The Project Slider


Untold Entertainment Made in jQuery Part 2 – Styling the Twitter Bar

Carrying on from the first part of creating a Flash-less home page on Untold Entertainment, we add to the tutorial on animating Twitter text with some more usability and style.

We start off by generating links (to URLs and Twitter pages) inside the text, make a couple of buttons to skip the tweets backwards and forwards, then animate the Twitter bird and speech bubble as a background. Continue reading Untold Entertainment Made in jQuery Part 2 – Styling the Twitter Bar


Untold Entertainment Made in jQuery Part 1 – Animating Twitter Text

Ryan Creighton’s Flash development site Untold Entertainment has a quirky home page with plenty of animation and things to click on (complete with roll-out tongue) and of course is built in Flash. Thing is, I’m against any kind of Flash interface. It’s great for games, but otherwise it’s unnecessary (which includes videos).

With the whole Adobe v Apple debate that’s going on right now (yes, I said I wouldn’t mention it but it applies here ‘kay), it’s safe to say you’d be better placing your chips on the JavaScript and HTML5 end of the table.

The discouraging part is that his website could be done without Flash as most of the scrolling and animating could be done with straight JavaScript, and jQuery will help see things along smoothly.

Today I’ll show you how to animate the text at the top, feeding in from his Twitter feed, complete with jerky timings, slanted text and collecting feed data. Continue reading Untold Entertainment Made in jQuery Part 1 – Animating Twitter Text


Messing with Background-Attachment

Earlier this week I came across an interesting Tumblr theme by Jarred Bishop. The site played with the background-attachment CSS property to show a unique background for each Tumblr post on his main page (depending on which post image he used) and stays static as you scroll.

I started to play around with some code to replicate this effect and instead came up with some different examples, while still manipulating background-attachment. Hit the jump for some demos. Continue reading Messing with Background-Attachment


How to Display a User’s Visited Web Pages

Allowing a developer to access a visitor’s browsing history is a huge security risk, that’s why it’s not possible. If you own a website that runs PHP with MySQL and handles sessions then this could be done by tracking IP addresses, user agents and so on to associate a browsing pattern with a particular person. This however can be pretty inaccurate, plus it’s only limited to your own website.

So what are we going to use? Well when you think about it, a user’s browsing history is stored on their computer, client-side. And what else runs client-side that us web developers can make? JavaScript and CSS. These are what we’re going to use. Continue reading How to Display a User’s Visited Web Pages


Using jQuery To Create Parallax Scrolling Backgrounds

Just a quick demonstration today on using JavaScript and CSS techniques to create scrolling backgrounds. Here we layer backgrounds on top of each other and change their horizontal position to move them past the viewing area. It also uses different multipliers to move the closer objects quicker, and create a parallax effect.

Continue reading Using jQuery To Create Parallax Scrolling Backgrounds


CSS Drop Down Menu – No JavaScript!

This time I’ll show you how to create your own drop down menu with XHTML and CSS, but with absolutely no Javascript! It’s all down to the CSS pseudo element :hover, which you have probably already used on anchor (<a>) tags. If you followed my previous tutorials on navigation bars you will definitely be familiar with it. Continue reading CSS Drop Down Menu – No JavaScript!