Материал
По возможности мы всех призываем указывать источник материала если вы нашли у нас что-то дейстительно интересное и новое для себя.

Понравился материал? Поделись с ним в социальных сетях !


Загрузить материал (1.33 Mb)
Источник
Ссылки

Используйте быстрые ссылки для вставки в сообщениях форума.

Ccылка
BB-Code
HTML-код

Clipped SVG Slider для uCoz

Дата и время публикации : 01.Апр.17 в 06:55 | Раздел : Прочее для uCoz


Параметр Значение
Дата публик. 01.Апр.17, Суббота, 06:55
Размер файла 1.33 Mb
Адапт. дизайн
Обновления Не производились
Просмотрен 142
Загружен 10

Сегодня у нас речь пойдет о простом слайдере с изображениями предварительного просмотра и анимации с использованием свойств SVG. Данный скрипт наиболее хорошо будет смотреться в формате фото галереи или портфолио. Приятная анимация и изящное исполнение кода украсит абсолютно любой проект. Плюс данного слайдера в том, что можно использовать не ограниченно количество картинок и это ни как не повлияет на красоту. Картинки рекомендует использовать в виде квадратов, например: 400x400, 500x500, 600x600, 700x700. Самое главное, слайдер адаптивен под все мобильные устройства и поддерживается во всех браузерах. 



Установка слайдера: 

1. Для начала скачиваете архив с нашего сайта и папку clipped загружаете в свой файловый менеджер. 

2. Далее, вверхню часть сайта между <head> и </head>

Код
<link rel="stylesheet" href="/clipped/css/clipped.css">

 

3. Данный код вставляете в то место, где хотите видеть слайдер:

Код
<div class="cd-svg-clipped-slider" data-selected="M800,0c-60,0-348.815,0-400,0C348.816,0,43.667,0,0,0c0,40.667,0,348.815,0,400c0,51.185,0,335,0,400 
   c75,0,348.815,0,399.999,0C451.184,800,734,800,800,800c0-67,0-348.815,0-399.999C800,348.816,800,62,800,0z" data-lateral="M654.559,145.441C584.264,75.148,492.133,40,400,40S215.736,75.148,145.441,145.441 
   C75.148,215.736,40,307.867,40,400s35.148,184.264,105.441,254.559C215.736,724.852,307.867,760,399.999,760 
   c92.133,0,184.265-35.148,254.559-105.441C724.852,584.264,760,492.133,760,400.001C760,307.869,724.852,215.736,654.559,145.441z"> 
 <div class="gallery-wrapper"> 
 <ul class="gallery"> 
 <li class="left"> 
 <div class="svg-wrapper"> 
 <svg viewBox="0 0 800 800"> 
 <defs> 
 <clipPath id="cd-image-1"> 
 <path id="cd-morphing-path-1" d="M654.559,145.441C584.264,75.148,492.133,40,400,40S215.736,75.148,145.441,145.441 C75.148,215.736,40,307.867,40,400s35.148,184.264,105.441,254.559C215.736,724.852,307.867,760,399.999,760 c92.133,0,184.265-35.148,254.559-105.441C724.852,584.264,760,492.133,760,400.001C760,307.869,724.852,215.736,654.559,145.441z"/> 
 </clipPath> 
 </defs> 
 <image height='800px' width="800px" clip-path="url(#cd-image-1)" xlink:href="/clipped/img/2.jpg"></image> 
 <use xlink:href="#cd-morphing-path-1" class="cover-layer" /> 
 </svg> 
 </div> 
 </li> 
 <li class="selected"> 
 <div class="svg-wrapper"> 
 <svg viewBox="0 0 800 800"> 
 <defs> 
 <clipPath id="cd-image-2"> 
 <path id="cd-morphing-path-2" d="M800,0c-60,0-348.815,0-400,0C348.816,0,43.667,0,0,0c0,40.667,0,348.815,0,400c0,51.185,0,335,0,400 c75,0,348.815,0,399.999,0C451.184,800,734,800,800,800c0-67,0-348.815,0-399.999C800,348.816,800,62,800,0z"/> 
 </clipPath> 
 </defs> 
 <image height='800px' width="800px" clip-path="url(#cd-image-2)" xlink:href="/clipped/img/2.jpg"></image> 
 <use xlink:href="#cd-morphing-path-2" class="cover-layer" /> 
 </svg> 
 </div> 
 </li> 
 <li class="right"> 
 <div class="svg-wrapper"> 
 <svg viewBox="0 0 800 800"> 
 <title>Animated SVG</title> 
 <defs> 
 <clipPath id="cd-image-3"> 
 <path id="cd-morphing-path-3" d="M654.559,145.441C584.264,75.148,492.133,40,400,40S215.736,75.148,145.441,145.441 C75.148,215.736,40,307.867,40,400s35.148,184.264,105.441,254.559C215.736,724.852,307.867,760,399.999,760 c92.133,0,184.265-35.148,254.559-105.441C724.852,584.264,760,492.133,760,400.001C760,307.869,724.852,215.736,654.559,145.441z"/> 
 </clipPath> 
 </defs> 
 <image height='800px' width="800px" clip-path="url(#cd-image-3)" xlink:href="/clipped/img/3.jpg"></image> 
 <use xlink:href="#cd-morphing-path-3" class="cover-layer" /> 
 </svg> 
 </div> 
 </li> 
 <li> 
 <div class="svg-wrapper"> 
 <svg viewBox="0 0 800 800"> 
 <defs> 
 <clipPath id="cd-image-4"> 
 <path id="cd-morphing-path-4" d="M654.559,145.441C584.264,75.148,492.133,40,400,40S215.736,75.148,145.441,145.441 C75.148,215.736,40,307.867,40,400s35.148,184.264,105.441,254.559C215.736,724.852,307.867,760,399.999,760 c92.133,0,184.265-35.148,254.559-105.441C724.852,584.264,760,492.133,760,400.001C760,307.869,724.852,215.736,654.559,145.441z"/> 
 </clipPath> 
 </defs> 
 <image height='800px' width="800px" clip-path="url(#cd-image-4)" xlink:href="/clipped/img/4.jpg"></image> 
 <use xlink:href="#cd-morphing-path-4" class="cover-layer" /> 
 </svg> 
 </div> 
 </li> 
 <li> 
 <div class="svg-wrapper"> 
 <svg viewBox="0 0 800 800"> 
 <defs> 
 <clipPath id="cd-image-5"> 
 <path id="cd-morphing-path-5" d="M654.559,145.441C584.264,75.148,492.133,40,400,40S215.736,75.148,145.441,145.441 C75.148,215.736,40,307.867,40,400s35.148,184.264,105.441,254.559C215.736,724.852,307.867,760,399.999,760 c92.133,0,184.265-35.148,254.559-105.441C724.852,584.264,760,492.133,760,400.001C760,307.869,724.852,215.736,654.559,145.441z"/> 
 </clipPath> 
 </defs> 
 <image height='800px' width="800px" clip-path="url(#cd-image-5)" xlink:href="/clipped/img/5.jpg"></image> 
 <use xlink:href="#cd-morphing-path-5" class="cover-layer" /> 
 </svg> 
 </div> 
 </li> 
 </ul> 
 <nav> 
 <ul class="navigation"> 
 <a href="javascript://" class="prev">Вперед</a> 
 <a href="javascript://" class="next">Назад</a> 
 </ul> 
 </nav> 
 </div>

 

4. Ну и под конец подключаем js, естественно в нижнюю часть сайта перед закрывающим атрибутом </body>:

Код
<script src="/clipped/js/snap.svg-min.js"></script> 
 <script src="/clipped/js/main.js"></script>

На данный момент никто не оставил комментариев.

Оставить комментарий :


Требуется войти в свой аккаунт.

Для того чтобы оставить комментарий вам не обходимо войти в свой аккаунт или зарегистрироваться.

Вход Регистрация

Смотрите также :

Future Imperfect для uCoz

Future Imperfect - является уникальным, минималистичным дизайном и чистой темой, а по сути простой и функциональный шаблон для блога. Четко выражен...