Как сделать анимацию появления картинки?

Question

[Ярослав Билионок]

Нужно сделать анимацию появления картинки как тут показано
https://dribbble.com/shots/5368772-FSHN-Articles

Comments

[FeST1VaL]

Тут как бы слишком много разных анимаций... все они запускаются по сути по таймеру... разбивайте на блоки и пытайтесь понять что за чем идет и реализуйте по очереди... одной строчкой вы тут не обойдетесь. Я бы использовал GSAP анимацию

Answer 1

[Михаил Шведков]

Вопрос. Интересует только картинка (читай - фотография барышни в платье) или весь набор анимаций?
Вот первые несколько, которые разглядел:
1. Сдвиг кораллового прямоугольника
2. Скейл барышни
3. уменьшение ширины (или сдвиг с низким z-index) кораллового прямоугольника
4. Появление всех иконок вкруг (fade-in + сдвиг с разных сторон)
5,6. fade-in+ сдвиг вверх для заголовков (по очереди)

Ну и так далее.
По поводу реализации - барышня проще всего сделана, простой scale.
По поводу реализации всей картинки - либо красиво отрабатывать кейфреймы, чтоб все санимировалось в срок на чистом CSS, либо пилить набор событий на JS и запускать.

P.S. Я мало-мало олень, на истину в конечной инстанции не претендую

Comments

[Ярослав Билионок]

Желательно вся анимация

[Михаил Шведков]

Ярослав Билионок, пойду по пути того, кто вместо рыбы дает удочку и рискует ею же огрести.
Для всей анимашки сперва надо составить ее сценарий, потом перевести в алгоритм, а потом уже и закодить этот самый алгоритм с предпочитаемой долей извращения. Вот предположительный порядок действий:

1. Внимательно смотрите на анимашку
2. Вычленяете отдельные элементы, которые в точке А в одном состоянии, а в точке B в другом. Можно себе эти элементы куда-нибудь переписать, чтоб в дальнейшем было удообнее
3. Верстаете все выписанные в п.2 элементы, располагаете их на стартовых позициях.
4. Заливаете результат на какой-нибудь codepen.io, чтоб было видно, что инструкция прошла не зря

Answer 2

[Дмитрий Чайников]

Посмотрите эти слайдеры:

• wowslider.com/ru/web-photo-gallery-subway-basic.html
  
• www.joelambert.co.uk/flux
  
• cssslider.com/javascript-slider-18.html
  
• https://www.jssor.com/demos/simple-layer-animation...
  
• www.dynamicdrive.com/dynamicindex17/parallaxslider...