A lot of websites you come across online probably don’t always stand out or don’t have features worth talking about.
This blog post “Website Ideas Worth Sharing” covers cool website ideas people have come up with. These are the types of sites that are memorable and you may even want to visit them again, just to see the features, again.
We will be looking at both interactive websites as well as normal sites but with something extra.
These are websites that you may not have come across before or may take some time to find, so be sure to read on.
Robby Leonardi – Resume
Robby Leonardi is a freelancer who lives in New York City. He does illustration, design and animation. His speciality is illustrative design, a combination between illustration and design.
Robby’s Resume is not just any resume website, nothing like a bog standard CV website. It is an interactive resume where you can move a character throughout the website, either by, scrolling your mouse wheel or using the arrow keys on your keyboard.
The webpage starts off by dropping in the “HTML5” dude (above), then you are prompted with the instruction of how to move him about the website.
So, what happens as you move throughout the site you may be asking. Well, each stage is split up into levels, just like in a video game. The levels go from one to four.
Level one contains information about Robby, level two contains information about Robby’s skills, level three contains information about Robby’s experience and finally, level four presents Robby’s awards and publications.
As you move throughout the levels, you see the HTML5 Dude run, jump, swim, fly and even jump into a hot air balloon!
As you hit various sections within the levels, you are greeted with “skill bars”, but these are not your average skills bars. These are made with fancy graphics that are animated.
For example, on level two you get to see Robby’s graphics and web software skills. Each with a rating of beginner, elementary, intermediate, advanced and expert.
To show how far Robby has progressed through these ranges, fish swim into the “bar” and fill it up. If that isn’t enough, if you look closely, you will see an air bubble.
This comes from the HTML5 dud himself as he lets out air from his lung.
Finally, as you reach the end of the page, you are greeted with a contact form and social media links.
Robby says the website works in the following way:
In essence, the jQuery and jQuery UI is what is applied to each HTML element to animate it.
Codrops – 3D Room Image Gallery
This image gallery isn’t like your bog standard 2D gallery as you see on most websites. This 3D Room Gallery presents images on the web as you’d see in an art gallery.
When you first load the page, you are greeted with what looks like a 2D wall with an image hanging off it. If you look closely you will see a subtle box shadow around the image to give the frame “depth” just like in real life.
As you scroll to each image, each slide has a nice smooth transition. However, as you start to scroll through the images, you eventually reach the “end of the wall” the corner of the room.
When you reach this, you are presented with a really cool 3D perspective effect, where it really looks like you are turning your head to the perpendicular wall.
The end result, well, is a very well put together 3D room.
If you are looking to add an image gallery to your website, it really pays to look around and do your research. By doing this you really can stand out from others.
Rolex – Current Time
Rolex’s website has a really cool feature that we’d like to show you. The ability for the watch hands to move like a real life watch and display the current time.
At the time of writing this blog (just after 10:45 AM), you can see this time displayed on the watch on the webpage. This can be seen in the featured image for this section (above).
On a final note, this not only gives the wow factor but can also show you how the watch hands look as they move.
CentreStage – Flex Grow Featured Images
Centre Stage is actually a website we have just designed and developed for a photographer named Paul. Centre Stage’s website features four featured work categories, each with an image, title and link.
As the page loads, you are greeted with a pre-expanded column for the left image. As you mouse over the other images, this pre-expanded image collapses and the hovered image expands.
This doesn’t just snap into place, a transition has been applied which allows the expanding and shrinking to gradually happen over time. On top of this, the vertical title fades away as the horizontal title fades in as you hover.
This is growing and shrinking is achieved with flex-grow. This is a CSS property and this can be applied to elements on hover. To make the growing and shrinking smooth, a CSS transition is applied to make the effect happen over time.
It is small and subtle effects like this that really add another level of user experience and look to your website.
On a quick note, as we are on the topic of one of our own websites. If you are looking for a new website and not sure where to start to be sure to check out our complete website checklist.
PP Performance – Full-Screen Page Transitions
As you are well aware, as webpages load, they seem to just “pop” into view.
You can actually add full-screen transitions and transforms to your web page as the screen loads.
For this example, we are using PP Performace’s website, as it provides a good example of what can be down with full-page transitions as you load each page.
Either a black or white overlay slides from the right to the left of the screen which reveals the page content as soon as it’s loaded.
Upon the completion of the page load, the top navigation bar makes an entry by smoothly sliding down into view.
This effect is achieved with CSS transitions (timing) and transforms (the placement of elements on the x y and z-axis)
APPS – Interactive website
APPS is a company that produces cider and they have a really cool website. The website takes you through a journey of how cider is made from picking apples off a tree.
Once the page has loaded, you are greeted with a full-screen hero section prompting you to click start. Upon clicking start, the animations begin to happen.
You are taken to the next step where you are then prompted to click various keys on your keyboard, upon doing this, the website takes you to the next section of the journey.
It starts by picking the apples from the tree, pressing the apples, extracting the juice then fermenting the apples.
This may seem like a simple way of achieving a cool effect, but when done right it can really make a cool website. Especially when in full screen.
WebFlow – History of the Web
As the webpage is loaded, you are presented with a full-screen hero image with spinning planet, shapes and writing.
However, a feature worth pointing out here is the main heading text “Interactions 2.0”. As you move your mouse over this text, the text pans with your mouse. Be sure to check this out!
As you scroll down the timeline starts. The timeline starts actually starts in 1992 and ends in 2017.
Here is a good example of some of the ridiculous elements added to the page that utilise CSS transitions and animations – bright flashy colours, random blocks floating over the webpage. All reminiscent of the 90’s websites isn’t it?
We would like to point out a feature really worth mentioning though. A scrollable mobile screen. As you reach this section you are presented with an iPhone, your screen stops scrolling and you begin to scroll through the mobile content.
This is worth mentioning as you can utilize this idea to showcase websites you’ve made for clients on your portfolio page. You could have a desktop and mobile screen showing off what your website looks like on each, whilst allowing your users to scroll through the content.
One way to achieve such effect is by giving a maximum height to the element that contains the text, then apply a property called overflow scroll. This will allow you to scroll through content within an element on the screen (just like WebFlows iPhone example above).
Monokai – Scroll Effect
Monokai is a developer and has made his own website with a very unique scrolling effect.
As you scroll up and down the webpage, random blocks fade in and out revealing the content as you scroll.
This effect is rather unique and has not been revealed as to how it’s been achieved. Instead, people have posted their own thoughts on forums as to how it’s been achieved.
One guess is that it utilises the HTML canvas that has random ascii blocks generated and placed on the canvas.
This is a very simple but neat effect and works really well.
Apple – Mac Pro Landing Page
Apple is well known for its products (both price and quality). However, they also have a website feature worth talking about. The Mac Pro Landing Page.
This page walks you through the Mac Pro explaining its features. But, it does it in a very slick way.
As you scroll down the webpage, the Mac Pro shifts in place and begins to open up revealing the insides.
Once the Mac Pro Cover has been removed, you see a slick animation of the internal parts sliding out of the structure as you scroll.
This, in essence, is not just displaying and advertising a product but is providing a virtual tour as well.
Remember when we looked at the Apps website? Where you saw the process of how cider is made as you scroll down the page. But, it was discovered that the video was used. Well, you can probably guess, Apple utilises the same method.
On Apple’s website, there are different video sequences that are revealed and hidden as you scroll to different points of the page, thus, creating the effect you see as you scroll.
To add the text elements describing what is going on, CSS position techniques are used and the relevant text is simply revealed when the video that the text relates to is revealed.
Wychwood Brewery – Landing Page
Wychwood’s landing page contains simple, but really well put together CSS positioning, transitions, transforms and animations. From here, you can navigate to any section of the site. The shop, events, tours and more.
The elements you see are all positioned absolutely meaning they stay where they are within their containing element. Keeping them where they should be.
If you look at the jukebox, you will notice the red and orange neon strip is animated. This is achieved with an animation applied to the transform property. The animated property simply repeats what the transform does over and over again creating the effect you see.
To let you know when you’ve moused over an element, the element is highlighted in a way that really makes it pop from the page.
Atomic Object – Homepage loading effects
Most websites either have all the content on the page loaded at once, or loaded as you scroll.
However, adding subtle effects such as CSS transitions and transforms can make a difference to the user experience.
Atomic Object’s website loads and transitions content into place as you scroll. Take note of the work section in the image above. Notice there is nothing below the “Software Development that Solves Problems” section.
However, as you scroll the content fades in from left to right until it’s properly in place and visible.
Having this type of effect also lets you know content is loaded as you scroll, as, on some sites, content is loaded as soon as you scroll and it looks like it’s been there all along.
The advantage of having such a feature means less loading times, as not all the content is loaded at once and adding the subtle CSS effects adds a layer to the user experience to really give a polished off website and experience.
The effect seen on Atomic Objects uses waypoints and animate (libraries used together to create scrolling effects).
Waypoints is a library that lets you execute a certain event at a specific scroll point. The event could be loading in content for the section you just scrolled to. Animate is a library used to create animations.
These animations can be applied to the content being loaded in at the specific scroll point.
And there you have it, this is how you’d create such scrolling effects.
Cyclemon is an online cycle poster store that has a really interesting parallax effect.
As you scroll down the webpage, each individual cycle design is revealed in the same place (bottom of the screen) as the background scrolls and changes (until the cycle is fully revealed).
This is a very clean example of how to properly utilise parallax effects on a webpage, rather than just having one in for the sake of it.
The FWA – Home Page
The FWA lists websites worthy of being rated. But, what we are looking at here is how the content is presented on the webpage.
Instead of having the usual grid layout with the filter options at the top of the page (filter by and sort by etc.), the websites are listed along a timeline with that shows the date they were published.
As you scroll down the webpage, the dates go further back. If you filter the date, you will go back in time on the timeline and you will see all the posts from that specific date on the timeline.
Not only is the content presented in an intuitive way, but it’s loaded in as you scroll. As it’s loaded in a transition is applied that pushes each item up to the correct place on the timeline. Be sure to check it out.
Conclusion: Website Ideas Worth Sharing
We have covered a good selection of websites that are definitely worthy of a mention. We have covered highly interactive websites such as Robby’s Resume website to websites that utilise videos to create smooth effects, such as Apple’s Mac Pro landing page.
If you ever bored and browsing the internet, it’s always worth carrying out that bit of extra research to find these types of interesting sites. Once you’ve found them it’s always worth bookmarking it and even sharing it!
If you are looking for a new website or decided you’d like a redesign upon looking at some of the above examples, please get in touch with us so we can help you.