diff --git a/website/dist/index.html b/website/dist/index.html index 8ad82161..15bdbbf5 100644 --- a/website/dist/index.html +++ b/website/dist/index.html @@ -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 }); diff --git a/website/src/sass/styles.scss b/website/src/sass/styles.scss index afe3a957..56b015d4 100644 --- a/website/src/sass/styles.scss +++ b/website/src/sass/styles.scss @@ -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};