modification etienne
This commit is contained in:
studioem
parent
ae46771224
commit
5ecb295b1e
5 changed files with 145 additions and 142 deletions
|
|
@ -20,19 +20,15 @@
|
|||
|
||||
<div class="noScroll">
|
||||
|
||||
<div class="objectCamille">
|
||||
<a href="0manifesto.html">
|
||||
<img src="ImgWholeEarthCatalog.png" class="icon"/>
|
||||
<img src="someThoughtsBlanc.png" class="hover"/>
|
||||
</a>
|
||||
</div>
|
||||
<a href="0manifesto.html" class="objectCamille">
|
||||
<img src="ImgWholeEarthCatalog.png" />
|
||||
<img src="someThoughtsBlanc.png" />
|
||||
</a>
|
||||
|
||||
<div class="objectCamille">
|
||||
<a href="1beantobar.html">
|
||||
<img src="ImgChocolatePlanetBig.png" class="icon"/>
|
||||
<img src="ImgFrombeantobarBlanc.png" class="hover"/>
|
||||
</a>
|
||||
</div>
|
||||
<a href="1beantobar.html" class="objectCamille">
|
||||
<img src="ImgChocolatePlanetBig.png" />
|
||||
<img src="ImgFrombeantobarBlanc.png" />
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -45,9 +45,25 @@ $(document).ready(function(){
|
|||
$(this).css({"top": nombre(80) + "%", "left": nombre(90) + "%"});
|
||||
});
|
||||
|
||||
function positionFloating(id){
|
||||
$(id).css({"top": nombre(70) + "%", "left": nombre(70) + "%"});
|
||||
}
|
||||
|
||||
function floating(id){
|
||||
setTimeout(function(){
|
||||
positionFloating(id);
|
||||
}, 10);
|
||||
setInterval(function(){
|
||||
positionFloating(id);
|
||||
}, 10000);
|
||||
|
||||
}
|
||||
|
||||
$(".objectCamille").each(function(){
|
||||
$(this).css({"top": nombre(80) + "%", "left": nombre(90) + "%"});
|
||||
});
|
||||
floating($(this));
|
||||
});
|
||||
|
||||
|
||||
|
||||
$("#trigger").each(function(){
|
||||
$(this).css({"top": nombre(80) + "%", "left": nombre(90) + "%"});
|
||||
|
|
@ -60,17 +76,13 @@ $(document).ready(function(){
|
|||
$(".landingPage").fadeOut(600);
|
||||
})
|
||||
|
||||
// var poseX= 20;
|
||||
// var poseY= 50;
|
||||
|
||||
// function floating(){
|
||||
// poseX= poseX + 1;
|
||||
// poseY= poseY + 1;
|
||||
// $("#trigger").css({"top": poseX + "%", "left": poseY + "%"});
|
||||
// console.log(poseX + "/" + poseY)
|
||||
// }
|
||||
$(".objectCamille").each(function(){
|
||||
$(this).css({"top": nombre(70) + "%", "left": nombre(70) + "%"});
|
||||
});
|
||||
|
||||
|
||||
|
||||
// setInterval(floating, 30)
|
||||
|
||||
$(".LienEpisode1").on("click",function(){
|
||||
|
||||
|
|
|
|||
102
styles.css
102
styles.css
|
|
@ -271,28 +271,28 @@ body {
|
|||
}
|
||||
|
||||
.object:nth-child(1) {
|
||||
left: 89%;
|
||||
top: 72%;
|
||||
left: 33%;
|
||||
top: 39%;
|
||||
}
|
||||
|
||||
.object:nth-child(2) {
|
||||
left: 44%;
|
||||
top: 75%;
|
||||
left: 11%;
|
||||
top: 58%;
|
||||
}
|
||||
|
||||
.object:nth-child(3) {
|
||||
left: 36%;
|
||||
top: 76%;
|
||||
left: 5%;
|
||||
top: 57%;
|
||||
}
|
||||
|
||||
.object:nth-child(4) {
|
||||
left: 68%;
|
||||
top: 82%;
|
||||
left: 76%;
|
||||
top: 63%;
|
||||
}
|
||||
|
||||
.object:nth-child(5) {
|
||||
left: 24%;
|
||||
top: 20%;
|
||||
left: 77%;
|
||||
top: 17%;
|
||||
}
|
||||
|
||||
.netherlands {
|
||||
|
|
@ -465,7 +465,10 @@ body {
|
|||
right: 30vw;
|
||||
}
|
||||
|
||||
.landingPageJuli .ImgEpisode1 .closeButton {
|
||||
.landingPageJuli .closeButton {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: black;
|
||||
color: white;
|
||||
display: inline-block;
|
||||
|
|
@ -475,11 +478,9 @@ body {
|
|||
border-color: white;
|
||||
padding: 0.3vw 0.6vw 0.3vw 0.6vw;
|
||||
cursor: pointer;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
}
|
||||
|
||||
.landingPageJuli .ImgEpisode1 .closeButton:hover {
|
||||
.landingPageJuli .closeButton:hover {
|
||||
background: white;
|
||||
color: black;
|
||||
border-color: white;
|
||||
|
|
@ -505,52 +506,59 @@ body {
|
|||
left: 20vw;
|
||||
}
|
||||
|
||||
.landingPageJuli .ImgEpisode2 .closeButton {
|
||||
background: black;
|
||||
color: white;
|
||||
display: inline-block;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: 1vw;
|
||||
border-color: white;
|
||||
padding: 0.3vw 0.6vw 0.3vw 0.6vw;
|
||||
cursor: pointer;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
}
|
||||
|
||||
.landingPageJuli .ImgEpisode2 .closeButton:hover {
|
||||
background: white;
|
||||
color: black;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.objectCamille {
|
||||
position: relative;
|
||||
width: 25vw;
|
||||
height: 150px;
|
||||
position: absolute;
|
||||
display: block;
|
||||
color: white;
|
||||
text-align: center;
|
||||
height: 10vw;
|
||||
-webkit-transition: top 10s linear, left 10s linear;
|
||||
transition: top 10s linear, left 10s linear;
|
||||
}
|
||||
|
||||
.objectCamille:nth-child(1) {
|
||||
height: 14vw;
|
||||
}
|
||||
|
||||
.objectCamille:nth-child(2) {
|
||||
height: 10vw;
|
||||
}
|
||||
|
||||
.objectCamille:nth-child(3) {
|
||||
height: 14vw;
|
||||
}
|
||||
|
||||
.objectCamille:nth-child(4) {
|
||||
height: 10vw;
|
||||
}
|
||||
|
||||
.objectCamille:nth-child(5) {
|
||||
height: 14vw;
|
||||
}
|
||||
|
||||
.objectCamille:nth-child(6) {
|
||||
height: 10vw;
|
||||
}
|
||||
|
||||
.objectCamille img {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.objectCamille img:first-child {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.objectCamille .hover {
|
||||
opacity: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.objectCamille:hover .hover {
|
||||
opacity: 1;
|
||||
.objectCamille:hover img:first-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.objectCamille a {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
.objectCamille:hover img:last-child {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.bodyManifestoPage {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
129
styles.scss
129
styles.scss
|
|
@ -475,28 +475,28 @@ body{
|
|||
top: 20vw;
|
||||
right: 30vw;
|
||||
|
||||
.closeButton {
|
||||
// position: absolute;
|
||||
// margin: 3px;
|
||||
background: rgb(0, 0, 0);
|
||||
color: rgb(255, 255, 255);
|
||||
display: inline-block;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: 1vw;
|
||||
border-color: white;
|
||||
padding: 0.3vw 0.6vw 0.3vw 0.6vw;
|
||||
cursor: pointer;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: white;
|
||||
color: rgb(0, 0, 0);
|
||||
border-color: white;
|
||||
}
|
||||
.closeButton {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
// margin: 3px;
|
||||
background: rgb(0, 0, 0);
|
||||
color: rgb(255, 255, 255);
|
||||
display: inline-block;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: 1vw;
|
||||
border-color: white;
|
||||
padding: 0.3vw 0.6vw 0.3vw 0.6vw;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
&:hover {
|
||||
background: white;
|
||||
color: rgb(0, 0, 0);
|
||||
border-color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.LienEpisode2 {
|
||||
|
|
@ -518,69 +518,56 @@ body{
|
|||
top: 30vw;
|
||||
left: 20vw;
|
||||
|
||||
.closeButton {
|
||||
// position: absolute;
|
||||
// margin: 3px;
|
||||
background: rgb(0, 0, 0);
|
||||
color: rgb(255, 255, 255);
|
||||
display: inline-block;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: 1vw;
|
||||
border-color: white;
|
||||
padding: 0.3vw 0.6vw 0.3vw 0.6vw;
|
||||
cursor: pointer;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
|
||||
&:hover {
|
||||
background: white;
|
||||
color: rgb(0, 0, 0);
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.objectCamille {
|
||||
position: absolute
|
||||
// width: 25vw;
|
||||
// height: 150px;
|
||||
position: absolute;
|
||||
display: block;
|
||||
color: white;
|
||||
text-align: center;
|
||||
height: 10vw;
|
||||
|
||||
transition: top 10s linear, left 10s linear;
|
||||
|
||||
&:nth-child(1){
|
||||
height: 14vw;
|
||||
}
|
||||
&:nth-child(2){
|
||||
height: 10vw;
|
||||
}
|
||||
&:nth-child(3){
|
||||
height: 14vw;
|
||||
}
|
||||
&:nth-child(4){
|
||||
height: 10vw;
|
||||
}
|
||||
&:nth-child(5){
|
||||
height: 14vw;
|
||||
}
|
||||
&:nth-child(6){
|
||||
height: 10vw;
|
||||
}
|
||||
|
||||
img{
|
||||
height: 150px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.hover {
|
||||
opacity: 0;
|
||||
// position: absolute;
|
||||
}
|
||||
|
||||
&:hover .hover{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
a {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
}
|
||||
img:first-child{
|
||||
display: block;
|
||||
}
|
||||
.hover {
|
||||
display: block;
|
||||
}
|
||||
&:hover img:first-child{
|
||||
display: none;
|
||||
}
|
||||
&:hover img:last-child{
|
||||
display: block;
|
||||
}
|
||||
|
||||
// #beantobar{
|
||||
// width: 30vw;
|
||||
// }
|
||||
|
||||
// #somethoughts{
|
||||
// width: 25vw;
|
||||
// }
|
||||
|
||||
}
|
||||
|
||||
|
||||
// pages thoughts
|
||||
|
||||
.bodyManifestoPage{
|
||||
|
|
|
|||
Loading…
Reference in a new issue