Прелоадер с SVG анимацией

8 ноября 2015 Антон Кулешов 2026 0

Мы живём в эпоху, когда в интернете можно делать все: работать, отдыхать, играть, покупать и продавать, «готовить» еду, заниматься сексом и т.д.. Стандартный рабочий софт так же перекочевал онлайн. Практически любое приложение, будь то графический редактор, читалка-распознавала, просто удобный блокнот, давно обзавелись своей облачной версией. Ну что же, рядовому веб разработчику не гоже отставать от современных тенденций, и если вы решили обзавестись своим онлайн сервисом, то вам просто не обойтись без прелоадера.

Реклама

Скорость загрузки HTML страницы будет и останется самым важным моментом при создании веб-приложения. Очень часто бывает, что воспользовавшись каким-либо тяжелым веб-ресурсом, особенно если он связан с обработкой фото-видео, мы сталкиваемся с проблемой: закончил свой проект, кликнул сохранить, а ничего не происходит! На самом деле сервер во всю «пыхтит» над поставленной задачей, вот только ему надо дать немножко времени, а пользователя отвлечь от грустных мыслей красивой анимацией прелоадера.

Уделить внимание в этой статье я решил уже готовому решению, которое использует для свой работы SVG анимацию. А также имеет 13 готовых вариантов и, если понадобится, вы всегда сможете на базе их придумать что-нибудь более подходящие.

Как добавить прелоадер из примеров на странице демо, мы разберём на варианте «Растягивание». Тут важно учесть, что показ прелоудера осуществляется по клику на ссылку «Демонстрация». Первым делом подключаем необходимые стили и скрипты в шапке страницы:

<link href="css/component.css" type="text/css" rel="stylesheet" />
<script src="js/snap.svg-min.js"></script>

И перед закрывающимся элементом body:

<script src="js/classie.js"></script>
<script src="js/svgLoader.js"></script>
<script src="js/loader.js"></script>

Теперь переходим непосредственно к самой HTML разметке:

<div id="pagewrap" class="pagewrap">
	<div class="container show" id="page-1">
		<!--
			Сюда помещаем основной контент страницы,
			которая изначально показана
		-->
		<div class="column">
			<!--
				Кнопка для демострации и
				перехода на 2-ую страницу
			-->
			<p>
				<a class="pageload-link" href="#page-2">Демонстрация</a>
			</p>
		</div>
	</div>
	<div class="container" id="page-2">
		<!--
			Контент показываемый после клика
		-->
		<section>
			<!--
				Кнопка для возврата на первую
			-->
			<p><a class="pageload-link" href="#page-1">Назад</a></p>
		</section>
	</div>
	<div id="loader" class="pageload-overlay" data-opening="M20,15 50,30 50,30 30,30 Z;M0,0 80,0 50,30 20,45 Z;M0,0 80,0 60,45 0,60 Z;M0,0 80,0 80,60 0,60 Z" data-closing="M0,0 80,0 60,45 0,60 Z;M0,0 80,0 50,30 20,45 Z;M20,15 50,30 50,30 30,30 Z;M30,30 50,30 50,30 30,30 Z">
		<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="none">
			<path d="M30,30 50,30 50,30 30,30 Z"/>
		</svg>
	</div>
</div>

Вот и всё, но давайте рассмотрим вариант при старте страницы. Для этого нам потребуется подправить скрипт в файле loader.js. Разметку оставим прежней только уберем кнопки и блок с id=page-2, а из блока с id=page-1 удалим класс show (тогда по умолчанию страница будет спрятана).

(function(){

	var pageWrap = document.getElementById("pagewrap"),
	    page = pageWrap.querySelector("div.container"),
	    loader = new SVGLoader(document.getElementById("loader"), {speedIn: 100});

	function init(){

		window.onload = function(){

			loader.show();

			setTimeout(function(){

				loader.hide();
				classie.addClass(page, "show");
			}, 2000);
		};
	};
	init();
})();

Вот собственно и сам код, убрав лишние и воспользовавшись методам onload() у объекта window, реализовали отработку прелоадара при старте страницы.

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

И еще 30 CSS эффектов при наведении

5 ноября 2015 Антон Кулешов

Здравствуйте дорогие читатели! Наступило время пополнить коллекцию сайта ещё 30-тью красивыми CSS эффектами при наведении курсора на изображение. Данная тема поистине очень обширна и мы не устаем пополнять нашу библиотеку все новыми и новыми эффектами.

«Легкая упоротость» глитч эффект

1 апреля 2015 ti1schweiger

«А у тебя коленки сзади грязные!» - согласитесь, звучит неубедительно в реалиях сегодняшнего времени, тем более, когда реальное общение все больше заменяет виртуальное. Как же шутить на 1 апреля? – Да очень просто! Хотите разыграть пользователей своего ресурса? – Используйте глитч эффект. Кто еще не в теме, поясню, глитч эффект – это эффект сломанного монитора, который уже не раз умудрились уронить и у которого серьезно барахлят сведение и вертикальная синхронизация.

Глитч текста

14 июня 2016 Антон Кулешов

Как-то я уже писал статью по глитчу – как оказалось, тема очень востребована, поэтому я написал, ко всему, и свой собственный онлайн глитч генератор на JavaScript, который вы можете наблюдать во вкладке сервисов. В будущем, скорее всего я его переделаю и улучшу, а сегодня я решил добавить ещё один способ реализации глитч эффекта. Данный вариант я давно хотел отобразить у себя на сайте, так как в нем используются только HTML и CSS3.