parzen/indiescience
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

map juli interactive

Browse source
This commit is contained in:
studioem 2021-06-07 22:46:52 +02:00
parent 5ecb295b1e
commit 1842460b39
7 changed files with 101 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
assets/.DS_Store vendored Normal file
View file

Binary file not shown.

BIN
assets/juli/map-juli.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 67 KiB

15
hpJuli.html
View file

@ -18,21 +18,26 @@
</head> </head>
<body class="home"> <body class="home">
<div class="noScroll">
<div class="landingPageJuli"> <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 <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 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> reality of food</div>
<div class="LienEpisode1"><img src="ImgJuli.png"/></div> <div class="LienEpisode1"><img src="ImgJuli.png"/></div>
<div class="ImgEpisode1"> <div class="ImgEpisode1 imgEpisode">
<img src="ImgProtocol.png"/> <img src="ImgProtocol.png"/>
<div class="closeButton">X</div> <div class="closeButton">X</div>
</div> </div>
<div class="LienEpisode2"><img src="ImgJuli.png"/></div> <div class="LienEpisode2"><img src="ImgJuli.png"/></div>
<div class="ImgEpisode2"> <div class="ImgEpisode2 imgEpisode">
<img src="ImgProtocol.png"/> <img src="ImgProtocol.png"/>
<div class="closeButton">X</div> <div class="closeButton">X</div>
</div> </div>
@ -67,8 +72,6 @@
by Lison, Julia, Camille, Raphaelle, Gianmarco</p> by Lison, Julia, Camille, Raphaelle, Gianmarco</p>
<div class=buttonEnter>enter</div> <div class=buttonEnter>enter</div>
</div> --> </div> -->
</div>
</body> </body>
</html> </html>

8
js/application.js
View file

@ -52,7 +52,7 @@ $(document).ready(function(){
function floating(id){ function floating(id){
setTimeout(function(){ setTimeout(function(){
positionFloating(id); positionFloating(id);
}, 10); }, 100);
setInterval(function(){ setInterval(function(){
positionFloating(id); positionFloating(id);
}, 10000); }, 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
View file

@ -271,28 +271,28 @@ body {
} }
.object:nth-child(1) { .object:nth-child(1) {
left: 33%; left: 7%;
top: 39%; top: 34%;
} }
.object:nth-child(2) { .object:nth-child(2) {
left: 11%; left: 13%;
top: 58%; top: 31%;
} }
.object:nth-child(3) { .object:nth-child(3) {
left: 5%; left: 30%;
top: 57%; top: 38%;
} }
.object:nth-child(4) { .object:nth-child(4) {
left: 76%; left: 43%;
top: 63%; top: 28%;
} }
.object:nth-child(5) { .object:nth-child(5) {
left: 77%; left: 71%;
top: 17%; top: 58%;
} }
.netherlands { .netherlands {
@ -424,11 +424,6 @@ body {
.landingPageJuli { .landingPageJuli {
position: absolute; position: absolute;
background: black;
background-image: url(outlinebg.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
@ -1079,4 +1074,38 @@ body {
#trigger2:hover ~ #bg .texte2 { #trigger2:hover ~ #bg .texte2 {
display: none; 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 */ /*# sourceMappingURL=styles.css.map */

2
styles.css.map
View file

File diff suppressed because one or more lines are too long

45
styles.scss
View file

@ -435,11 +435,11 @@ body{
position: absolute; position: absolute;
// top: 50%; // top: 50%;
// transform: translateY(-50%); // transform: translateY(-50%);
background: rgb(0, 0, 0); // background: rgb(0, 0, 0);
background-image: url(outlinebg.png); // background-image: url(outlinebg.png);
background-position: center; // background-position: center;
background-repeat: no-repeat; // background-repeat: no-repeat;
background-size: cover; // background-size: cover;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; 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 // stuffs
@media screen and (min-width: 1000px) { @media screen and (min-width: 1000px) {