Приветствуем Вас на сайте!
Авторизировавшись на сайте Вы получаете возможность заказывать эксклюзивные вещи для Вашего сайта, скачивать новинки, общаться с друзьями.
Если у Вас ещё нет аккаунта на BEST STUDIO, вы можете создать его потратив не более 10-ти секунд используя форму справа с заголовком "Вход на сайт"
Если у Вас ещё нет аккаунта на BEST STUDIO, вы можете создать его потратив не более 10-ти секунд используя форму справа с заголовком "Вход на сайт"
Вход на сайт
Логин:
Пароль:
Вход
Войти по Логину и Паролю
О нас
Cтудия скриптов и дизайна BEST STUDIO, как студия перспективных веб-разработок, была основана 1 июля 2009 г. Уже более 17000 зарегистрированых пользователей! С момента ее создания мы четко придерживаемся принципа: «Быстро, качествено, дорого».
Заказывая работу для вашего сайта у нас, вы экономите время...
Заказывая работу для вашего сайта у нас, вы экономите время...
Стремитесь к лучшему - в Best Studio!
Войти | Зарегистрироваться
Настройки
Перезагрузите страницу
- Главная
- Все для uCoz
- Скрипты для uCoz
- Анимированный полноэкранный слайдер SVG
Адаптивный, или если хотите, отзывчивый веб-дизайн сейчас не просто очередной дизайнерский тренд, это уже некий стандарт разработки сайтов, обеспечивающий универсальность веб-сайтов, гармоничное визуальное восприятие на экранах различных пользовательских устройств. Предстовляю Вашему вниманию работу сайта codyhouse.co "Animated SVG Hero Slider" — Полноэкранный слайдер с анимированными элементами SVG, используемых в качестве переходных эффектов. Установка:
Скачиваете архив с нашего сайта и все файлы из папки slajder_svg загружаете в свой ФМ
Код полноэкранного слайдера:
Код
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Анимированный полноэкранный слайдер SVG</title>
<link rel="stylesheet" href="/slajder_svg/style.css">
<link rel="stylesheet" href="/slajder_svg/reset.css">
<script src="/slajder_svg/modernizr.js"></script>
</head>
<body>
<section class="cd-slider-wrapper">
<ul class="cd-slider">
<li class="visible">
<div>
<h2>Все для Web-мастера в системе uCoz</h2>
<p>Бесплатные скрипты, шаблоны, PHP-скрипты, иконки, уроки, программы, украшения, генераторы и многое, многое другое</p>
<a href="http://webmaster-ucoz.ru/" class="cd-btn">Посетить сайт</a>
</div>
</li>
<li>
<div>
<h2>Yraaa.ru</h2>
<p>Интересные решения для uCoz</p>
<a href="http://yraaa.ru/" class="cd-btn">Посетить сайт</a>
</div>
</li>
<li>
<div>
<h2>InternetEmpire.RU</h2>
<p>На сайте Вы найдете шаблоны и скрипт для uCoz на любую тематику и многое другое!</p>
<a href="http://internetempire.ru/" class="cd-btn">Посетить сайт</a>
</div>
</li>
<li>
<div>
<h2>uGarts.PRO</h2>
<p>Это студия веб-разработок для uCoz</p>
<a href="http://ugarts.pro/" class="cd-btn">Посетить сайт</a>
</div>
</li>
</ul>
<ol class="cd-slider-navigation">
<li class="selected"><a href="#webmaster"><em>WebMaster-uCoz.RU</em></a></li>
<li><a href="#yraaa"><em>YRAAA.RU</em></a></li>
<li><a href="#InternetEmpire"><em>InternetEmpire.RU</em></a></li>
<li><a href="#uGarts"><em>uGarts.PRO</em></a></li>
</ol>
<div class="cd-svg-cover" data-step1="M1402,800h-2V0.6c0-0.3,0-0.3,0-0.6h2v294V800z" data-step2="M1400,800H383L770.7,0.6c0.2-0.3,0.5-0.6,0.9-0.6H1400v294V800z" data-step3="M1400,800H0V0.6C0,0.4,0,0.3,0,0h1400v294V800z" data-step4="M615,800H0V0.6C0,0.4,0,0.3,0,0h615L393,312L615,800z" data-step5="M0,800h-2V0.6C-2,0.4-2,0.3-2,0h2v312V800z" data-step6="M-2,800h2L0,0.6C0,0.3,0,0.3,0,0l-2,0v294V800z" data-step7="M0,800h1017L629.3,0.6c-0.2-0.3-0.5-0.6-0.9-0.6L0,0l0,294L0,800z" data-step8="M0,800h1400V0.6c0-0.2,0-0.3,0-0.6L0,0l0,294L0,800z" data-step9="M785,800h615V0.6c0-0.2,0-0.3,0-0.6L785,0l222,312L785,800z" data-step10="M1400,800h2V0.6c0-0.2,0-0.3,0-0.6l-2,0v312V800z">
<svg height='100%' width="100%" preserveAspectRatio="none" viewBox="0 0 1400 800">
<desc>an animated layer to switch from one slide to the next one</desc>
<path id="cd-changing-path" d="M1402,800h-2V0.6c0-0.3,0-0.3,0-0.6h2v294V800z"/>
</svg>
</div>
<script src="/slajder_svg/jquery-2.1.4.js"></script>
<script src="/slajder_svg/snap.svg-min.js"></script>
<script src="/slajder_svg/main.js"></script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Анимированный полноэкранный слайдер SVG</title>
<link rel="stylesheet" href="/slajder_svg/style.css">
<link rel="stylesheet" href="/slajder_svg/reset.css">
<script src="/slajder_svg/modernizr.js"></script>
</head>
<body>
<section class="cd-slider-wrapper">
<ul class="cd-slider">
<li class="visible">
<div>
<h2>Все для Web-мастера в системе uCoz</h2>
<p>Бесплатные скрипты, шаблоны, PHP-скрипты, иконки, уроки, программы, украшения, генераторы и многое, многое другое</p>
<a href="http://webmaster-ucoz.ru/" class="cd-btn">Посетить сайт</a>
</div>
</li>
<li>
<div>
<h2>Yraaa.ru</h2>
<p>Интересные решения для uCoz</p>
<a href="http://yraaa.ru/" class="cd-btn">Посетить сайт</a>
</div>
</li>
<li>
<div>
<h2>InternetEmpire.RU</h2>
<p>На сайте Вы найдете шаблоны и скрипт для uCoz на любую тематику и многое другое!</p>
<a href="http://internetempire.ru/" class="cd-btn">Посетить сайт</a>
</div>
</li>
<li>
<div>
<h2>uGarts.PRO</h2>
<p>Это студия веб-разработок для uCoz</p>
<a href="http://ugarts.pro/" class="cd-btn">Посетить сайт</a>
</div>
</li>
</ul>
<ol class="cd-slider-navigation">
<li class="selected"><a href="#webmaster"><em>WebMaster-uCoz.RU</em></a></li>
<li><a href="#yraaa"><em>YRAAA.RU</em></a></li>
<li><a href="#InternetEmpire"><em>InternetEmpire.RU</em></a></li>
<li><a href="#uGarts"><em>uGarts.PRO</em></a></li>
</ol>
<div class="cd-svg-cover" data-step1="M1402,800h-2V0.6c0-0.3,0-0.3,0-0.6h2v294V800z" data-step2="M1400,800H383L770.7,0.6c0.2-0.3,0.5-0.6,0.9-0.6H1400v294V800z" data-step3="M1400,800H0V0.6C0,0.4,0,0.3,0,0h1400v294V800z" data-step4="M615,800H0V0.6C0,0.4,0,0.3,0,0h615L393,312L615,800z" data-step5="M0,800h-2V0.6C-2,0.4-2,0.3-2,0h2v312V800z" data-step6="M-2,800h2L0,0.6C0,0.3,0,0.3,0,0l-2,0v294V800z" data-step7="M0,800h1017L629.3,0.6c-0.2-0.3-0.5-0.6-0.9-0.6L0,0l0,294L0,800z" data-step8="M0,800h1400V0.6c0-0.2,0-0.3,0-0.6L0,0l0,294L0,800z" data-step9="M785,800h615V0.6c0-0.2,0-0.3,0-0.6L785,0l222,312L785,800z" data-step10="M1400,800h2V0.6c0-0.2,0-0.3,0-0.6l-2,0v312V800z">
<svg height='100%' width="100%" preserveAspectRatio="none" viewBox="0 0 1400 800">
<desc>an animated layer to switch from one slide to the next one</desc>
<path id="cd-changing-path" d="M1402,800h-2V0.6c0-0.3,0-0.3,0-0.6h2v294V800z"/>
</svg>
</div>
<script src="/slajder_svg/jquery-2.1.4.js"></script>
<script src="/slajder_svg/snap.svg-min.js"></script>
<script src="/slajder_svg/main.js"></script>
</body>
</html>
Имя файла:
Размер: 352.9 Kb
Добавил: Best_Studio
Дата добавления: 18.02.2016 в 20:49 по МСК
Категория: Скрипты для uCoz
Скачиваний: 256
Просмотров: 684
Комментариев: 0
Рейтинг:
Размер: 352.9 Kb
Добавил: Best_Studio
Дата добавления: 18.02.2016 в 20:49 по МСК
Категория: Скрипты для uCoz
Скачиваний: 256
Просмотров: 684
Комментариев: 0
Рейтинг: