Jump to content
  • 0
Sign in to follow this  
psv.incom

Плавная прогрузка сайта при прокрутке

Question

psv.incom    9

Возможно ли сделать в Adobe Muse прокрутку с такими эффектами, как на этом сайте Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке. или на этом Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Share this post


Link to post

14 answers to this question

Recommended Posts

  • 0
mirongora    30

Возможно ли сделать в Adobe Muse прокрутку с такими эффектами, как на этом сайте Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке. или на этом Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Да, muse отлично с этим справится! для этого откройте вкладку "эффекты прокрутки", если она у вас закрыта - выберите ОКНО и поставьте галочку на эффекты прокрутки. Ну а дальше только методом подбора нужных значений можно добиться правильного эффекта!

Share this post


Link to post

Новая статья

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

Да, muse отлично с этим справится! для этого откройте вкладку "эффекты прокрутки", если она у вас закрыта - выберите ОКНО и поставьте галочку на эффекты прокрутки. Ну а дальше только методом подбора нужных значений можно добиться правильного эффекта!

Нашёл. Спасибо! Пойду разбираться Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке./default_smile.png" alt=":)">

Share this post


Link to post
  • 0
Vektorrr    2

Инструментами Muse можно сделать лишь слегка похожий эффект. Добиться подобного возможно лишь подключением внешних Java script

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

Share this post


Link to post
  • 0

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

Ок. Вот инструкция.

Принцип заключается в том, что в <head> нужно добавить стиль, который изначально скрывает элемент на странице. Далее, добавляем класс, который будет описывать анимацию (CSS3-анимация). Затем нужно подключить скрипт, который при прокрутке будет делать видимым элемент, который ранее скрыли в <head> и запускать анимацию.

Теперь подробнее.

В исходном коде страницы смотрим ID элемента, который нужно анимировать при прокрутке (это может быть любое содержимое div - картинка, текст, форма).

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

Затем, в <head> страницы добавляем стиль, который изначально скрывает элемент на странице. Если элементов несколько, пишем их ID через запятую:

o3UGr9X.png

Код вот такой:

<style>
#u810, #u809-8{
    visibility: hidden;
}

Далее, добавляем туда же, в <head> классы, отвечающие за анимацию:

.pullUp{
	animation-name: pullUp;
	-webkit-animation-name: pullUp;	

	animation-duration: 1.1s;	
	-webkit-animation-duration: 1.1s;

	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease-out;	

	transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%; 
	visibility: visible !important;
}

@keyframes pullUp {
	0% {
		transform: scaleY(0.1);
	}
	40% {
		transform: scaleY(1.02);
	}
	60% {
		transform: scaleY(0.98);
	}
	80% {
		transform: scaleY(1.01);
	}
	100% {
		transform: scaleY(0.98);
	}				
	80% {
		transform: scaleY(1.01);
	}
	100% {
		transform: scaleY(1);
	}							
}

@-webkit-keyframes pullUp {
	0% {
		-webkit-transform: scaleY(0.1);
	}
	40% {
		-webkit-transform: scaleY(1.02);
	}
	60% {
		-webkit-transform: scaleY(0.98);
	}
	80% {
		-webkit-transform: scaleY(1.01);
	}
	100% {
		-webkit-transform: scaleY(0.98);
	}				
	80% {
		-webkit-transform: scaleY(1.01);
	}
	100% {
		-webkit-transform: scaleY(1);
	}		
}
</style>

Данная css3-анимация создаст эффект плавного появления элемента снизу и легкой "резиновостью". Вы можете в сети найти любые css-3 эффекты и вставить свой код вместо этого.

Следующим шагом нам нужно подключить скрипт, который сделает ранее скрытый элемент видимым и запустит анимацию.

Код такой:

<script>
	$(window).scroll(function() {
		$('#u810, #u809-8').each(function(){
		var imagePos = $(this).offset().top;

		var topOfWindow = $(window).scrollTop();
			if (imagePos < topOfWindow+400) {
				$(this).addClass("pullUp");
			}
		});
	});
</script>

Где '#u810, #u809-8' меняете на ID своего элемента/элементов, а "pullUp" на класс своей анимации (если хотите применить этот же эффект, то "pullUp" просто оставьте) - скрипт присваивает новый класс анимации для вашего элемента. В topOfWindow+400 можно заменить значение на свое (это значение точки запуска от верхней линии браузера, в пикселях, т.е. можно поставить +350 и т.д.).

Затем, отредактированный код скрипта нам нужно подключить после загрузки на страницу библиотеки jQuery, а, т.к. она у нас в Muse подключается внизу страницы, то подключить скрипт туда поможет виджет Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Добавляете виджет в Muse и вставляете код скрипта в специальное поле виджета:

imrAcpf.png

Готово!

В исходном коде страницы подключенный скрипт будет выглядеть так:

8l7rDzz.png

  • Мне нравится 1

Share this post


Link to post
  • 0

Alpabuz твоя инструкция шикарная. Может быть люди когда нибудь поймут что нужно упрощать разработку и сайты, а не усложнять все. 

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке./default_biggrin.png" alt=":D"> Да-да. Главное понимать, как сделать так, чтобы сайт продавал. Остальное все - второстепенно.

Но Muse развивается! Может быть, вскоре, появятся такие кнопочки, как "хочу так" или "хочу больше заказов".

Share this post


Link to post
  • 0
modesty    0
В 23.05.2014, 16:10:16, Александр Бузмаков сказал:

Ну вот, теперь есть и виджет для подобных эффектов. Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке. и наслаждаемся))

уже недействительная ссылка... Можете перезалить?

Share this post


Link to post
  • 0
16 минуту назад, дымныйJon сказал:

перезалейте ссылку пожалуйста!!!

Посмотрите на дату публикации - этот виджет давно не актуален. И бесплатных аналогов уже нет, (разве что где то на закрытых, пиратских варезниках)

Share this post


Link to post
Sign in to follow this  

×
×
  • Create New...