flow/historia-de-zainab
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Wiki Activity

sin transicion, cambio menu

Browse source
This commit is contained in:
Sergio 2017-09-27 13:00:50 +02:00
parent eb473dc749
commit 2b50849caa
11 changed files with 83 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
css/css/home.css
View file

@ -1 +1 @@
p{font-size:12px}.cd-horizontal-timeline .events-content{position:relative}.cd-horizontal-timeline .events-content li{position:absolute;z-index:1;width:100%;left:0;top:0;transform:translateX(-100%);opacity:0;animation-duration:.4s;animation-timing-function:ease-in-out}.cd-horizontal-timeline .events-content li.selected{position:relative;z-index:2;opacity:1;transform:translateX(0)}div.section-container{background-color:white}#timeline{z-index:10;position:absolute;bottom:0;left:0;height:100px;width:100%}#timeline li{display:inline-block}#timeline a{background-color:white}#timeline a.active{background-color:orange}div.menu-content{height:100vh;background-color:white}div.extra-btn-container{position:absolute;left:700px;bottom:200px}a.btn-circle{border-radius:40px}.map-popover{display:none}div.section-inner-content div.story-content{transform-style:preserve-3d;transition:all 1s linear;backface-visibility:hidden;position:absolute;top:0;left:0}div.section-inner-content div.data-content{transform-style:preserve-3d;transition:all 1s linear;backface-visibility:hidden;transform:rotateY(180deg);position:absolute;top:0;left:0} p{font-size:12px}.cd-horizontal-timeline .events-content{position:relative}.cd-horizontal-timeline .events-content li{position:absolute;z-index:1;width:100%;left:0;top:0;transform:translateX(-100%);opacity:0;animation-duration:.4s;animation-timing-function:ease-in-out}.cd-horizontal-timeline .events-content li.selected{position:relative;z-index:2;opacity:1;transform:translateX(0)}div.section-container{background-color:white}#timeline{z-index:10;position:absolute;bottom:0;left:0;height:100px;width:100%}#timeline li{display:inline-block}#timeline a{background-color:white}#timeline a.active{background-color:orange}div.menu-content{height:100vh;background-color:white}div.extra-btn-container{position:absolute;left:700px;bottom:200px}a.btn-circle{border-radius:40px}.map-popover{display:none}

2
css/css/home.css.map
View file

@ -1 +1 @@
{"version":3,"sources":["home.less"],"names":[],"mappings":"AAAA,EACI,eAIJ,uBAAwB,iBACtB,kBAEF,uBAAwB,gBAAgB,IACtC,iBAAA,CACA,SAAA,CACA,UAAA,CACA,MAAA,CACA,KAAA,CACA,UAAW,iBAAX,CACA,SAAA,CACA,sBAAA,CACA,sCAEF,uBAAwB,gBAAgB,GAAE,UAExC,iBAAA,CACA,SAAA,CACA,SAAA,CACA,UAAW,cAEb,GAAG,mBAEC,uBAGJ,UACI,UAAA,CACA,iBAAA,CACA,QAAA,CACA,MAAA,CACA,YAAA,CACA,WANJ,SAOI,IACI,qBARR,SAUI,GACI,uBAXR,SAaI,EAAC,QACG,wBAIR,GAAG,cACC,YAAA,CACA,uBAGJ,GAAG,qBACC,iBAAA,CACA,UAAA,CACA,aAGJ,CAAC,YACG,mBAGJ,aACI,aAGJ,GAAG,sBACC,IAAG,eACC,2BAAA,CACA,wBAAA,CACA,0BAAA,CACA,iBAAA,CACA,KAAA,CACA,OAPR,GAAG,sBAUC,IAAG,cACC,2BAAA,CACA,wBAAA,CACA,0BAAA,CACA,UAAW,eAAX,CACA,iBAAA,CACA,KAAA,CACA"} {"version":3,"sources":["home.less"],"names":[],"mappings":"AAAA,EACI,eAIJ,uBAAwB,iBACtB,kBAEF,uBAAwB,gBAAgB,IACtC,iBAAA,CACA,SAAA,CACA,UAAA,CACA,MAAA,CACA,KAAA,CACA,UAAW,iBAAX,CACA,SAAA,CACA,sBAAA,CACA,sCAEF,uBAAwB,gBAAgB,GAAE,UAExC,iBAAA,CACA,SAAA,CACA,SAAA,CACA,UAAW,cAEb,GAAG,mBAEC,uBAGJ,UACI,UAAA,CACA,iBAAA,CACA,QAAA,CACA,MAAA,CACA,YAAA,CACA,WANJ,SAOI,IACI,qBARR,SAUI,GACI,uBAXR,SAaI,EAAC,QACG,wBAIR,GAAG,cACC,YAAA,CACA,uBAGJ,GAAG,qBACC,iBAAA,CACA,UAAA,CACA,aAGJ,CAAC,YACG,mBAGJ,aACI"}

14
css/home.less
View file

@ -69,22 +69,10 @@ a.btn-circle{
div.section-inner-content{ div.section-inner-content{
div.story-content{ div.story-content{
transform-style: preserve-3d;
transition: all 1.0s linear;
backface-visibility: hidden;
position:absolute;
top:0;
left:0;
} }
div.data-content{ div.data-content{
transform-style: preserve-3d;
transition: all 1.0s linear;
backface-visibility: hidden;
transform: rotateY(180deg);
position:absolute;
top:0;
left:0;
} }

12
js/main.js
View file

@ -56,14 +56,14 @@ function counterLoading(){
viewStatus="story" viewStatus="story"
} }
if(viewStatus=="story"){ if(viewStatus=="story"){
$('.story-content').css('transform','rotateY(0)') $('.story-content, .menu-story-content').show();
$('.data-content').css('transform','rotateY(180deg)') $('.data-content, .menu-data-content').hide();
$('.menu-content .switchMode').empty().html("ver datos") //$('.menu-content .switchMode').empty().html("ver datos")
} }
else{ else{
$('.story-content').css('transform','rotateY(180deg)') $('.story-content, .menu-story-content').hide();
$('.data-content').css('transform','rotateY(0)') $('.data-content, .menu-data-content').show();
$('.menu-content .switchMode').empty().html("ver historia") //$('.menu-content .switchMode').empty().html("ver historia")
} }
}) })
} }

14
templates/page1.html
View file

@ -5,7 +5,7 @@
<div class="story-content"> <div class="story-content">
<img src="images/c1_IMG_story.png" class="img-responsive" /> <!-- imagen de historia--> <img src="images/c1_IMG_story.png" class="img-responsive" /> <!-- imagen de historia-->
</div> </div>
<div class="data-content"> <div class="data-content" style="display:none">
<img src="images/data.png" class="img-responsive" /> <!-- imagen de datos--> <img src="images/data.png" class="img-responsive" /> <!-- imagen de datos-->
</div> </div>
</div> </div>
@ -13,9 +13,15 @@
<div class="col-md-3"> <div class="col-md-3">
<div class="menu-content"> <div class="menu-content">
<!-- METER CONTENIDO DEL PANEL DERECHO AQUÍ --> <!-- METER CONTENIDO DEL PANEL DERECHO AQUÍ -->
<h2> menu </h2> <div class="menu-story-content">
<a href="#" class="switchMode" class="btn btn-circle"> VER DATOS </a> <h2> menu </h2>
<a href="#" class="switchMode" class="btn btn-circle"> VER DATOS </a>
</div>
<div class="menu-data-content" style="display:none">
<h2> menu </h2>
<div> texto de datos </div>
<a href="#" class="switchMode" class="btn btn-circle"> VER historia </a>
</div>
</div> </div>
</div> </div>
</div> </div>

14
templates/page2.html
View file

@ -5,15 +5,23 @@
<div class="story-content"> <div class="story-content">
<img src="images/medialab.jpg" class="img-responsive" /> <img src="images/medialab.jpg" class="img-responsive" />
</div> </div>
<div class="data-content" > <div class="data-content" style="display:none">
<img src="images/data.png" class="img-responsive" /> <img src="images/data.png" class="img-responsive" />
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<div class="menu-content"> <div class="menu-content">
<h2> menu pag 2 </h2> <!-- METER CONTENIDO DEL PANEL DERECHO AQUÍ -->
<a href="#" class="switchMode" class="btn btn-circle"> VER DATOS </a> <div class="menu-story-content">
<h2> menu </h2>
<a href="#" class="switchMode" class="btn btn-circle"> VER DATOS </a>
</div>
<div class="menu-data-content" style="display:none">
<h2> menu </h2>
<div> texto de datos </div>
<a href="#" class="switchMode" class="btn btn-circle"> VER historia </a>
</div>
</div> </div>
</div> </div>

14
templates/page3.html
View file

@ -5,15 +5,23 @@
<div class="story-content"> <div class="story-content">
<img src="images/medialab.jpg" class="img-responsive" /> <img src="images/medialab.jpg" class="img-responsive" />
</div> </div>
<div class="data-content" > <div class="data-content" style="display:none">
<img src="images/data.png" class="img-responsive" /> <img src="images/data.png" class="img-responsive" />
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<div class="menu-content"> <div class="menu-content">
<h2> menu pagina 3 </h2> <!-- METER CONTENIDO DEL PANEL DERECHO AQUÍ -->
<a href="#" class="switchMode" class="btn btn-circle"> VER DATOS </a> <div class="menu-story-content">
<h2> menu </h2>
<a href="#" class="switchMode" class="btn btn-circle"> VER DATOS </a>
</div>
<div class="menu-data-content" style="display:none">
<h2> menu </h2>
<div> texto de datos </div>
<a href="#" class="switchMode" class="btn btn-circle"> VER historia </a>
</div>
</div> </div>
</div> </div>
</div> </div>

14
templates/page4.html
View file

@ -5,15 +5,23 @@
<div class="story-content"> <div class="story-content">
<img src="images/c1_IMG_story.png" class="img-responsive" /> <img src="images/c1_IMG_story.png" class="img-responsive" />
</div> </div>
<div class="data-content" > <div class="data-content" style="display:none">
<img src="images/data.png" class="img-responsive" /> <img src="images/data.png" class="img-responsive" />
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<div class="menu-content"> <div class="menu-content">
<h2> menu pag 4</h2> <!-- METER CONTENIDO DEL PANEL DERECHO AQUÍ -->
<a href="#" class="switchMode" class="btn btn-circle"> VER DATOS </a> <div class="menu-story-content">
<h2> menu </h2>
<a href="#" class="switchMode" class="btn btn-circle"> VER DATOS </a>
</div>
<div class="menu-data-content" style="display:none">
<h2> menu </h2>
<div> texto de datos </div>
<a href="#" class="switchMode" class="btn btn-circle"> VER historia </a>
</div>
</div> </div>
</div> </div>

13
templates/page5.html
View file

@ -5,7 +5,7 @@
<div class="story-content"> <div class="story-content">
<img src="images/c1_IMG_story.png" class="img-responsive" /> <!-- imagen de historia--> <img src="images/c1_IMG_story.png" class="img-responsive" /> <!-- imagen de historia-->
</div> </div>
<div class="data-content" > <div class="data-content" style="display:none">
<img src="images/data.png" class="img-responsive" /> <!-- imagen de datos--> <img src="images/data.png" class="img-responsive" /> <!-- imagen de datos-->
</div> </div>
</div> </div>
@ -13,8 +13,15 @@
<div class="col-md-3"> <div class="col-md-3">
<div class="menu-content"> <div class="menu-content">
<!-- METER CONTENIDO DEL PANEL DERECHO AQUÍ --> <!-- METER CONTENIDO DEL PANEL DERECHO AQUÍ -->
<h2> menu </h2> <div class="menu-story-content">
<a href="#" class="switchMode" class="btn btn-circle"> VER DATOS </a> <h2> menu </h2>
<a href="#" class="switchMode" class="btn btn-circle"> VER DATOS </a>
</div>
<div class="menu-data-content" style="display:none">
<h2> menu </h2>
<div> texto de datos </div>
<a href="#" class="switchMode" class="btn btn-circle"> VER historia </a>
</div>
</div> </div>
</div> </div>

14
templates/page6.html
View file

@ -5,7 +5,7 @@
<div class="story-content"> <div class="story-content">
<img src="images/c1_IMG_story.png" class="img-responsive" /> <!-- imagen de historia--> <img src="images/c1_IMG_story.png" class="img-responsive" /> <!-- imagen de historia-->
</div> </div>
<div class="data-content" > <div class="data-content" style="display:none">
<img src="images/data.png" class="img-responsive" /> <!-- imagen de datos--> <img src="images/data.png" class="img-responsive" /> <!-- imagen de datos-->
</div> </div>
</div> </div>
@ -13,8 +13,16 @@
<div class="col-md-3"> <div class="col-md-3">
<div class="menu-content"> <div class="menu-content">
<!-- METER CONTENIDO DEL PANEL DERECHO AQUÍ --> <!-- METER CONTENIDO DEL PANEL DERECHO AQUÍ -->
<h2> menu </h2> <!-- METER CONTENIDO DEL PANEL DERECHO AQUÍ -->
<a href="#" class="switchMode" class="btn btn-circle"> VER DATOS </a> <div class="menu-story-content">
<h2> menu </h2>
<a href="#" class="switchMode" class="btn btn-circle"> VER DATOS </a>
</div>
<div class="menu-data-content" style="display:none">
<h2> menu </h2>
<div> texto de datos </div>
<a href="#" class="switchMode" class="btn btn-circle"> VER historia </a>
</div>
</div> </div>
</div> </div>

13
templates/page7.html
View file

@ -5,7 +5,7 @@
<div class="story-content"> <div class="story-content">
<img src="images/c1_IMG_story.png" class="img-responsive" /> <!-- imagen de historia--> <img src="images/c1_IMG_story.png" class="img-responsive" /> <!-- imagen de historia-->
</div> </div>
<div class="data-content" > <div class="data-content" style="display:none">
<img src="images/data.png" class="img-responsive" /> <!-- imagen de datos--> <img src="images/data.png" class="img-responsive" /> <!-- imagen de datos-->
</div> </div>
</div> </div>
@ -13,8 +13,15 @@
<div class="col-md-3"> <div class="col-md-3">
<div class="menu-content"> <div class="menu-content">
<!-- METER CONTENIDO DEL PANEL DERECHO AQUÍ --> <!-- METER CONTENIDO DEL PANEL DERECHO AQUÍ -->
<h2> menu </h2> <div class="menu-story-content">
<a href="#" class="switchMode" class="btn btn-circle"> VER DATOS </a> <h2> menu </h2>
<a href="#" class="switchMode" class="btn btn-circle"> VER DATOS </a>
</div>
<div class="menu-data-content" style="display:none">
<h2> menu </h2>
<div> texto de datos </div>
<a href="#" class="switchMode" class="btn btn-circle"> VER historia </a>
</div>
</div> </div>
</div> </div>