2018-02-13 21:59:31

Fork: 0

Fav: 0

View: 448

Play
Stop
Reload

Fullscreen

Smart Phone

Readme
JavaScript 0 lines
HTML 17 lines
SCSS 71 lines

Now Loading1

Now Loading1

Now Loading1
YUI 3.3.0 CSS Reset

@keyframes loading-animation {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}

@keyframes loaded-animation {
    from {
        height: 5%;
    }
    to {
        height: 100%;
    }
}

@keyframes loaded-fade-animation {
    0% {
        opacity: 1.0;
    }
    100% {
        opacity: 0.0;
    }
}

.animation-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100vh;
    background: #000;
    transform: translate(-50%, -50%);
    overflow: hidden;
    &:before {
        position: absolute;
        top: 50%;
        left: 0px;
        content: "";
        width: 0%;
        height: 5%;
        background: #fff;
        display: block;
        transform: translateY(-50%);
        animation:
            loading-animation 2.5s ease-in forwards,
            loaded-animation 0.3s 3.5s ease-out forwards;
    }
    .animation {
        position: absolute;
        top: 50%;
        left: 50%;
        width: auto;
        height: auto;
        transform: translate(-50%, -50%);
        perspective: 250;
        &__text {
            position: relative;
            top: 0px;
            left: 0px;
            font-size: 1em;
            font-weight: bold;
            color: #000;
            display: inline-block;
            vertical-align: top;
            animation: loaded-fade-animation 1.0s 3.5s ease-in-out forwards;
        }
    }
}

Now Loading1<div class="container"> <div class="animation-wrapper"> <ul class="animation"> <li class="animation__text">N</li> <li class="animation__text">o</li> <li class="animation__text">w</li> <li class="animation__text">L</li> <li class="animation__text">o</li> <li class="animation__text">a</li> <li class="animation__text">d</li> <li class="animation__text">i</li> <li class="animation__text">n</li> <li class="animation__text">g</li> <li class="animation__text">1</li> </ul> </div> </div>@keyframes loading-animation { from { width: 0%; } to { width: 100%; } } @keyframes loaded-animation { from { height: 5%; } to { height: 100%; } } @keyframes loaded-fade-animation { 0% { opacity: 1.0; } 100% { opacity: 0.0; } } .animation-wrapper { position: absolute; top: 50%; left: 50%; width: 100%; height: 100vh; background: #000; transform: translate(-50%, -50%); overflow: hidden; &:before { position: absolute; top: 50%; left: 0px; content: ""; width: 0%; height: 5%; background: #fff; display: block; transform: translateY(-50%); animation: loading-animation 2.5s ease-in forwards, loaded-animation 0.3s 3.5s ease-out forwards; } .animation { position: absolute; top: 50%; left: 50%; width: auto; height: auto; transform: translate(-50%, -50%); perspective: 250; &__text { position: relative; top: 0px; left: 0px; font-size: 1em; font-weight: bold; color: #000; display: inline-block; vertical-align: top; animation: loaded-fade-animation 1.0s 3.5s ease-in-out forwards; } } }

Play on jsdo.it games
- Author
- Share
- ブログに埋め込む
- QR
- Tag
Download

Complete!

Description What kind of game?

Control Device

	Smartphone Controllerjsdo.it WebSocket Controller»
	Mouse
	Keyboard
	Touch Device

Fullscreen

Activated
Inactivated

jsdo.it games から削除する Submit

GENKI

Size

Width: px
Height: px

code

<script type="text/javascript" src="http://jsdo.it/blogparts/GYhR/js"></script>

QR Code

Discussion

Questions on this code?

Now Loading1

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Discussion

Tags