Add slideshow.
This commit is contained in:
Jakub Koralewski
parent
9fc7f1012a
commit
f03e1113ba
@ -58,10 +58,10 @@
|
||||
|
||||
<figcaption>
|
||||
<h3>Don't even consider running.</h3>
|
||||
<p>You can hide but you can't hide.</p>
|
||||
<p>You can run but you can't hide.</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure id="stocks">
|
||||
<figure id="stonks">
|
||||
<img alt="Stocks." src="../img/thumbnails/stonks.jpg">
|
||||
<div id="stocks">
|
||||
<div class="stock">
|
||||
@ -97,6 +97,62 @@
|
||||
</nav>
|
||||
<div id="click-catcher"></div>
|
||||
<main>
|
||||
<section id="slideshow">
|
||||
<div id="left" class="controls">
|
||||
<i class="fas fa-hand-point-left"></i>
|
||||
</div>
|
||||
<div id="slideshow-container">
|
||||
<div id="inner-slideshow">
|
||||
<figure style="--color: red">
|
||||
<img src="../img/thumbnails/stuffhappens.jpg"
|
||||
alt="Stuff happens">
|
||||
<figcaption>
|
||||
<header>
|
||||
Stuff happens.
|
||||
</header>
|
||||
<p>
|
||||
A honda has glued ducks to its front bumper. Deadly car accidents drop to 0.
|
||||
"If this were our owners, we'd probably probably give them a good huff about this,"
|
||||
Skloot said.
|
||||
|
||||
Honda released an interview with a weather reporter who commented on some of the
|
||||
characteristics of the Accord Clarity. Specifically, he compared the combination to
|
||||
the
|
||||
Honda Accord Hybrid and said:
|
||||
|
||||
"We are riding a totally new bike in a completely new environment."
|
||||
|
||||
In order to become the successful world-beating hybrid and electric motorcycle
|
||||
manufacturers that they are, I believe that at the end of the day, it's all about
|
||||
image.
|
||||
</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure style="--color: blue;">
|
||||
<img src="../img/thumbnails/monalisa.jpg"
|
||||
alt="Mona lisa">
|
||||
<figcaption>
|
||||
<header>
|
||||
Spotted: Mona Lisa subway.
|
||||
</header>
|
||||
<p>
|
||||
F32 spotted at subway Poznań. Was a healthy male please
|
||||
contact me for further details. Sjało 085-2654 9/17/2017 Hana:
|
||||
Dr. Tomasz Stunek said that he studied the man, identified by
|
||||
the German news agency DPA, for three years in Germany before it
|
||||
turned out that he is not a German, but a Pole. He told journalists
|
||||
that he did not understand why the city government felt forced to
|
||||
disclose the man's identity on public media. The man, who is
|
||||
currently based in Warsaw and part of.
|
||||
</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<div id="right" class="controls">
|
||||
<i class="fas fa-hand-point-right"></i>
|
||||
</div>
|
||||
</section>
|
||||
<section id="sports">
|
||||
<header>
|
||||
<h3>Sports</h3>
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
@import './styles/_vars.scss';
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
$secondary: green;
|
||||
|
||||
body {
|
||||
font-family: 'Lato', sans-serif;
|
||||
@ -32,4 +33,5 @@ body {
|
||||
|
||||
@import './styles/nav.scss';
|
||||
@import './styles/header.scss';
|
||||
@import './styles/main.scss';
|
||||
|
||||
|
||||
52
src/index.ts
52
src/index.ts
@ -100,3 +100,55 @@ let header = {
|
||||
};
|
||||
header.makeHeaderAnimatable();
|
||||
header.setDate();
|
||||
|
||||
let s = {
|
||||
slideshow: document.querySelector("section#slideshow"),
|
||||
innerSlideshow: null as HTMLDivElement,
|
||||
position: 0,
|
||||
num: 0,
|
||||
figures: null as NodeListOf<HTMLElement>
|
||||
};
|
||||
|
||||
let slideshow = {
|
||||
...s,
|
||||
figures: s.slideshow.querySelectorAll("figure"),
|
||||
innerSlideshow: s.slideshow.querySelector("#inner-slideshow") as HTMLDivElement,
|
||||
innerSlideshowTransform: "",
|
||||
controls: {
|
||||
left: s.slideshow.querySelector("#left") as HTMLDivElement,
|
||||
setPosition: () => {
|
||||
const pos = slideshow.position;
|
||||
console.log(`position: `, pos);
|
||||
if(pos === 0) {
|
||||
slideshow.controls.left.classList.add("inactive");
|
||||
} else {
|
||||
slideshow.controls.left.classList.remove("inactive");
|
||||
}
|
||||
if(pos === slideshow.num - 1) {
|
||||
slideshow.controls.right.classList.add("inactive");
|
||||
} else {
|
||||
slideshow.controls.right.classList.remove("inactive");
|
||||
}
|
||||
slideshow.innerSlideshow.style.transform
|
||||
= `translateX(-${pos * 100 + 50}%)`;
|
||||
},
|
||||
onLeftClick: () => {
|
||||
console.log("left");
|
||||
slideshow.position = Math.max(0, --slideshow.position);
|
||||
slideshow.controls.setPosition();
|
||||
},
|
||||
right: s.slideshow.querySelector("#right") as HTMLDivElement,
|
||||
onRightClick: () => {
|
||||
console.log("right");
|
||||
slideshow.position = Math.min(slideshow.num - 1, ++slideshow.position);
|
||||
slideshow.controls.setPosition();
|
||||
},
|
||||
}
|
||||
};
|
||||
slideshow.num = slideshow.figures.length;
|
||||
slideshow.controls.setPosition();
|
||||
|
||||
["left", "right"].forEach(side => {
|
||||
const x = slideshow.controls[side] as HTMLDivElement;
|
||||
x.addEventListener("click", slideshow.controls[`on${side[0].toUpperCase()}${side.slice(1)}Click`]);
|
||||
});
|
||||
|
||||
1
src/styles/_vars.scss
Normal file
1
src/styles/_vars.scss
Normal file
@ -0,0 +1 @@
|
||||
$secondary: green;
|
||||
@ -1,3 +1,5 @@
|
||||
@import './_vars.scss';
|
||||
|
||||
header#main-header {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
@ -137,7 +139,7 @@ header#main-header {
|
||||
|
||||
figure {
|
||||
|
||||
&#stocks {
|
||||
&#stonks {
|
||||
border-left: 1px solid black;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
113
src/styles/main.scss
Normal file
113
src/styles/main.scss
Normal file
@ -0,0 +1,113 @@
|
||||
@import './_vars.scss';
|
||||
|
||||
body > main {
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
section#slideshow {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.controls {
|
||||
font-size: 5rem;
|
||||
color: $secondary;
|
||||
cursor: pointer;
|
||||
transition: transform 1s ease-out;
|
||||
|
||||
&.inactive {
|
||||
color: gray;
|
||||
cursor: default;
|
||||
transition-duration: 2s;
|
||||
transition-timing-function: ease-in;
|
||||
|
||||
&#left {
|
||||
transform: rotate(0.5turn);
|
||||
}
|
||||
|
||||
&#right {
|
||||
transform: rotate(-0.5turn);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#slideshow-container {
|
||||
position: relative;
|
||||
width: 80%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
#inner-slideshow {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
transition: transform 500ms ease-out;
|
||||
|
||||
figure {
|
||||
min-width: 100%;
|
||||
position: relative;
|
||||
$color: var(--color);
|
||||
|
||||
img {
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
width: auto;
|
||||
object-position: center;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 2rem;
|
||||
|
||||
header {
|
||||
font-weight: 800;
|
||||
font-size: 1.5rem;
|
||||
font-family: 'Bungee Inline', serif;
|
||||
margin-bottom: 2rem;
|
||||
background-color: $color;
|
||||
width: fit-content;
|
||||
color: white;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
p {
|
||||
$padding: 1rem;
|
||||
padding: $padding;
|
||||
transform: translateX(-$padding);
|
||||
color: white;
|
||||
z-index: 5;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: $color;
|
||||
background-blend-mode: soft-light;
|
||||
opacity: 0.7;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,3 +1,5 @@
|
||||
@import './_vars.scss';
|
||||
|
||||
nav {
|
||||
$bg-color: white;
|
||||
position: fixed;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user