What we need for this tutorial:
- HTML and CSS
- JQuery and Bootstrap
- AnimeJS
- and your choice of editor
I downloaded all the assets and placed them in my assets directory so my directory will look like this:
- animations/assets/css/css-files-here
- animations/assets/js/js-files-here
Then I created index.html file and styles.css in my assets folder and then linked all css in header tag and linked all js files below the body.
So my index.html is looking like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Home - Programmer101N</title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
</body>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/anime.js"></script>
</html>
Now let’s add some images to our html file.
I’m going to create a div inside body with class of img-container which will hold all our images.
<body>
<div class="img-container">
</div>
</body>
Now let’s add our images.
<div class="img-container">
<img
class="meteor hero"
width="300"
src="assets/images/asteroid.svg"
alt=""
/>
<img
class="meteor"
width="200"
src="assets/images/asteroid.svg"
alt=""
/>
<img
class="meteor"
width="150"
src="assets/images/asteroid.svg"
alt=""
/>
<img class="rock" width="175" src="assets/images/rock.svg" alt="" />
<img class="rock" width="150" src="assets/images/rock.svg" alt="" />
<img class="rock" width="100" src="assets/images/rock.svg" alt="" />
<img class="rock" width="75" src="assets/images/rock.svg" alt="" />
<img class="star" width="25" src="assets/images/star.svg" alt=""/>
<img class="star" width="25" src="assets/images/star.svg" alt=""/>
<img class="star" width="25" src="assets/images/star.svg" alt=""/>
<img class="star" width="25" src="assets/images/star.svg" alt=""/>
<img class="star" width="25" src="assets/images/star.svg" alt=""/>
<img class="star" width="25" src="assets/images/star.svg" alt=""/>
<img class="star" width="25" src="assets/images/star.svg" alt=""/>
<img class="star" width="25" src="assets/images/star.svg" alt=""/>
<img class="star" width="25" src="assets/images/star.svg" alt=""/>
</div>
I gave rock/asteroid image class of rock and meteor image class of meteor and star image class of star.
Add it to this order exactly. Now let’s dive into our css.
html, body{
margin: 0;
padding: 0;
overflow: hidden;
background: radial-gradient(black, rgb(26, 25, 25));
}
*{
z-index: 2;
}
.img-container{
position: absolute;
height: 100vh;
width: 100vw;
}
.img-container img{
display: block;
position: absolute;
/* transform: translate(-50%, -50%); */
}
.img-container img:nth-child(1){
left: 50%;
top: 50%;
transform: rotate(0deg) translate(-50%, -50%);
}
.img-container img:nth-child(2){
left: 85%;
top: 15%;
transform: rotate(-25deg) translate(-50%, -50%);
}
.img-container img:nth-child(3){
left: 10%;
top: 35%;
transform: rotate(25deg) translate(-50%, -50%);
}
.img-container img:nth-child(4){
left: 25%;
top: 10%;
transform: rotate(25deg) translate(-50%, -50%);
}
.img-container img:nth-child(5){
left: 75%;
top: 80%;
transform: rotate(25deg) translate(-50%, -50%);
}
.img-container img:nth-child(6){
left: 15%;
top: 70%;
transform: rotate(25deg) translate(-50%, -50%);
}
.img-container img:nth-child(7){
left: 65%;
top: 15%;
transform: rotate(25deg) translate(-50%, -50%);
}
.star{
z-index: 0;
}
What I did is, I set img-container position to absolute and it’s children to absolute so that they can be overlapped and can be positioned. I gave position to each image randomly.
Now let’s create our animation.
First of all, I’m going to set stars position randomly. You can do this by:
$(".star").each((i, e) => {
$(e).css('left', Math.round(Math.random() * 100) + "%");
$(e).css('top', Math.round(Math.random() * 100) + "%");
});
Now let’s create our Hero Animation. Let’s add a listener if our image is clicked.
$(".img-container img").click((e) => {
// Animation will go here.
});
Inside this, Now I’m gonna hold our hero class to variable.
$(".img-container img").click((e) => {
const hero = $('.hero');
});
Animating First our hero to go to position where first image was clicked.
$(".img-container img").click((e) => {
const hero = $('.hero');
anime({
targets: '.hero',
duration: 500,
left: $(e.target).css("left"),
top: $(e.target).css("top"),
width: $(e.target).attr("width"),
begin: (e) => {
hero.removeClass("hero");
},
easing: "linear",
});
});
Now animating our image to go to hero position.
$(".img-container img").click((e) => {
const hero = $('.hero');
anime({
targets: '.hero',
duration: 500,
left: $(e.target).css("left"),
top: $(e.target).css("top"),
width: $(e.target).attr("width"),
begin: (e) => {
hero.removeClass("hero");
},
easing: "linear",
});
anime({
targets: e.target,
duration: 500,
left: hero.css("left"),
top: hero.css("top"),
width: hero.width(),
begin: (e) => {
const target = $(e.animatables[0].target);
target.addClass("hero");
},
easing: "linear",
});
});
We are finished animating. Our Effect is now finished.
You can download this source code from my Github.
