Skip to content

Commit 895b3d7

Browse files
crnacuracrnacura
committed
Prettier
1 parent 679cadb commit 895b3d7

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

+3377
-2132
lines changed

‎css/base.css‎

Lines changed: 189 additions & 186 deletions
Large diffs are not rendered by default.

‎index.html‎

Lines changed: 122 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,127 @@
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
8+
name="description"
9+
content="Some ideas for image slideshow transitions."
10+
/>
11+
<meta
12+
name="keywords"
13+
content="slideshow, transition, image transition, image animation, gsap, modern"
14+
/>
15+
<meta name="author" content="Codrops" />
16+
<link rel="stylesheet" href="https://use.typekit.net/uoh2fuj.css" />
17+
<link rel="shortcut icon" href="favicon.ico" />
18+
<link rel="stylesheet" type="text/css" href="css/base.css" />
19+
<script>
20+
document.documentElement.className = 'js';
21+
var supportsCssVars = function () {
22+
var e,
23+
t = document.createElement('style');
24+
return (
25+
(t.innerHTML = 'root: { --tmp-var: bold; }'),
26+
document.head.appendChild(t),
27+
(e = !!(
28+
window.CSS &&
29+
window.CSS.supports &&
30+
window.CSS.supports('font-weight', 'var(--tmp-var)')
31+
)),
32+
t.parentNode.removeChild(t),
33+
e
34+
);
35+
};
36+
supportsCssVars() ||
37+
alert(
38+
'Please view this demo in a modern browser that supports CSS Variables.'
39+
);
40+
</script>
41+
<script src="//tympanus.net/codrops/adpacks/analytics.js"></script>
42+
</head>
343

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>
44+
<body class="demo-1 loading">
45+
<main>
46+
<div class="frame">
47+
<div class="frame__title">
48+
<h1 class="frame__title-main">
49+
Slideshow <strong>Animations</strong>
50+
</h1>
51+
</div>
52+
<a href="https://tympanus.net/codrops/?p=73708" class="frame__back"
53+
>Article</a
54+
>
55+
<a
56+
href="http://tympanus.net/Development/GridItemHoverEffect/"
57+
class="frame__prev"
58+
>Previous demo</a
59+
>
60+
<nav class="frame__demos">
61+
<span>Variations</span>
62+
<a href="index.html" class="frame__demo frame__demo--current">01</a>
63+
<a href="index2.html" class="frame__demo">02</a>
64+
<a href="index3.html" class="frame__demo">03</a>
65+
<a href="index4.html" class="frame__demo">04</a>
66+
<a href="index5.html" class="frame__demo">05</a>
67+
<a href="index6.html" class="frame__demo">06</a>
68+
<a href="index7.html" class="frame__demo">07</a>
69+
<a href="index8.html" class="frame__demo">08</a>
70+
<a href="index9.html" class="frame__demo">09</a>
71+
<a href="index10.html" class="frame__demo">10</a>
72+
<a href="index11.html" class="frame__demo">11</a>
73+
<a href="index12.html" class="frame__demo">12</a>
74+
<a href="index13.html" class="frame__demo">13</a>
75+
<a href="index14.html" class="frame__demo">14</a>
76+
<a href="index15.html" class="frame__demo">15</a>
77+
<a href="index16.html" class="frame__demo">16</a>
78+
</nav>
79+
<nav class="slides-nav">
80+
<button class="slides-nav__item slides-nav__item--prev">
81+
&larr;
82+
</button>
83+
<button class="slides-nav__item slides-nav__item--next">
84+
&rarr;
85+
</button>
86+
</nav>
5687
</div>
57-
<div class="slide">
58-
<div class="slide__img" style="background-image:url(img/3.jpg)"></div>
88+
<div class="slides">
89+
<div class="slide">
90+
<div
91+
class="slide__img"
92+
style="background-image: url(img/1.jpg)"
93+
></div>
94+
</div>
95+
<div class="slide">
96+
<div
97+
class="slide__img"
98+
style="background-image: url(img/2.jpg)"
99+
></div>
100+
</div>
101+
<div class="slide">
102+
<div
103+
class="slide__img"
104+
style="background-image: url(img/3.jpg)"
105+
></div>
106+
</div>
107+
<div class="slide">
108+
<div
109+
class="slide__img"
110+
style="background-image: url(img/4.jpg)"
111+
></div>
112+
</div>
113+
<div class="slide">
114+
<div
115+
class="slide__img"
116+
style="background-image: url(img/5.jpg)"
117+
></div>
118+
</div>
59119
</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>
120+
</main>
121+
<script src="https://tympanus.net/codrops/adpacks/cda_sponsor.js"></script>
122+
<script src="js/imagesloaded.pkgd.min.js"></script>
123+
<script src="js/gsap.min.js"></script>
124+
<script src="js/Observer.min.js"></script>
125+
<script type="module" src="js/demo1/index.js"></script>
126+
</body>
127+
</html>

‎index10.html‎

Lines changed: 122 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,127 @@
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
8+
name="description"
9+
content="Some ideas for image slideshow transitions."
10+
/>
11+
<meta
12+
name="keywords"
13+
content="slideshow, transition, image transition, image animation, gsap, modern"
14+
/>
15+
<meta name="author" content="Codrops" />
16+
<link rel="stylesheet" href="https://use.typekit.net/uoh2fuj.css" />
17+
<link rel="shortcut icon" href="favicon.ico" />
18+
<link rel="stylesheet" type="text/css" href="css/base.css" />
19+
<script>
20+
document.documentElement.className = 'js';
21+
var supportsCssVars = function () {
22+
var e,
23+
t = document.createElement('style');
24+
return (
25+
(t.innerHTML = 'root: { --tmp-var: bold; }'),
26+
document.head.appendChild(t),
27+
(e = !!(
28+
window.CSS &&
29+
window.CSS.supports &&
30+
window.CSS.supports('font-weight', 'var(--tmp-var)')
31+
)),
32+
t.parentNode.removeChild(t),
33+
e
34+
);
35+
};
36+
supportsCssVars() ||
37+
alert(
38+
'Please view this demo in a modern browser that supports CSS Variables.'
39+
);
40+
</script>
41+
<script src="//tympanus.net/codrops/adpacks/analytics.js"></script>
42+
</head>
343

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>
44+
<body class="demo-10 loading">
45+
<main>
46+
<div class="frame">
47+
<div class="frame__title">
48+
<h1 class="frame__title-main">
49+
Slideshow <strong>Animations</strong>
50+
</h1>
51+
</div>
52+
<a href="https://tympanus.net/codrops/?p=73708" class="frame__back"
53+
>Article</a
54+
>
55+
<a
56+
href="http://tympanus.net/Development/GridItemHoverEffect/"
57+
class="frame__prev"
58+
>Previous demo</a
59+
>
60+
<nav class="frame__demos">
61+
<span>Variations</span>
62+
<a href="index.html" class="frame__demo">01</a>
63+
<a href="index2.html" class="frame__demo">02</a>
64+
<a href="index3.html" class="frame__demo">03</a>
65+
<a href="index4.html" class="frame__demo">04</a>
66+
<a href="index5.html" class="frame__demo">05</a>
67+
<a href="index6.html" class="frame__demo">06</a>
68+
<a href="index7.html" class="frame__demo">07</a>
69+
<a href="index8.html" class="frame__demo">08</a>
70+
<a href="index9.html" class="frame__demo">09</a>
71+
<a href="index10.html" class="frame__demo frame__demo--current">10</a>
72+
<a href="index11.html" class="frame__demo">11</a>
73+
<a href="index12.html" class="frame__demo">12</a>
74+
<a href="index13.html" class="frame__demo">13</a>
75+
<a href="index14.html" class="frame__demo">14</a>
76+
<a href="index15.html" class="frame__demo">15</a>
77+
<a href="index16.html" class="frame__demo">16</a>
78+
</nav>
79+
<nav class="slides-nav">
80+
<button class="slides-nav__item slides-nav__item--prev">
81+
&larr;
82+
</button>
83+
<button class="slides-nav__item slides-nav__item--next">
84+
&rarr;
85+
</button>
86+
</nav>
5687
</div>
57-
<div class="slide">
58-
<div class="slide__img" style="background-image:url(img/8.jpg)"></div>
88+
<div class="slides">
89+
<div class="slide">
90+
<div
91+
class="slide__img"
92+
style="background-image: url(img/10.jpg)"
93+
></div>
94+
</div>
95+
<div class="slide">
96+
<div
97+
class="slide__img"
98+
style="background-image: url(img/9.jpg)"
99+
></div>
100+
</div>
101+
<div class="slide">
102+
<div
103+
class="slide__img"
104+
style="background-image: url(img/8.jpg)"
105+
></div>
106+
</div>
107+
<div class="slide">
108+
<div
109+
class="slide__img"
110+
style="background-image: url(img/7.jpg)"
111+
></div>
112+
</div>
113+
<div class="slide">
114+
<div
115+
class="slide__img"
116+
style="background-image: url(img/6.jpg)"
117+
></div>
118+
</div>
59119
</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>
120+
</main>
121+
<script src="https://tympanus.net/codrops/adpacks/cda_sponsor.js"></script>
122+
<script src="js/imagesloaded.pkgd.min.js"></script>
123+
<script src="js/gsap.min.js"></script>
124+
<script src="js/Observer.min.js"></script>
125+
<script type="module" src="js/demo10/index.js"></script>
126+
</body>
127+
</html>

0 commit comments

Comments
 (0)