map juli interactive
This commit is contained in:
studioem
parent
5ecb295b1e
commit
1842460b39
7 changed files with 101 additions and 28 deletions
BIN
assets/.DS_Store
vendored
Normal file
BIN
assets/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
assets/juli/map-juli.jpeg
Normal file
BIN
assets/juli/map-juli.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
15
hpJuli.html
15
hpJuli.html
|
|
@ -18,21 +18,26 @@
|
|||
</head>
|
||||
<body class="home">
|
||||
|
||||
<div class="noScroll">
|
||||
|
||||
<div class="landingPageJuli">
|
||||
|
||||
<div class="map-container">
|
||||
<img src="assets/juli/map-juli.jpeg" />
|
||||
<div class="map-pointer" id="Episode1"></div>
|
||||
<div class="map-pointer" id="Episode2"></div>
|
||||
</div>
|
||||
|
||||
<div class="texte">The Chocolate Atlas takes the viewer on a non-liner route through the world of cocoa. Using
|
||||
the lens of cocoa to magnify the detached consumption of goods on a global base. A melt-inyour-mouth sweet for some and, amongst others, a child-slavery-based business for others. The
|
||||
reality of food</div>
|
||||
|
||||
<div class="LienEpisode1"><img src="ImgJuli.png"/></div>
|
||||
<div class="ImgEpisode1">
|
||||
<div class="ImgEpisode1 imgEpisode">
|
||||
<img src="ImgProtocol.png"/>
|
||||
<div class="closeButton">X</div>
|
||||
</div>
|
||||
|
||||
<div class="LienEpisode2"><img src="ImgJuli.png"/></div>
|
||||
<div class="ImgEpisode2">
|
||||
<div class="ImgEpisode2 imgEpisode">
|
||||
<img src="ImgProtocol.png"/>
|
||||
<div class="closeButton">X</div>
|
||||
</div>
|
||||
|
|
@ -67,8 +72,6 @@
|
|||
by Lison, Julia, Camille, Raphaelle, Gianmarco</p>
|
||||
<div class=buttonEnter>enter</div>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -52,7 +52,7 @@ $(document).ready(function(){
|
|||
function floating(id){
|
||||
setTimeout(function(){
|
||||
positionFloating(id);
|
||||
}, 10);
|
||||
}, 100);
|
||||
setInterval(function(){
|
||||
positionFloating(id);
|
||||
}, 10000);
|
||||
|
|
@ -120,4 +120,10 @@ $(document).ready(function(){
|
|||
|
||||
});
|
||||
|
||||
$(".map-pointer").click(function(){
|
||||
var id = $(this).attr("id");
|
||||
$(".imgEpisode").hide();
|
||||
$(".Img"+ id).show();
|
||||
})
|
||||
|
||||
});
|
||||
59
styles.css
59
styles.css
|
|
@ -271,28 +271,28 @@ body {
|
|||
}
|
||||
|
||||
.object:nth-child(1) {
|
||||
left: 33%;
|
||||
top: 39%;
|
||||
left: 7%;
|
||||
top: 34%;
|
||||
}
|
||||
|
||||
.object:nth-child(2) {
|
||||
left: 11%;
|
||||
top: 58%;
|
||||
left: 13%;
|
||||
top: 31%;
|
||||
}
|
||||
|
||||
.object:nth-child(3) {
|
||||
left: 5%;
|
||||
top: 57%;
|
||||
left: 30%;
|
||||
top: 38%;
|
||||
}
|
||||
|
||||
.object:nth-child(4) {
|
||||
left: 76%;
|
||||
top: 63%;
|
||||
left: 43%;
|
||||
top: 28%;
|
||||
}
|
||||
|
||||
.object:nth-child(5) {
|
||||
left: 77%;
|
||||
top: 17%;
|
||||
left: 71%;
|
||||
top: 58%;
|
||||
}
|
||||
|
||||
.netherlands {
|
||||
|
|
@ -424,11 +424,6 @@ body {
|
|||
|
||||
.landingPageJuli {
|
||||
position: absolute;
|
||||
background: black;
|
||||
background-image: url(outlinebg.png);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
|
@ -1079,4 +1074,38 @@ body {
|
|||
#trigger2:hover ~ #bg .texte2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.map-container {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.map-container img {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.map-container .map-pointer {
|
||||
position: absolute;
|
||||
width: 5vh;
|
||||
height: 5vh;
|
||||
background-color: green;
|
||||
opacity: .5;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.map-container #Episode1 {
|
||||
left: 70%;
|
||||
top: 9%;
|
||||
}
|
||||
|
||||
.map-container #Episode2 {
|
||||
left: 70%;
|
||||
top: 23%;
|
||||
}
|
||||
/*# sourceMappingURL=styles.css.map */
|
||||
File diff suppressed because one or more lines are too long
45
styles.scss
45
styles.scss
|
|
@ -435,11 +435,11 @@ body{
|
|||
position: absolute;
|
||||
// top: 50%;
|
||||
// transform: translateY(-50%);
|
||||
background: rgb(0, 0, 0);
|
||||
background-image: url(outlinebg.png);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
// background: rgb(0, 0, 0);
|
||||
// background-image: url(outlinebg.png);
|
||||
// background-position: center;
|
||||
// background-repeat: no-repeat;
|
||||
// background-size: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
|
@ -1098,6 +1098,41 @@ body{
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.map-container {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.map-pointer {
|
||||
position: absolute;
|
||||
width: 5vh;
|
||||
height: 5vh;
|
||||
background-color: green;
|
||||
opacity: .5;
|
||||
transform: translate(-50%, -50%);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#Episode1 {
|
||||
left: 70%;
|
||||
top: 9%;
|
||||
}
|
||||
#Episode2 {
|
||||
left: 70%;
|
||||
top: 23%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// stuffs
|
||||
|
||||
@media screen and (min-width: 1000px) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue