Difference between revisions of "Template:Team:Calgary/StyleSheets/styling.css"

Line 284: Line 284:
 
display:none;
 
display:none;
 
}
 
}
 +
 +
/*
 +
Rocket code by Blot Bakkali
 +
https://codepen.io/blogbakkali/pen/Xbvydr?page=1
 +
*/
 +
 +
#rocketmeluncur {
 +
  position: fixed;
 +
  bottom: 50px;
 +
  z-index: 7;
 +
  display: none;
 +
  visibility: hidden;
 +
  width: 35px;
 +
  height: 62px;
 +
  right: 25px;
 +
  background: url(https://static.igem.org/mediawiki/2017/9/92/Calgary2017_BacktoTopButton.png) no-repeat 50% 0;
 +
  opacity: 0;
 +
  -webkit-transition: visibility .6s cubic-bezier(0.6, 0.04, 0.98, 0.335), opacity .6s cubic-bezier(0.6, 0.04, 0.98, 0.335), -webkit-transform .6s cubic-bezier(0.6, 0.04, 0.98, 0.335);
 +
  -moz-transition: visibility .6s cubic-bezier(0.6, 0.04, 0.98, 0.335), opacity .6s cubic-bezier(0.6, 0.04, 0.98, 0.335), -moz-transform .6s cubic-bezier(0.6, 0.04, 0.98, 0.335);
 +
  transition: visibility .6s cubic-bezier(0.6, 0.04, 0.98, 0.335), opacity .6s cubic-bezier(0.6, 0.04, 0.98, 0.335), transform .6s cubic-bezier(0.6, 0.04, 0.98, 0.335);
 +
}
 +
 +
#rocketmeluncur i {
 +
  display: block;
 +
  margin-top: 48px;
 +
  height: 14px;
 +
  background: url(https://static.igem.org/mediawiki/2017/9/92/Calgary2017_BacktoTopButton.png) no-repeat 50% -48px;
 +
  opacity: .5;
 +
  -webkit-transition: -webkit-transform .2s;
 +
  -moz-transition: -moz-transform .2s;
 +
  transition: transform .2s;
 +
  -webkit-transform-origin: 50% 0;
 +
  -moz-transform-origin: 50% 0;
 +
  transform-origin: 50% 0
 +
}
 +
 +
#rocketmeluncur:hover {
 +
  background-position: 50% -62px
 +
}
 +
 +
#rocketmeluncur:hover i {
 +
  background-position: 50% 100%;
 +
  -webkit-animation: flaming .7s infinite;
 +
  -moz-animation: flaming .7s infinite;
 +
  animation: flaming .7s infinite
 +
}
 +
 +
#rocketmeluncur.showrocket {
 +
  visibility: visible;
 +
  opacity: 1
 +
}
 +
 +
#rocketmeluncur.launchrocket {
 +
  background-position: 50% -62px;
 +
  opacity: 0;
 +
  -webkit-transform: translateY(-800px);
 +
  -moz-transform: translateY(-800px);
 +
  -ms-transform: translateY(-800px);
 +
  transform: translateY(-800px);
 +
  pointer-events: none
 +
}
 +
 +
#rocketmeluncur.launchrocket i {
 +
  background-position: 50% 100%;
 +
  -webkit-transform: scale(1.4, 3.2);
 +
  -moz-transform: scale(1.4, 3.2);
 +
  transform: scale(1.4, 3.2)
 +
}
 +
 +
 +
 +
  
 
@media only screen and (max-width: 58.75rem){
 
@media only screen and (max-width: 58.75rem){

Revision as of 16:48, 29 August 2017