-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
150 lines (125 loc) · 5.95 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TweenMax</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
</head>
<body>
<div class="slide active">
<div class="card">
<div class="card-img" id="img01"></div>
<div class="card-content">
<p class="card-theme">El arte en el amor.</p>
<h2 class="card-header">Mira los proyectos mas innovadores aqui</h2>
<p class="card-para">Sin embargo, también pueden optar por desafiar las convenciones y crear composiciones más abstractas y emocionales que transmitan una sensación de caos o tensión. En última instancia, la composición del arte es una herramienta poderosa para transmitir ideas, emociones y perspectivas únicas del mundo que nos rodea.</p>
<a class="card-link">Read</a>
</div>
</div>
</div>
<div class="slide">
<div class="card">
<div class="card-img" id="img02"></div>
<div class="card-content">
<p class="card-theme">Arte y Composicion</p>
<h2 class="card-header">Mira los proyectos mas innovadores aqui</h2>
<p class="card-para">El arte es una expresión creativa que se compone de diferentes elementos, como la forma, el color, la línea y la textura. Cada uno de estos elementos es esencial para la composición de una obra de arte, y la forma en que se combinan y organizan puede determinar el impacto visual y emocional de la pieza.</p>
<a class="card-link">Read</a>
</div>
</div>
</div>
<div class="slide">
<div class="card">
<div class="card-img" id="img03"></div>
<div class="card-content">
<p class="card-theme">Diseño y Arte</p>
<h2 class="card-header">Mira los proyectos mas innovadores aqui</h2>
<p class="card-para">La composición del arte se refiere a cómo se organizan y combinan estos elementos para crear una imagen o un diseño armonioso y equilibrado. Los artistas pueden utilizar técnicas como la regla de los tercios, la simetría y el contraste para lograr una composición efectiva y atractiva.</p>
<a class="card-link">Read</a>
</div>
</div>
</div>
<div class="prevnext">
<button class="pn-btn" id="prev"></button>
<button class="pn-btn" id="next"></button>
</div>
<script type="text/javascript">
var $activeSlide = $('.active'),
$homeSlide = $(".slide"),
$slideNavPrev = $("#prev"),
$slideNavNext = $("#next");
function init() {
TweenMax.set($homeSlide.not($activeSlide), { autoAlpha: 0 });
TweenMax.set($slideNavPrev, { autoAlpha: 0.2 });
}
init();
function goToNextSlide(slideOut, slideIn, slideInAll) {
var t1 = new TimelineLite(),
slideOutContent = slideOut.find('.card-content'),
slideInContent = slideIn.find('.card-content'),
slideOutImg = slideOut.find('.card-img'),
slideInImg = slideIn.find('.card-img'),
index = slideIn.index(),
size = $homeSlide.length;
console.log(index);
if (slideIn.length !== 0) {
t1
.set(slideIn, { autoAlpha: 1, className: '+=active' })
.set(slideOut, { className: '-=active' })
.to(slideOutContent, 0.65, { y: "+=40px", ease: Power3.easeInOut }, 0)
.to(slideOutImg, 0.65, { backgroundPosition: 'bottom', ease: Power3.easeInOut }, 0)
.to(slideInAll, 1, { y: "-=100%", ease: Power3.easeInOut }, 0)
.fromTo(slideInContent, 0.65, { y: '-=40px' }, { y: 0, ease: Power3.easeInOut }, "-=0.7")
.fromTo(slideInImg, 0.65, { backgroundPosition: 'top' }, { backgroundPosition: 'bottom', ease: Power3.easeInOut }, '-=0.7')
}
TweenMax.set($slideNavPrev, { autoAlpha: 1 });
if (index === size - 1) {
TweenMax.to($slideNavNext, 0.3, { autoAlpha: 0.2, ease: Linear.easeNone });
}
};
$slideNavNext.click(function (e) {
e.preventDefault();
var slideOut = $('.slide.active'),
slideIn = $('.slide.active').next('.slide'),
slideInAll = $('.slide');
goToNextSlide(slideOut, slideIn, slideInAll);
});
function goToPrevSlide(slideOut, slideIn, slideInAll) {
var t1 = new TimelineLite(),
slideOutContent = slideOut.find('.card-content'),
slideInContent = slideIn.find('.card-content'),
slideOutImg = slideOut.find('.card-img'),
slideInImg = slideIn.find('.card-img'),
index = slideIn.index(),
size = $homeSlide.length;
if (slideIn.length !== 0) {
t1
.set(slideIn, { autoAlpha: 1, className: '+=active' })
.set(slideOut, { className: '-=active' })
.to(slideOutContent, 0.65, { y: "-=40px", ease: Power3.easeInOut }, 0)
.to(slideOutImg, 0.65, { backgroundPosition: 'top', ease: Power3.easeInOut }, 0)
.to(slideInAll, 1, { y: "+=100%", ease: Power3.easeInOut }, 0)
.fromTo(slideInContent, 0.65, { y: '+=40px' }, { y: 0, ease: Power3.easeInOut }, "-=0.7")
.fromTo(slideInImg, 0.65, { backgroundPosition: 'bottom' }, { backgroundPosition: 'top', ease: Power3.easeInOut }, '-=0.7')
}
TweenMax.set($slideNavPrev, { autoAlpha: 1 });
if (index === 0) {
TweenMax.to($slideNavPrev, 0.3, { autoAlpha: 0.2, ease: Linear.easeNone });
}
};
$slideNavPrev.click(function (e) {
e.preventDefault();
var slideOut = $('.slide.active'),
slideIn = $('.slide.active').prev('.slide'),
slideInAll = $('.slide');
goToPrevSlide(slideOut, slideIn, slideInAll);
});
</script>
</body>
</html>
</body>
</html>