Skip to content

Commit 679cadb

Browse files
crnacuracrnacura
committed
Formatting
1 parent 2cec758 commit 679cadb

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+3075
-3027
lines changed

‎index.html‎

Lines changed: 73 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,75 @@
11
<!DOCTYPE html>
22
<html lang="en" class="no-js">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1">
6-
<title>Slideshow Animations | Demo 1 | Codrops</title>
7-
<meta name="description" content="Some ideas for image slideshow transitions." />
8-
<meta name="keywords" content="slideshow, transition, image transition, image animation, gsap, modern" />
9-
<meta name="author" content="Codrops" />
10-
<link rel="stylesheet" href="https://use.typekit.net/uoh2fuj.css">
11-
<link rel="shortcut icon" href="favicon.ico">
12-
<link rel="stylesheet" type="text/css" href="css/base.css" />
13-
<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
14-
<script src="//tympanus.net/codrops/adpacks/analytics.js"></script>
15-
</head>
16-
<body class="demo-1 loading">
17-
<main>
18-
<div class="frame">
19-
<div class="frame__title">
20-
<h1 class="frame__title-main">Slideshow <strong>Animations</strong></h1>
21-
</div>
22-
<a href="https://tympanus.net/codrops/?p=73708" class="frame__back">Article</a>
23-
<a href="http://tympanus.net/Development/GridItemHoverEffect/" class="frame__prev">Previous demo</a>
24-
<nav class="frame__demos">
25-
<span>Variations</span>
26-
<a href="index.html" class="frame__demo frame__demo--current">01</a>
27-
<a href="index2.html" class="frame__demo">02</a>
28-
<a href="index3.html" class="frame__demo">03</a>
29-
<a href="index4.html" class="frame__demo">04</a>
30-
<a href="index5.html" class="frame__demo">05</a>
31-
<a href="index6.html" class="frame__demo">06</a>
32-
<a href="index7.html" class="frame__demo">07</a>
33-
<a href="index8.html" class="frame__demo">08</a>
34-
<a href="index9.html" class="frame__demo">09</a>
35-
<a href="index10.html" class="frame__demo">10</a>
36-
<a href="index11.html" class="frame__demo">11</a>
37-
<a href="index12.html" class="frame__demo">12</a>
38-
<a href="index13.html" class="frame__demo">13</a>
39-
<a href="index14.html" class="frame__demo">14</a>
40-
<a href="index15.html" class="frame__demo">15</a>
41-
<a href="index16.html" class="frame__demo">16</a>
42-
</nav>
43-
<nav class="slides-nav">
44-
<button class="slides-nav__item slides-nav__item--prev">&larr;</button>
45-
<button class="slides-nav__item slides-nav__item--next">&rarr;</button>
46-
</nav>
47-
</div>
48-
<div class="slides">
49-
<div class="slide">
50-
<div class="slide__img" style="background-image:url(img/1.jpg)"></div>
51-
</div>
52-
<div class="slide">
53-
<div class="slide__img" style="background-image:url(img/2.jpg)"></div>
54-
</div>
55-
<div class="slide">
56-
<div class="slide__img" style="background-image:url(img/3.jpg)"></div>
57-
</div>
58-
<div class="slide">
59-
<div class="slide__img" style="background-image:url(img/4.jpg)"></div>
60-
</div>
61-
<div class="slide">
62-
<div class="slide__img" style="background-image:url(img/5.jpg)"></div>
63-
</div>
64-
</div>
65-
</main>
66-
<script src="https://tympanus.net/codrops/adpacks/cda_sponsor.js"></script>
67-
<script src="js/imagesloaded.pkgd.min.js"></script>
68-
<script src="js/gsap.min.js"></script>
69-
<script src="js/Observer.min.js"></script>
70-
<script type="module" src="js/demo1/index.js"></script>
71-
</body>
72-
</html>
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>Slideshow Animations | Demo 1 | Codrops</title>
8+
<meta name="description" content="Some ideas for image slideshow transitions." />
9+
<meta name="keywords" content="slideshow, transition, image transition, image animation, gsap, modern" />
10+
<meta name="author" content="Codrops" />
11+
<link rel="stylesheet" href="https://use.typekit.net/uoh2fuj.css">
12+
<link rel="shortcut icon" href="favicon.ico">
13+
<link rel="stylesheet" type="text/css" href="css/base.css" />
14+
<script>document.documentElement.className = "js"; var supportsCssVars = function () { var e, t = document.createElement("style"); return t.innerHTML = "root: { --tmp-var: bold; }", document.head.appendChild(t), e = !!(window.CSS && window.CSS.supports && window.CSS.supports("font-weight", "var(--tmp-var)")), t.parentNode.removeChild(t), e }; supportsCssVars() || alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
15+
<script src="//tympanus.net/codrops/adpacks/analytics.js"></script>
16+
</head>
17+
18+
<body class="demo-1 loading">
19+
<main>
20+
<div class="frame">
21+
<div class="frame__title">
22+
<h1 class="frame__title-main">Slideshow <strong>Animations</strong></h1>
23+
</div>
24+
<a href="https://tympanus.net/codrops/?p=73708" class="frame__back">Article</a>
25+
<a href="http://tympanus.net/Development/GridItemHoverEffect/" class="frame__prev">Previous demo</a>
26+
<nav class="frame__demos">
27+
<span>Variations</span>
28+
<a href="index.html" class="frame__demo frame__demo--current">01</a>
29+
<a href="index2.html" class="frame__demo">02</a>
30+
<a href="index3.html" class="frame__demo">03</a>
31+
<a href="index4.html" class="frame__demo">04</a>
32+
<a href="index5.html" class="frame__demo">05</a>
33+
<a href="index6.html" class="frame__demo">06</a>
34+
<a href="index7.html" class="frame__demo">07</a>
35+
<a href="index8.html" class="frame__demo">08</a>
36+
<a href="index9.html" class="frame__demo">09</a>
37+
<a href="index10.html" class="frame__demo">10</a>
38+
<a href="index11.html" class="frame__demo">11</a>
39+
<a href="index12.html" class="frame__demo">12</a>
40+
<a href="index13.html" class="frame__demo">13</a>
41+
<a href="index14.html" class="frame__demo">14</a>
42+
<a href="index15.html" class="frame__demo">15</a>
43+
<a href="index16.html" class="frame__demo">16</a>
44+
</nav>
45+
<nav class="slides-nav">
46+
<button class="slides-nav__item slides-nav__item--prev">&larr;</button>
47+
<button class="slides-nav__item slides-nav__item--next">&rarr;</button>
48+
</nav>
49+
</div>
50+
<div class="slides">
51+
<div class="slide">
52+
<div class="slide__img" style="background-image:url(img/1.jpg)"></div>
53+
</div>
54+
<div class="slide">
55+
<div class="slide__img" style="background-image:url(img/2.jpg)"></div>
56+
</div>
57+
<div class="slide">
58+
<div class="slide__img" style="background-image:url(img/3.jpg)"></div>
59+
</div>
60+
<div class="slide">
61+
<div class="slide__img" style="background-image:url(img/4.jpg)"></div>
62+
</div>
63+
<div class="slide">
64+
<div class="slide__img" style="background-image:url(img/5.jpg)"></div>
65+
</div>
66+
</div>
67+
</main>
68+
<script src="https://tympanus.net/codrops/adpacks/cda_sponsor.js"></script>
69+
<script src="js/imagesloaded.pkgd.min.js"></script>
70+
<script src="js/gsap.min.js"></script>
71+
<script src="js/Observer.min.js"></script>
72+
<script type="module" src="js/demo1/index.js"></script>
73+
</body>
74+
75+
</html>

‎index10.html‎

Lines changed: 73 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,75 @@
11
<!DOCTYPE html>
22
<html lang="en" class="no-js">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1">
6-
<title>Slideshow Animations | Demo 10 | Codrops</title>
7-
<meta name="description" content="Some ideas for image slideshow transitions." />
8-
<meta name="keywords" content="slideshow, transition, image transition, image animation, gsap, modern" />
9-
<meta name="author" content="Codrops" />
10-
<link rel="stylesheet" href="https://use.typekit.net/uoh2fuj.css">
11-
<link rel="shortcut icon" href="favicon.ico">
12-
<link rel="stylesheet" type="text/css" href="css/base.css" />
13-
<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
14-
<script src="//tympanus.net/codrops/adpacks/analytics.js"></script>
15-
</head>
16-
<body class="demo-10 loading">
17-
<main>
18-
<div class="frame">
19-
<div class="frame__title">
20-
<h1 class="frame__title-main">Slideshow <strong>Animations</strong></h1>
21-
</div>
22-
<a href="https://tympanus.net/codrops/?p=73708" class="frame__back">Article</a>
23-
<a href="http://tympanus.net/Development/GridItemHoverEffect/" class="frame__prev">Previous demo</a>
24-
<nav class="frame__demos">
25-
<span>Variations</span>
26-
<a href="index.html" class="frame__demo">01</a>
27-
<a href="index2.html" class="frame__demo">02</a>
28-
<a href="index3.html" class="frame__demo">03</a>
29-
<a href="index4.html" class="frame__demo">04</a>
30-
<a href="index5.html" class="frame__demo">05</a>
31-
<a href="index6.html" class="frame__demo">06</a>
32-
<a href="index7.html" class="frame__demo">07</a>
33-
<a href="index8.html" class="frame__demo">08</a>
34-
<a href="index9.html" class="frame__demo">09</a>
35-
<a href="index10.html" class="frame__demo frame__demo--current">10</a>
36-
<a href="index11.html" class="frame__demo">11</a>
37-
<a href="index12.html" class="frame__demo">12</a>
38-
<a href="index13.html" class="frame__demo">13</a>
39-
<a href="index14.html" class="frame__demo">14</a>
40-
<a href="index15.html" class="frame__demo">15</a>
41-
<a href="index16.html" class="frame__demo">16</a>
42-
</nav>
43-
<nav class="slides-nav">
44-
<button class="slides-nav__item slides-nav__item--prev">&larr;</button>
45-
<button class="slides-nav__item slides-nav__item--next">&rarr;</button>
46-
</nav>
47-
</div>
48-
<div class="slides">
49-
<div class="slide">
50-
<div class="slide__img" style="background-image:url(img/10.jpg)"></div>
51-
</div>
52-
<div class="slide">
53-
<div class="slide__img" style="background-image:url(img/9.jpg)"></div>
54-
</div>
55-
<div class="slide">
56-
<div class="slide__img" style="background-image:url(img/8.jpg)"></div>
57-
</div>
58-
<div class="slide">
59-
<div class="slide__img" style="background-image:url(img/7.jpg)"></div>
60-
</div>
61-
<div class="slide">
62-
<div class="slide__img" style="background-image:url(img/6.jpg)"></div>
63-
</div>
64-
</div>
65-
</main>
66-
<script src="https://tympanus.net/codrops/adpacks/cda_sponsor.js"></script>
67-
<script src="js/imagesloaded.pkgd.min.js"></script>
68-
<script src="js/gsap.min.js"></script>
69-
<script src="js/Observer.min.js"></script>
70-
<script type="module" src="js/demo10/index.js"></script>
71-
</body>
72-
</html>
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>Slideshow Animations | Demo 10 | Codrops</title>
8+
<meta name="description" content="Some ideas for image slideshow transitions." />
9+
<meta name="keywords" content="slideshow, transition, image transition, image animation, gsap, modern" />
10+
<meta name="author" content="Codrops" />
11+
<link rel="stylesheet" href="https://use.typekit.net/uoh2fuj.css">
12+
<link rel="shortcut icon" href="favicon.ico">
13+
<link rel="stylesheet" type="text/css" href="css/base.css" />
14+
<script>document.documentElement.className = "js"; var supportsCssVars = function () { var e, t = document.createElement("style"); return t.innerHTML = "root: { --tmp-var: bold; }", document.head.appendChild(t), e = !!(window.CSS && window.CSS.supports && window.CSS.supports("font-weight", "var(--tmp-var)")), t.parentNode.removeChild(t), e }; supportsCssVars() || alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
15+
<script src="//tympanus.net/codrops/adpacks/analytics.js"></script>
16+
</head>
17+
18+
<body class="demo-10 loading">
19+
<main>
20+
<div class="frame">
21+
<div class="frame__title">
22+
<h1 class="frame__title-main">Slideshow <strong>Animations</strong></h1>
23+
</div>
24+
<a href="https://tympanus.net/codrops/?p=73708" class="frame__back">Article</a>
25+
<a href="http://tympanus.net/Development/GridItemHoverEffect/" class="frame__prev">Previous demo</a>
26+
<nav class="frame__demos">
27+
<span>Variations</span>
28+
<a href="index.html" class="frame__demo">01</a>
29+
<a href="index2.html" class="frame__demo">02</a>
30+
<a href="index3.html" class="frame__demo">03</a>
31+
<a href="index4.html" class="frame__demo">04</a>
32+
<a href="index5.html" class="frame__demo">05</a>
33+
<a href="index6.html" class="frame__demo">06</a>
34+
<a href="index7.html" class="frame__demo">07</a>
35+
<a href="index8.html" class="frame__demo">08</a>
36+
<a href="index9.html" class="frame__demo">09</a>
37+
<a href="index10.html" class="frame__demo frame__demo--current">10</a>
38+
<a href="index11.html" class="frame__demo">11</a>
39+
<a href="index12.html" class="frame__demo">12</a>
40+
<a href="index13.html" class="frame__demo">13</a>
41+
<a href="index14.html" class="frame__demo">14</a>
42+
<a href="index15.html" class="frame__demo">15</a>
43+
<a href="index16.html" class="frame__demo">16</a>
44+
</nav>
45+
<nav class="slides-nav">
46+
<button class="slides-nav__item slides-nav__item--prev">&larr;</button>
47+
<button class="slides-nav__item slides-nav__item--next">&rarr;</button>
48+
</nav>
49+
</div>
50+
<div class="slides">
51+
<div class="slide">
52+
<div class="slide__img" style="background-image:url(img/10.jpg)"></div>
53+
</div>
54+
<div class="slide">
55+
<div class="slide__img" style="background-image:url(img/9.jpg)"></div>
56+
</div>
57+
<div class="slide">
58+
<div class="slide__img" style="background-image:url(img/8.jpg)"></div>
59+
</div>
60+
<div class="slide">
61+
<div class="slide__img" style="background-image:url(img/7.jpg)"></div>
62+
</div>
63+
<div class="slide">
64+
<div class="slide__img" style="background-image:url(img/6.jpg)"></div>
65+
</div>
66+
</div>
67+
</main>
68+
<script src="https://tympanus.net/codrops/adpacks/cda_sponsor.js"></script>
69+
<script src="js/imagesloaded.pkgd.min.js"></script>
70+
<script src="js/gsap.min.js"></script>
71+
<script src="js/Observer.min.js"></script>
72+
<script type="module" src="js/demo10/index.js"></script>
73+
</body>
74+
75+
</html>

0 commit comments

Comments
 (0)