Levitating Guru
HTML
<!-- img borrowed from https://www.vecteezy.com/vector-art/129004-calm-yoga-guru-meditation -->
<div class="clouds">
<div class="cloud cloud1 cloudLeft">
<img src="http://acceptaudit.ge/guru/cloud4.png" alt="" />
</div>
<div class="cloud cloud2 cloudLeft">
<img src="http://acceptaudit.ge/guru/cloud3.png" alt="" />
</div>
<div class="cloud cloud3 cloudLeft">
<img src="http://acceptaudit.ge/guru/cloud2.png" alt="" />
</div>
<div class="cloud cloud4 cloudLeft">
<img src="http://acceptaudit.ge/guru/cloud1.png">
</div>
<div class="cloud cloud5 cloudLeft">
<img src="http://acceptaudit.ge/guru/cloud2.png" alt="" />
</div>
</div>
<div class="guru">
<div class="guruImg">
<img src="http://acceptaudit.ge/guru/guru.png" alt="" />
</div>
<div class="guruShadow"></div>
</div>
CSS
*{margin:0}
html{
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
position:relative;
align-items:center;
background-image:url("http://acceptaudit.ge/guru/background.png");
background-repeat:no-repeat;
background-size:cover;
background-position:center center;
overflow:hidden;
}
.guru{
width:50px;
height:30px;
margin:auto;
}
.guruImg
{
width:50px;
height:50px;
margin:auto;
}
.guruImg>img{
margin-top:50vh;
width:120px;
height:150px;
}
.guruShadow{
width:50px;
height:50px;
position:absolute;
bottom:0;
left:51%;
background:#111111;
opacity:0.4;
margin:auto;
border-radius:100%;
transform:rotatex(70deg);
}
.clouds{
flex:1;
width: 100%;
position:relative;
}
.cloud
{
display:inline-block;
position:absolute;
}
.cloud1
{
top:10%;
}
.cloud2
{
top:20%;
}
.cloud3
{
top:60%;
}
.cloud4
{
top:80%;
}
.cloud5{top:45%}
@keyframes cloudAnimation{
0%{transform:translate(-250px)}
100%{transform:translate(100vw)}
}
.cloud1{ animation: cloudAnimation 80s 1 linear;}
.cloud2{ animation: cloudAnimation 65s 1 linear;}
.cloud3{ animation: cloudAnimation 28s 1 linear;}
.cloud4{ animation: cloudAnimation 55s 1 linear;}
.cloud5{ animation: cloudAnimation 24s 1 linear;}
.cloud0Inf{ animation: cloudAnimation 80s infinite linear;}
.cloud1Inf{ animation: cloudAnimation 45s infinite linear;}
.cloud2Inf{ animation: cloudAnimation 28s infinite linear;}
.cloud3Inf{ animation: cloudAnimation 55s infinite linear;}
.cloud4Inf{ animation: cloudAnimation 24s infinite linear;}
JAVASCRIPT
(function(){
//guru animtion
var Guru = function() {
this.item = $('.guru img');
this.width;
this.height;
this.posX;
this.posY;
this.speed = 1;
this.MovementY;
this.shadow = $('.guruShadow');
this.scaleQuant = 0.01;
this.Levitate = function(){
this.MovementY = Math.sin(this.speed)*12;
this.item.css({'transform':'translateY('+ this.MovementY + 'px)'});
this.speed += 0.02;
}
this.ShadowAnim = function(){
this.scale = (Math.sin(this.scaleQuant)+2.7)/2;
this.shadow.css({'transform':'scale('+ this.scale +') rotatex(70deg)'});
this.scaleQuant += 0.02;
}
this.Action = function(){
setInterval(this.Levitate.bind(this));
setInterval(this.ShadowAnim.bind(this));
}
};
//create Guru OBJ
var guru = new Guru();
guru.Action();
//Clouds Animation
var Clouds = function(){
this.allCloudElem = $('.cloud');
this.ScreenWidth = $("body");
this.OffsetX;
this.OffsetY;
this.index;
this.cloud = [$('.cloud1'), $('.cloud2'), $('.cloud3'), $('.cloud4')];
//start clouds at different position with position:left
this.CloudAnim = function()
{
//give the random starting position
this.allCloudElem.each(function()
{
this.index= $(this).index();
this.OffsetX = Math.floor(Math.random()*10)* 80;
$(this).css({"left":this.OffsetX});
//remove starting position left and give the new loop
$(this).one("animationend",function(){
this.index = $(this).index();
$(this).css({"left":0});
$(this).addClass('cloud'+this.index+'Inf');
});
});
}
};
var clouds = new Clouds();
clouds.CloudAnim();
// clouds.CloudsTween();
})();
