LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code




be the wind
CSS
html, body {
 margin:0;
 padding:0;
 height:100%;
}

#background {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #00AEEF;
  z-index: -2;
}

#text {
  color: white;
  position: relative;
  top: 125px;
}

#center {
  text-align: center;
}

.bell {
  -moz-border-radius: 50px 50px 100px  0px;
 -webkit-border-radius: 50px 50px 100px  0px;
 border-radius: 50px 50px 100px  0px;
}

.line {
  background: white;
  position: absolute;
  width: 2px;
  height: 300%;
  left:0px;
  right:0px;
  top:-300%;
  bottom:0px;
  margin: 0 auto 0;
  z-index: -1;
}

#bell1 {
  position: relative;
  height:100px;
  width:15px;
  background: #FFDE17;
  left:0;
 right:0;
 top:-30px;
 bottom:0;
 margin:auto;
}

#bell2 {
  height:100px;
  width:15px;
  background: #FFDE17;
  left:60px;
 right:0px;
 top:0;
 bottom:65px;
 margin:auto;
}

#bell3 {
 position: relative;
 height:100px;
 width:15px;
 background: #FFDE17;
 left:0px;
 right:45px;
 top:-50px;
 margin:auto;
}

/* / Animations / */
.part {
  /* safari fix for disappearing rope */
  -webkit-transform: translate3d(0px, 0px, 0px);
  
  position: relative;
  top: 100px;
  display: inline-block;
  transition: .30s all;
  -ms-transition: .30s all;
-webkit-transition: .30s all;
-moz-transition: .30s all;
-o-transition: .30s all;
}

.part:hover {
  transition-delay: 0s;
  transform: translate(15px, 0px) skew(1deg, 1deg);
  -ms-transform: translate(15px, 0px) skew(1deg, 1deg);
-webkit-transform: translate(15px, 0px) skew(1deg, 1deg);
-moz-transform: translate(15px, 0px) skew(1deg, 1deg);
-o-transform: translate(15px, 0px) skew(1deg, 1deg);
}
JS
var audio = document.getElementById("audio1");
var audio2 = document.getElementById("audio2");
var audio3 = document.getElementById("audio3");

$("#part1").mouseenter(function() {
  audio.currentTime = 0;
  audio.play();
});

$("#part2").mouseenter(function() {
  audio2.currentTime = 0;
  audio2.play();
});

$("#part3").mouseenter(function() {
  audio3.currentTime = 0;
  audio3.play();
});

Description

CSS bells that are playing on hover. The sounds are by Nik Paget-Tomlinson (http://www.nikpt.com/).
Term
Sat, 04/14/2018 - 20:46

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv