Antikrists
|
|
|
FORUMA APSARGS
Foruma ieraksti: 606
UWM Reputācija:
|
uWEBMEISTARS ordeņi:
1. līmenis
2. līmenis
3. līmenis
Jaunākie apbalvojumi:
|
@Antikrists raksta .. :
Lejuplādē pielikuma saturu , saglabā attiecīgajas mapēs saturu .
Starp
Liec
Code <link rel="stylesheet" href="/clipped/css/clipped.css">
Css liec
Code @import url("/clipped/css/clipped.css");
Kur vēlies redzēt slaidradi
Code <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">Uz priekšu</a> <a href="javascript://" class="next">Atpakaļ</a> </ul> </nav> </div>
Pirms
Liec
Code <script src="/clipped/js/snap.svg-min.js"></script> <script src="/clipped/js/main.js"></script>
Vēlams izmantot kavadrāta tipa attēlus kā piemēram - 400x400, 500x500, 600x600, 700x700.
>>> DEMO <<<
. .
|
|
|
|