Форма входа

    Бесплатный раздел

    Уважаемые друзья и пользователи сайта ART-UCOZ!

    Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!

    Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
    Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.

    Уважаемые пользователи!
    Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
    Подобные просьбы и вопросы - будут игнорироваться!

    Clipped SVG Slider (Diamond) для uCoz

    Дата добавления: 29.08.2016 - 14:22
    Добавил: Buger
    Количество просмотров: 2.0k
    Количество комментариев: 0
    Размер файла: 1.34 Mb
    Рейтинг материала: 0.0 / 0
    Clipped SVG Slider (Diamond) для uCoz
    рейтинг 0.0
    /
    голосов 0
    Сегодня у нас речь пойдет о простой слайдере с изображениями предварительного просмотра и анимации с использованием свойств SVG. Данный скрипт наиболее хорошо будет смотреться в формате фото галереи или портфолио. Приятная анимация и изящное исполнение кода украсит абсолютно любой проект. Плюс данного слайдера в том, что можно использовать не ограниченно количество картинок и это ни как не повлияет на красоту. Картинки рекомендует использовать в виде квадратов, например: 400x400, 500x500, 600x600, 700x700. Самое главное, слайдер адаптивен под все мобильные устройства и поддерживаеться во всех браузерах.

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

    Далее, в верхнюю часть сайта между <head> и </head>:
    Код
    <link rel="stylesheet" href="/clipped/css/clipped.css">

    или в центральный css в самый верх:
    Код
    @import url("/clipped/css/clipped.css");

    подключаем стили слайдера.

    Данный код вставляете в то место, где хотите видеть слайдер:
    Код
    <div class="cd-svg-clipped-slider" data-selected="M780,0H20C8.954,0,0,8.954,0,20v760c0,11.046,8.954,20,20,20h760c11.046,0,20-8.954,20-20V20
    C800,8.954,791.046,0,780,0z" data-lateral="M795.796,389.851L410.149,4.204c-5.605-5.605-14.692-5.605-20.297,0L4.204,389.851
    c-5.605,5.605-5.605,14.692,0,20.297l385.648,385.648c5.605,5.605,14.692,5.605,20.297,0l385.648-385.648
    C801.401,404.544,801.401,395.456,795.796,389.851z">
    <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="M795.796,389.851L410.149,4.204c-5.605-5.605-14.692-5.605-20.297,0L4.204,389.851 c-5.605,5.605-5.605,14.692,0,20.297l385.648,385.648c5.605,5.605,14.692,5.605,20.297,0l385.648-385.648 C801.401,404.544,801.401,395.456,795.796,389.851z"/>
    </clipPath>
    </defs>
    <image height='800px' width="800px" clip-path="url(#cd-image-1)" xlink:href="/clipped/img/1.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="M780,0H20C8.954,0,0,8.954,0,20v760c0,11.046,8.954,20,20,20h760c11.046,0,20-8.954,20-20V20 C800,8.954,791.046,0,780,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">
    <defs>
    <clipPath id="cd-image-3">
    <path id="cd-morphing-path-3" d="M795.796,389.851L410.149,4.204c-5.605-5.605-14.692-5.605-20.297,0L4.204,389.851 c-5.605,5.605-5.605,14.692,0,20.297l385.648,385.648c5.605,5.605,14.692,5.605,20.297,0l385.648-385.648 C801.401,404.544,801.401,395.456,795.796,389.851z"/>
    </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">
    <title>Animated SVG</title>
    <defs>
    <clipPath id="cd-image-4">
    <path id="cd-morphing-path-4" d="M795.796,389.851L410.149,4.204c-5.605-5.605-14.692-5.605-20.297,0L4.204,389.851 c-5.605,5.605-5.605,14.692,0,20.297l385.648,385.648c5.605,5.605,14.692,5.605,20.297,0l385.648-385.648 C801.401,404.544,801.401,395.456,795.796,389.851z"/>
    </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="M795.796,389.851L410.149,4.204c-5.605-5.605-14.692-5.605-20.297,0L4.204,389.851 c-5.605,5.605-5.605,14.692,0,20.297l385.648,385.648c5.605,5.605,14.692,5.605,20.297,0l385.648-385.648 C801.401,404.544,801.401,395.456,795.796,389.851z"/>
    </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>

    Ну и под конец подключаем js, естественно в нижнюю часть сайта перед закрывающим атрибутом </body>:
    Код
    <script src="/clipped/js/snap.svg-min.js"></script>
    <script src="/clipped/js/main.js"></script>


    Источник: http://webmaster-ucoz.ru
    Добавлять комментарии могут только зарегистрированные пользователи.


    Поделись с друзьями: