Difference between revisions of "Team:TecCEM/Collaborations"

Line 1,335: Line 1,335:
 
 
 
</body>
 
</body>
 +
</html>
 +
 +
{{TecCEM/Footer}}
 +
 +
<html>
 +
<style>
 +
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700&family=Roboto&display=swap');
 +
.tips{
 +
display: flex;
 +
transition: transform 0.6s ease-out;
 +
flex-wrap: wrap;
 +
width: 10%;
 +
background: #FDEBC5;
 +
border-radius: 2rem;
 +
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
 +
justify-content: center;
 +
align-content: center;
 +
align-items: center;
 +
max-height: 45rem;
 +
position: fixed;
 +
top: 15%;
 +
margin-left: 2rem;
 +
padding: 1rem;
 +
right: 26px;
 +
transform: translateX(+150%) translateY(0);
 +
 +
}
 +
.tips_hidden{
 +
transform: translateX(0%) translateY(0);
 +
/*100% - .menu_lateral.height + .menu_lateral_teccem.heigh
 +
100 - 35 + 20 = 85
 +
*/
 +
}
 +
 +
h1{
 +
font-family: "Hoefler Text", "Liberation Serif", "Times New Roman", "serif";
 +
font-size: 1.3rem;
 +
}
 +
h2, h3{
 +
border-left: 4px solid #CDECA9;
 +
border-right: 4px solid #CDECA9;
 +
display: inline-block;
 +
width: 100%;
 +
min-height: 50px;
 +
 +
text-align: center;
 +
color: #45ACFF;
 +
}
 +
 +
.txt{
 +
text-align: justify;
 +
  text-justify: inter-word;
 +
}
 +
.survey{
 +
display: flex;
 +
align-content: center;
 +
justify-content: center;
 +
align-items: center;
 +
}
 +
body{
 +
margin: 0;
 +
padding: 0;
 +
}
 +
.Imagen_principal{
 +
display: flex;
 +
align-content: center;
 +
justify-content: center;
 +
align-items: center;
 +
width: 100vw;
 +
height: 100vh;
 +
}
 +
.Imagen_principal > img{
 +
width: 100vw;
 +
height: 100%;
 +
}
 +
.Titulo{
 +
position: absolute;
 +
background: white;
 +
padding: 1rem;
 +
border-radius: 1rem;
 +
z-index: 10;
 +
}
 +
.Titulo > h1{
 +
display: inline;
 +
opacity: 1;
 +
font-size: 4rem;
 +
}
 +
.Difuminado{
 +
width: 100vw;
 +
height: 100vh;
 +
position: absolute;
 +
z-index: 9;
 +
background: white;
 +
opacity: .4;
 +
}
 +
.cuerpo_principal{
 +
display: flex;
 +
flex-direction: row;
 +
width: 100vw;
 +
}
 +
.menu_lateral{
 +
display: flex;
 +
transition: transform 0.6s ease-out;
 +
 +
flex-wrap: wrap;
 +
width: 10%;
 +
justify-content: center;
 +
align-content: center;
 +
align-items: center;
 +
max-height: 45rem;
 +
position: fixed;
 +
top: 10%;
 +
margin-left: 2rem;
 +
padding: 1rem;
 +
transform: translateX(-150%) translateY(0);
 +
 +
}
 +
.menu_lateral_hidden{
 +
transform: translateX(0%) translateY(0);
 +
/*100% - .menu_lateral.height + .menu_lateral_teccem.heigh
 +
100 - 35 + 20 = 85
 +
*/
 +
}
 +
.Espacio_menu_lateral{
 +
width: 17%;
 +
}
 +
.menu_lateral li{
 +
margin-bottom: 1rem;
 +
cursor: pointer;
 +
transition: all 0.4s ease-out;
 +
 +
}
 +
.menu_section:hover{
 +
transform: translateX(10%) translateY(0);
 +
text-decoration: underline;
 +
}
 +
.sobresalirmenu{
 +
transform: translateX(10%) translateY(0);
 +
text-decoration: underline;
 +
}
 +
.Texto{
 +
width: 65%;
 +
padding: 1rem;
 +
justify-content: center;
 +
display: flex;
 +
flex-direction: column;
 +
align-items: center;
 +
display: inline;
 +
 +
}
 +
.Texto h2{
 +
align-self: left;
 +
}
 +
 +
.Texto p {
 +
text-align: justify;
 +
display: inline;
 +
}
 +
 +
.Texto img{
 +
width: 70%;
 +
max-height: 500px;
 +
}
 +
 +
.Caption{
 +
width: 70%;
 +
}
 +
html, body {
 +
    height: 100vh;
 +
}
 +
.cite{
 +
position: absolute;
 +
bottom: 55px;
 +
width: 500px;
 +
background: #fff;
 +
padding: 20px;
 +
box-sizing: border-box;
 +
box-shadow: 6px 4px 4px 4px rgba(0, 0, 0, 0.2);
 +
visibility: hidden;
 +
opacity: 0;
 +
border-radius: 20px;
 +
transition: 0.5s;
 +
transform: translateX(-50%) translateY(50px)
 +
}
 +
.Apacite:hover .cite{
 +
visibility: visible;
 +
opacity: 1;
 +
transform: translateX(-50%) translateY(0px);
 +
z-index: 99999;
 +
 +
}
 +
.Apacite {
 +
  position: relative;
 +
display: inline;
 +
transition: 0.5s;
 +
cursor: pointer;
 +
width: auto;
 +
}
 +
.Apacite:hover{
 +
text-decoration: underline;
 +
}
 +
 +
</style>
 +
 +
<script>
 +
 +
 +
function getElementY(query) {
 +
  return window.pageYOffset + document.querySelector(query).getBoundingClientRect().top
 +
}
 +
 +
function doScrolling(element, duration) {
 +
var startingY = window.pageYOffset + 50
 +
  var elementY = getElementY(element)
 +
  // If element is close to page's bottom then window will scroll only to some position above the element.
 +
  var targetY = document.body.scrollHeight - elementY < window.innerHeight ? document.body.scrollHeight - window.innerHeight : elementY
 +
var diff = targetY - startingY
 +
  // Easing function: easeInOutCubic
 +
  // From: https://gist.github.com/gre/1650294
 +
  var easing = function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1 }
 +
  var start
 +
 +
  if (!diff) return
 +
 +
// Bootstrap our animation - it will get called right before next frame shall be rendered.
 +
window.requestAnimationFrame(function step(timestamp) {
 +
    if (!start) start = timestamp
 +
    // Elapsed miliseconds since start of scrolling.
 +
    var time = timestamp - start
 +
// Get percent of completion in range [0, 1].
 +
    var percent = Math.min(time / duration, 1)
 +
    // Apply the easing.
 +
    // It can cause bad-looking slow frames in browser performance tool, so be careful.
 +
    percent = easing(percent)
 +
 +
    window.scrollTo(0, startingY + diff * percent - 50)
 +
 +
// Proceed with animation as long as we wanted it to.
 +
    if (time < duration) {
 +
      window.requestAnimationFrame(step)
 +
    }
 +
 +
  })
 +
console.log(elementY)
 +
}
 +
 +
// Apply event handlers. Example of firing the scrolling mechanism.
 +
document.getElementById('to1').addEventListener('click', doScrolling.bind(null, '#primer', 1000))
 +
document.getElementById('to2').addEventListener('click', doScrolling.bind(null, '#segundo', 1000))
 +
document.getElementById('to3').addEventListener('click', doScrolling.bind(null, '#tercero', 1000))
 +
document.getElementById('to4').addEventListener('click', doScrolling.bind(null, '#cuarto', 1000))
 +
document.getElementById('to5').addEventListener('click', doScrolling.bind(null, '#quinto', 1000))
 +
</script>
 +
<script>
 +
$(window).scroll(function(){
 +
  if($(document).scrollTop() > 650){
 +
document.querySelector(".menu_lateral").classList.add("menu_lateral_hidden");
 +
  }else{
 +
document.querySelector(".menu_lateral").classList.remove("menu_lateral_hidden");
 +
  }
 +
});
 +
</script>
 +
<script>
 +
$(window).scroll(function(){
 +
var f = $(document).scrollTop();
 +
                var pri = getElementY("#primer")-52
 +
var seg = getElementY("#segundo")-52;
 +
var ter =  getElementY("#tercero")-52;
 +
var cuar = getElementY("#cuarto")-52;
 +
var quin =  getElementY("#quinto")-52;
 +
var final =  getElementY("#final")-250;
 +
if(f >= pri){
 +
if(f >= seg){
 +
if(f >= ter){
 +
if(f >= cuar){
 +
if(f>=quin){
 +
if(f>=final){
 +
document.querySelector(".menu_lateral").classList.remove("menu_lateral_hidden");
 +
console.log("Debería de esconderlo");
 +
}else{
 +
console.log("quinta");
 +
document.querySelector("#to5").classList.add("sobresalirmenu");
 +
document.querySelector("#to4").classList.remove("sobresalirmenu");
 +
}
 +
//.sobresalirmenu
 +
}else{
 +
console.log("cuarta");
 +
document.querySelector("#to3").classList.remove("sobresalirmenu");
 +
document.querySelector("#to4").classList.add("sobresalirmenu");
 +
document.querySelector("#to5").classList.remove("sobresalirmenu");
 +
}
 +
}else{
 +
console.log("tercera");  
 +
document.querySelector("#to3").classList.add("sobresalirmenu");
 +
document.querySelector("#to2").classList.remove("sobresalirmenu");
 +
document.querySelector("#to4").classList.remove("sobresalirmenu");
 +
}
 +
}else{
 +
console.log("Segunda");  
 +
document.querySelector("#to2").classList.add("sobresalirmenu");
 +
document.querySelector("#to3").classList.remove("sobresalirmenu");
 +
document.querySelector("#to1").classList.remove("sobresalirmenu");
 +
}
 +
  }else{
 +
console.log("Primera sección");
 +
    document.querySelector("#to1").classList.add("sobresalirmenu");
 +
document.querySelector("#to2").classList.remove("sobresalirmenu");
 +
  }
 +
}
 +
if(f>=650){
 +
if(f<=seg){
 +
document.querySelector(".tips").classList.add("tips_hidden");
 +
}else{
 +
document.querySelector(".tips").classList.remove("tips_hidden");
 +
}
 +
}else{
 +
document.querySelector(".tips").classList.remove("tips_hidden");
 +
}
 +
});
 +
 +
</script>
 +
 
</html>
 
</html>

Revision as of 04:39, 13 October 2021

Untitled Document i

Home

Team

Project

Awards

Human Practices

Parts

Judging form

Untitled Document

Team

idea

Tips

Click on "week"