Вёрстка анимированного логотипа

@agumy · Регистрация: 24.07.2016

Студворк — интернет-сервис помощи студентам

Хотелось бы узнать, как сделать такой анимированный логотип, как на этом сайте (не реклама, думаю многие знакомы с этой игрой и знают, что в неё заходить не стоит) - тык.
Это не гифка, анимация сделана из покадровой вырезки отрезков PNG-картинки, вот мне и интересно, как это сделать.
Прилагаю файл - PNG:

@mrtoxas · 26.07.2016, 15:53

Картинка загружается фоном через стиль background-image, потом при помощи @keyframes сдвигается в бок.

@evgeniyd · 26.07.2016, 15:56

Я думаю, это анимация спрайтов с помощью CSS функции animation-timing-function через step().

@agumy · 26.07.2016, 16:20 **[ТС]**

Сообщение от evgeny_duzhenko

Я думаю, это анимация спрайтов с помощью CSS функции animation-timing-function через step().

Я почитал сейчас про это, даже нашёл именно то, что мне нужно (казалось бы), но после того, как я сделал всё как было написано, у меня ничего не заработало. Картинка статично держится на самом первом отрезке. Размеры и кол-во кадров я указал правильно.

HTML5
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="2.css">
</head>
<body>
    <div class="logo"></div>
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
div.logo {
   width: 172px;
   height: 172px;
   background: url(bg.png) left;
   transition: 1s steps(60);
}
 
div.logo:target {
   background-position: 10320px 0;
}

В чём тут ошибка? Не понял так же до конца за что отвечает псевдокласс target, возможно, дело в нём. Информацию нашёл в статье на хабре тык (где-то в середине статьи, там будет шагающий белый человечек на чёрном фоне).

@evgeniyd · 26.07.2016, 16:42

Ну как то так) тык)

@Shakalaka · 26.07.2016, 20:02

Сообщение от agumy

Хотелось бы узнать, как сделать такой анимированный логотип, как на этом сайте

Конкретно на этом сайте сделан через canvas

@Fedor92 · 26.07.2016, 21:37

evgeny_duzhenko, в лисе скорее всего работать не будет... Я бы предложил тупо использовать gif, как вариант...

@evgeniyd · 26.07.2016, 21:46

Сообщение от Fedor92

evgeny_duzhenko, в лисе скорее всего работать не будет... Я бы предложил тупо использовать gif, как вариант...

Ну вопрос был как без gif))

Вот так, вроде нормально

CSS
1
2
3
4
5
6
7
8
9
10
11
12
#frame {
    padding: 50px;
    width: 274px;
    height: 274px;
    background: url([url]http://allods.my.com/splash-screen/images/astrolabiazip.png[/url]) no-repeat left top;
    -webkit-animation: frame-animation 1s steps(60) infinite;
       -moz-animation: frame-animation 1s steps(60) infinite;
          
}
 
@-webkit-keyframes frame-animation { 0% { background-position: 0px 0; } 100% { background-position: -29760px 0; } }
  @-moz-keyframes frame-animation { 0% { background-position: 0px 0; } 100% { background-position: -29760px 0; } }

@Fedor92 · 26.07.2016, 21:52

Сообщение от evgeny_duzhenko

Вот так, вроде нормально

evgeny_duzhenko, да только строки для ie не хватает

:

CSS
1
animation: frame-animation 1s steps(60) infinite;

Сообщение от evgeny_duzhenko

Ну вопрос был как без gif))

Я говорю о рациональности...

@evgeniyd · 26.07.2016, 21:56

Сообщение от Fedor92

evgeny_duzhenko, да только строки для ie не хватает :

Что ж Вы валите меня и валите

Сообщение от Fedor92

Я говорю о рациональности...

Согласен.

@Fedor92 · 26.07.2016, 21:57

Не по теме:

Сообщение от evgeny_duzhenko

Что ж Вы валите меня и валите

Я не валю, просто помогаю допилить до ума и не более того... :)

@Shakalaka · 26.07.2016, 22:13

Вариант с canvas

HTML5
1
<canvas id="myCanvas" width="200" height="274"></canvas>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
var width = 29760, 
height = 274, 
frames = 60, 
currentFrame = 1, 
canvas = document.getElementById("myCanvas"), 
cv = canvas.width,
ctx = canvas.getContext("2d");
image = new Image()
image.src = 'http://allods.my.com/splash-screen/images/astrolabiazip.png';
var fps = 25, fpsInterval, startTime, now, then, elapsed;
 
function startAnimating(fps) {
    fpsInterval = 1000 / fps;
    then = Date.now();
    startTime = then;
    animate();
}
 
function animate() {
    requestAnimationFrame(animate);
    now = Date.now();
    elapsed = now - then;
  if (elapsed > fpsInterval) {
        then = now - (elapsed % fpsInterval);   
        ctx.clearRect(0, 0, cv, height);
        ctx.drawImage(image, (width*(currentFrame-1))/frames, 0, width/frames, height, cv/2 - (width/frames)/2, 0, width/frames, height);
        if (currentFrame == frames) {
            currentFrame = 1;
        } else {
            currentFrame++;
        }
    }
}
image.onload = function(){
    startAnimating(fps);
}

https://jsfiddle.net/shakalaka/zkab4wfv/

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm) 8Observer8 30.01.2026 Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .	Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .

@agumy 0 / 0 / 0 Регистрация: 24.07.2016 Сообщений: 21

	Вёрстка анимированного логотипа 26.07.2016, 15:41. Показов 2172. Ответов 11 Метки нет (Все метки) Хотелось бы узнать, как сделать такой анимированный логотип, как на этом сайте (не реклама, думаю многие знакомы с этой игрой и знают, что в неё заходить не стоит) - тык. Это не гифка, анимация сделана из покадровой вырезки отрезков PNG-картинки, вот мне и интересно, как это сделать. Прилагаю файл - PNG: 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	26.07.2016, 15:53
	Картинка загружается фоном через стиль background-image, потом при помощи @keyframes сдвигается в бок. 0

@evgeniyd 29 / 29 / 11 Регистрация: 10.05.2016 Сообщений: 111
	26.07.2016, 15:56
	Я думаю, это анимация спрайтов с помощью CSS функции animation-timing-function через step(). 0

@evgeniyd 29 / 29 / 11 Регистрация: 10.05.2016 Сообщений: 111
	26.07.2016, 16:42
	Ну как то так) тык) 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	26.07.2016, 21:37
	evgeny_duzhenko, в лисе скорее всего работать не будет... Я бы предложил тупо использовать gif, как вариант... 0

Вёрстка анимированного логотипа

Решение