Series: How I made ...
I’ve re-designed my personal site recently since the old version had too much description words, which is not the best design I could offer as a Web Front-End Designer :smirk:. You may probably find some interesting features at this site (especially the home page), so this post is served as an introduction of how to implement them.
What You Will Learn In This Post
There’s a Tao-like image at home page (you should probably have a look at it if you haven’t yet). With mouse moving around, its shadow would move correspondingly with mouse position, which makes your mouse seem like a light source!
Background of this post looks like 3 sheets of paper. If you found that interesting, you may learn how to implement it in the following introduction.
Now, let’s start to learn how to make this cool site! :yum:
Notice the difference between the following two images.
I would not regard this amazing without the interaction with mouse moving. But it’s a really cool effect when your mouse seems to be a light source.
Make sure they are of the same size and the second image cover on the first one entirely so that it looks like:
This can be easily achieved by using some simple CSS. Set the CSS of the second image to be
position: relative; and
top: -400px;, which means to move the second image
400px (height of the images) up than its original position.
If you’re wondering why we don’t just Photoshop the image merged by these two image, that’s because only in this way can we change the
opacityof the second image, which will be explained later.
divto be shadow.
We need the
div to be a circle with the same size with those in the images. So we set its
border-radius to be the radius of cicles in the images, which is
5 / 6 of
400px, and its
height to be double radius size. The left
1 / 6 can be occupied by
We set the
box-shadow to be
100px 100px 100px #333 now just to check if everything’s going on well here.
Suppose you did everything as was told above, you should probably get something like this:
It seem’s that the shadow is slightly way from the images. But the fact is that even the two images are not in the same position, althrough you may not notice this due to the transparent background.
So, what’s wrong?
If you’re careful enough, you may find that two adjcent images will have a gap even if
padding are set to be
0. This is exactly what caused the problem in our case, and can be settled by setting the
display attribute of image to be
Now, we have the gap eliminated:
####Then, add mouse event.
We want to create soft-shadow effect as shown in the following image:
The idea here is to add a mouse move event listener and change the
opacity to be smaller and shadow
offset to be larger when mouse position is away from the center of screen.
Here’s how to implement it with jQuery.
We first calculate mouse position in screen with unified
y. So top-left corner of the screen is
(-1, -1) and bottom-right is
r to represent distance from center to mouse position. We use
var r = Math.sqrt((x * x + y * y) / 2); instead of
var r = Math.sqrt((x * x + y * y)); so that
r is also unified (between
We can set the
opacity to be
1 - r or, in my case, to be
1 - Math.sqrt(r);, so that it’s non-linear and may offer better effect.
The complete code would be:
$('#titleCircle')is the circle used as shadow and
$('#titleWords')is the image with words on it.
1) PhotoShop a paper-like image.
2) Set the background of this post to be this image.
3) Add some shadow if you wish.
.pageBack is used for all sheets of paper in the background.
-webkit-backface-visibility: hidden;is used to eliminate the jaggies caused by rotation which works only on webkit platform.
We need another two classes to represent rotation of two sheets:
Now, with HTML
we can get:
To make it look better, we would like to move the sheets in the background a little.
Now, we can get an elegant effect:
I use GitHub to host my blog and I don’t have any database which can be accessed all the time. So I decide to build a static blog. After some research, I chose Jekyll out of its competitors, due mostly to its close relation to GitHub.
There’re many good posts about how to set up a blog with Jekyll and GitHub, and I’m not going to dive into it. For those who want to know about this, I would recommend Andrew Munsell’s article Learning Jekyll By Example: Build a Jekyll Website, Start to Finish.
I’m going to write more about Web Front-End technology and possibly some other interesting topics (e.g.: Face Detection and Machine Learning). Hope it can be helpful for you! :blush:
Series: How I made ...
View All Posts