Adding fixed bubbles
This commit is contained in:
parent
d54e884063
commit
8e67a41063
website
24
website/dist/index.html
vendored
24
website/dist/index.html
vendored
@ -225,9 +225,6 @@
|
||||
opacity: 1,
|
||||
y: 0
|
||||
})
|
||||
.to(".bubble-1", {
|
||||
opacity: 0
|
||||
})
|
||||
.to(".story-1", {
|
||||
x: -maxImageTranslateValue * (2/bubbleNumber),
|
||||
onStart: function() {
|
||||
@ -237,13 +234,13 @@
|
||||
document.getElementById("leymah").src = charStaticImage;
|
||||
}
|
||||
})
|
||||
.to(".bubble-1", {
|
||||
opacity: 0
|
||||
})
|
||||
.to(".bubble-2", {
|
||||
opacity: 1,
|
||||
y: 0
|
||||
})
|
||||
.to(".bubble-2", {
|
||||
opacity: 0
|
||||
})
|
||||
.to(".story-1", {
|
||||
x: -maxImageTranslateValue * (3/bubbleNumber),
|
||||
onStart: function() {
|
||||
@ -253,13 +250,13 @@
|
||||
document.getElementById("leymah").src = charStaticImage;
|
||||
}
|
||||
})
|
||||
.to(".bubble-2", {
|
||||
opacity: 0
|
||||
})
|
||||
.to(".bubble-3", {
|
||||
opacity: 1,
|
||||
y: 0
|
||||
})
|
||||
.to(".bubble-3", {
|
||||
opacity: 0
|
||||
})
|
||||
.to(".story-1", {
|
||||
x: -maxImageTranslateValue,
|
||||
onStart: function() {
|
||||
@ -269,10 +266,19 @@
|
||||
document.getElementById("leymah").src = "static/images/story/character-static.png";
|
||||
}
|
||||
})
|
||||
.to(".bubble-3", {
|
||||
opacity: 0
|
||||
})
|
||||
.to(".bubble-4", {
|
||||
opacity: 1,
|
||||
y: 0
|
||||
})
|
||||
.to(".character, .bubble-4", {
|
||||
x: "51vw",
|
||||
onStart: function() {
|
||||
document.getElementById("leymah").src = "static/images/story/character-walk-right.gif";
|
||||
},
|
||||
})
|
||||
.to(".bubble-4", {
|
||||
opacity: 0
|
||||
});
|
||||
|
@ -21,6 +21,12 @@
|
||||
font-family: 'VCR OSD Mono';
|
||||
src: url('../fonts/VCR_OSD.ttf') format('truetype');
|
||||
}
|
||||
@function randomNum($min, $max) {
|
||||
$rand: random();
|
||||
$randomNum: $min + floor($rand * (($max - $min) + 1));
|
||||
|
||||
@return $randomNum;
|
||||
}
|
||||
|
||||
header {
|
||||
background: #28A7FC url("../images/sky.jpg") no-repeat bottom;
|
||||
@ -275,20 +281,20 @@ img{
|
||||
transform: translate(0px, 0px);
|
||||
}
|
||||
25% {
|
||||
transform: translate(#{25+random(50)}px, #{10+random(35)}px);
|
||||
transform: translate(#{randomNum(0, 50)}px, #{randomNum(0, 50)}px);
|
||||
}
|
||||
50% {
|
||||
transform: translate(#{25+random(50)}px, #{10+random(35)}px);
|
||||
transform: translate(#{randomNum(0, 50)}px, #{randomNum(0, 50)}px);
|
||||
}
|
||||
75% {
|
||||
transform: translate(#{25+random(50)}px, #{10+random(35)}px);
|
||||
transform: translate(#{randomNum(0, 50)}px, #{randomNum(0, 50)}px);
|
||||
}
|
||||
100% {
|
||||
transform: translate(#{25+random(50)}px, #{10+random(35)}px);
|
||||
transform: translate(#{randomNum(0, 50)}px, #{randomNum(0, 50)}px);
|
||||
}
|
||||
}
|
||||
.bird-#{$i} {
|
||||
margin: 0 #{random(7)}vw;
|
||||
margin: 0 #{randomNum(0, 10)}vw;
|
||||
transition-timing-function: cubic-bezier(0.150, -0.600, 0.155, 1.650);
|
||||
animation-duration: 15s;
|
||||
animation-name: fly-#{$i};
|
||||
|
Loading…
Reference in New Issue
Block a user