Как сделать так, чтобы анимированный баннер на CSS3 показывал анимацию только один раз?

Question

[keslo]

Добрый день, господа!

1. Есть пример баннера tympanus.net/Tutorials/AnimatedWebBanners/
2. Анимация запускается при каждом обновлении страницы

Как сделать так, чтобы этот анимированный баннер (на CSS3) показывал анимацию только один раз для пользователя при посещении первой страницы сайта? Т.е. при последующих переходах по страницам сайта банер должен оставаться в конечном положении анимации.

Если как-то коряво выразился, то извиняйте :-)

Answer 1

[mitry]

Если это первое посещение (куки не установлен), то на сервере или с помощь JS добавлять класс «first-visit» к BODY или банеру. А в стилях применять анимацию только к наследнику «first-visit»

Comments

[keslo]

Благодарю!

Answer 2

[servekon]

При первом посещении страницы писать куки, что анимированный банер показан. На других страницах проверять наличие/значение этой куки. И если надо, просто показывать картинку с конечным положением анимации.

Comments

[keslo]

Спасибо, идея понятна. Но как технически реализовать ее пока не понимаю. Буду благодарен советам и ссылкам на то, что надо освоить для этого.

Answer 3

[Glebcha]

Можно и с local storage попробовать.