Jump to content
  • 0
Sign in to follow this  
Генадий Арамов

Как сделать GIF анимацию запускающуюся при прокрутке?

Question

Всем привет. Нашел тему, о том как запускать гиф анимацию при наведении курсора. А не подскажите как сделать так, что бы анимация начала проигрываться при прокрутке? Вариант залить прямоугольник на весь экран сначала статичной картинкой, а на вторую фазу гифкой не катит, так как есть вероятность того, что посетитель курсором не попадет на объект.

Share this post


Link to post

9 answers to this question

Recommended Posts

  • 0
2 часа назад, Генадий Арамов сказал:

Всем привет. Нашел тему, о том как запускать гиф анимацию при наведении курсора. А не подскажите как сделать так, что бы анимация начала проигрываться при прокрутке? Вариант залить прямоугольник на весь экран сначала статичной картинкой, а на вторую фазу гифкой не катит, так как есть вероятность того, что посетитель курсором не попадет на объект.

Гиф анимацию никак.

Share this post


Link to post

Новая статья

Как бесплатно получить специализированный хостинг для Adobe Muse сайта. Читайте новую инструкцию по этой ссылке.
  • 0

любая гиф анимация запускается автоматически при заходе на страницу сайта... не надо для этого создавать прямоугольник на всю страницу (непрофессионально). 

Share this post


Link to post
  • 0
amorogov    0

Какого типа нужна анимашка?
Есть 2 пути создания анимашки для сайта на музе:
1. Adobe Edge
2. Более просто вариант скачать виджет ТурбоМьюз Анимейт (это на случай если нужно что бы выпало слово или вылетело что-то или если нужно заставить шестеренку вращаться или заставить пульсировать кнопку), тогда тебе этот видж нужен
 

Share this post


Link to post
  • 0
37 минут назад, amorogov сказал:

1. Adobe Edge

Adobe Edge Animate год не поддерживается. Муза за это время значительно обновилась, Edge Animate в связи с этим всё меньше пригодна к работе. На смену пришел переименованный флэш  - Adobe Animate CC. Но эффекты прокрутки к сожалению, пока не поддерживаются

40 минут назад, amorogov сказал:

Более просто вариант скачать виджет ТурбоМьюз Анимейт

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

Share this post


Link to post
  • 0
37 минут назад, amorogov сказал:

1. Adobe Edge

Adobe Edge Animate год не поддерживается. Муза за это время значительно обновилась, Edge Animate в связи с этим всё меньше пригодна к работе. На смену пришел переименованный флэш  - Adobe Animate CC. Но эффекты прокрутки к сожалению, пока не поддерживаются

40 минут назад, amorogov сказал:

Более просто вариант скачать виджет ТурбоМьюз Анимейт

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

Share this post


Link to post
  • 0
amorogov    0
17 часов назад, Павел Хомерики сказал:

Adobe Edge Animate год не поддерживается. Муза за это время значительно обновилась, Edge Animate в связи с этим всё меньше пригодна к работе. На смену пришел переименованный флэш  - Adobe Animate CC. Но эффекты прокрутки к сожалению, пока не поддерживаются

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

Это все не отрицает возможности решения поставленной задачи такими путями...
Но тем не менее справка вами прописанная достаточно полезна.

Share this post


Link to post
  • 0
В 12.09.2016 в 16:55, Генадий Арамов сказал:

Всем привет. Нашел тему, о том как запускать гиф анимацию при наведении курсора. А не подскажите как сделать так, что бы анимация начала проигрываться при прокрутке? Вариант залить прямоугольник на весь экран сначала статичной картинкой, а на вторую фазу гифкой не катит, так как есть вероятность того, что посетитель курсором не попадет на объект.

Проверьте условие по которому сработает ваш скрипт например Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке

Будет при скроле более 100 появляться нужное вам

Простой скрипт и не надо городить ужасы

Share this post


Link to post
  • 0
6 минут назад, Greymouse2 сказал:

Проверьте условие по которому сработает ваш скрипт например Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке

Вы точно прочитали то что хочет ТС?  :) Если да, то было бы не лишним описать всё более подробно - многим будет интересно

Share this post


Link to post
  • 0
В 15.09.2016 в 11:59, Павел Хомерики сказал:

Вы точно прочитали то что хочет ТС?  :) Если да, то было бы не лишним описать всё более подробно - многим будет интересно

 "А не подскажите как сделать так, что бы анимация начала проигрываться при прокрутке?" прочитал.

при прокрутке на 100px заменить картинку jpg на анимированый gif.. как-то так

код при условии что картинка - заливка фона DIV,a(замена стиля background)

Цитата

$(window).scroll(function () {

if ($(this).scrollTop() > 100) {

$('#ID').css('background','image.gif');

} else {

$('#ID').css('background','image.jpg');

} });

код при условии что картинка - это картинка(замена атрибута SRC)

Цитата

$(window).scroll(function () {

if ($(this).scrollTop() > 100) {

$('#ID').attr("src",'image.gif');

} else {

$('#ID').attr("src",'image.jpg');

} });

ежу понятно что #ID у каждого свой. подставляем правильное значение

Share this post


Link to post
Sign in to follow this  

×
×
  • Create New...