Main Page: Difference between revisions
No edit summary |
No edit summary |
||
Line 6: | Line 6: | ||
</style> | </style> | ||
</html> | </html> | ||
< | <html> | ||
<style> | |||
< | |||
#images-holder | |||
{ | |||
overflow: hidden; | |||
width: 800px; | |||
height: 400px; | |||
position: relative; | |||
display: block; | |||
} | |||
#images-slider | |||
{ | |||
z-index: 1; | |||
right: 0px; | |||
width: 100%; | |||
height: 100%; | |||
position: relative; | |||
} | |||
.image-slot | |||
{ | |||
-moz-transition: all 1.5s ease-in; | |||
-webkit-transition: all 1.5s ease-in; | |||
-o-transition: all 1.5s ease-in; | |||
-ms-transform: all 1.5s ease-in; | |||
transition: all 1.5s ease-in; | |||
-webkit-transform: translateZ(0); | |||
-moz-transform: translateZ(0); | |||
-ms-transform: translateZ(0); | |||
-o-transform: translateZ(0); | |||
transform: translateZ(0); | |||
width: 100%; | |||
height: 100%; | |||
background-color: rgba(126,126,126,0.5); | |||
} | |||
.images{ | |||
position: absolute; | |||
right: -10000px; | |||
left: -10000px; | |||
top: -10000px; | |||
bottom: -10000px; | |||
margin: auto; | |||
} | |||
#slot1 | |||
{ | |||
position: absolute; | |||
margin-left: 0%; | |||
opacity: 1; | |||
} | |||
#slot2 | |||
{ | |||
position: absolute; | |||
margin-left: 0%; | |||
opacity: 0; | |||
} | |||
#slot3 | |||
{ | |||
position: absolute; | |||
margin-left: 0%; | |||
opacity: 0; | |||
} | |||
#slot4 | |||
{ | |||
position: absolute; | |||
margin-left: 0%; | |||
opacity: 0; | |||
} | |||
#slot5 | |||
{ | |||
position: absolute; | |||
margin-left: 0%; | |||
opacity: 0; | |||
} | |||
.button | |||
{ | |||
z-index: 2; | |||
width: 60px; | |||
height: 80px; | |||
position: absolute; | |||
background: black; | |||
opacity: 0; | |||
cursor; default; | |||
-moz-transition: opacity .4s; | |||
-webkit-transition: opacity .4s; | |||
transition: opacity .4s; | |||
top: 40%; | |||
text-align: center; | |||
text-align: center; | |||
line-height: 60px; | |||
} | |||
#images-holder:hover .button | |||
{ | |||
opacity: 0.75; | |||
} | |||
.button:hover .arrow{ | |||
color: #880000; | |||
} | |||
.next | |||
{ | |||
right: 0px; | |||
} | |||
.previous | |||
{ | |||
left: 0px; | |||
} | |||
.arrow{ | |||
color: #FFF; | |||
font-size: 100pt; | |||
cursor: default; | |||
-webkit-touch-callout: none; | |||
-webkit-user-select: none; | |||
-moz-user-select: none; | |||
user-select: none; | |||
display: inline-block; | |||
} | |||
.caption{ | |||
position: absolute; | |||
color: #f0f0f0; | |||
font-size: 20pt; | |||
cursor: default; | |||
-webkit-touch-callout: none; | |||
-webkit-user-select: none; | |||
-moz-user-select: none; | |||
user-select: none; | |||
bottom: 0px; | |||
width: 100%; | |||
height: 80px; | |||
left: 0px; | |||
background-color: rgba(126,126,126,0.75); | |||
padding: 5px; | |||
text-align: left; | |||
box-sizing: border-box; | |||
line-height: 120%; | |||
} | |||
.notransition{ | |||
-moz-transition: none !important; | |||
-webkit-transition: none !important; | |||
-o-transition: none !important; | |||
-ms-transform: none !important; | |||
transition: none !important; | |||
} | |||
.nav-holder{ | |||
position: absolute; | |||
width: 100%; | |||
height: 20px; | |||
bottom: 10px; | |||
} | |||
.navigation{ | |||
position: absolute; | |||
width: 20px; | |||
height: 20px; | |||
border-radius: 50%; | |||
bottom: 10%; | |||
z-index: 2; | |||
display: inline-block; | |||
background: black; | |||
} | |||
.navigation:hover{ | |||
background: #880000 !important;; | |||
} | |||
#dot-1{ | |||
left: 80%; | |||
background: #880000; | |||
} | |||
#dot-2{ | |||
left: 84%; | |||
} | |||
#dot-3{ | |||
left: 88%; | |||
} | |||
#dot-4{ | |||
left: 92%; | |||
} | |||
#dot-5{ | |||
left: 96%; | |||
} | |||
</style> | |||
<script> | |||
var mousetime = false; | |||
var number_of_slots = 5 | |||
var timer = window.setTimeout(image_fade_forward, 6000); | |||
var which_slot_vis = 1; | |||
function image_fade_forward(){ | |||
if(which_slot_vis == number_of_slots){ | |||
document.getElementById("slot1").classList.add('notransition'); | |||
document.getElementById("slot1").style.opacity = 1 | |||
document.getElementById("slot1").classList.remove('notransition'); | |||
document.getElementById("slot" + which_slot_vis.toString()).style.opacity = 0 | |||
document.getElementById("dot-1").style.background = '#880000' | |||
document.getElementById("dot-" + which_slot_vis.toString()).style.background = 'black' | |||
which_slot_vis = 1 | |||
update_link(which_slot_vis); | |||
}else{ | |||
document.getElementById("slot" + (which_slot_vis+1).toString()).classList.add('notransition'); | |||
document.getElementById("slot" + (which_slot_vis+1).toString()).style.opacity = 1 | |||
document.getElementById("slot" + (which_slot_vis+1).toString()).classList.remove('notransition'); | |||
document.getElementById("slot" + which_slot_vis.toString()).style.opacity = 0 | |||
document.getElementById("dot-" + (which_slot_vis+1).toString()).style.background = '#880000' | |||
document.getElementById("dot-" + which_slot_vis.toString()).style.background = 'black' | |||
which_slot_vis ++; | |||
update_link(which_slot_vis); | |||
} | |||
if( !mousetime){ | |||
window.clearTimeout(timer); | |||
timer = window.setTimeout(image_fade_forward, 6000); | |||
} | |||
} | |||
function image_fade_back(){ | |||
if(which_slot_vis == 1){ | |||
document.getElementById("slot" + number_of_slots.toString()).classList.add('notransition'); | |||
document.getElementById("slot" + number_of_slots.toString()).style.opacity = 1 | |||
document.getElementById("slot" + number_of_slots.toString()).classList.remove('notransition'); | |||
document.getElementById("slot1").style.opacity = 0 | |||
document.getElementById("dot-" + number_of_slots.toString()).style.background = '#880000' | |||
document.getElementById("dot-1").style.background = 'black' | |||
which_slot_vis = number_of_slots | |||
update_link(which_slot_vis); | |||
}else{ | |||
document.getElementById("slot" + (which_slot_vis-1).toString()).classList.add('notransition'); | |||
document.getElementById("slot" + (which_slot_vis-1).toString()).style.opacity = 1 | |||
document.getElementById("slot" + (which_slot_vis-1).toString()).classList.remove('notransition'); | |||
document.getElementById("slot" + which_slot_vis.toString()).style.opacity = 0 | |||
document.getElementById("dot-" + (which_slot_vis-1).toString()).style.background = '#880000' | |||
document.getElementById("dot-" + which_slot_vis.toString()).style.background = 'black' | |||
which_slot_vis --; | |||
update_link(which_slot_vis); | |||
} | |||
if(!mousetime){ | |||
window.clearTimeout(timer); | |||
timer = window.setTimeout(image_fade_forward, 6000); | |||
} | |||
} | |||
function nav_image_fade(clicked_id){ | |||
just_clicked = clicked_id.substr(clicked_id.length - 1); | |||
if (just_clicked == which_slot_vis){ | |||
}else{ | |||
document.getElementById("slot" + just_clicked).classList.add('notransition'); | |||
document.getElementById("slot" + just_clicked).style.opacity = 1; | |||
document.getElementById("slot" + just_clicked).classList.remove('notransition'); | |||
document.getElementById("slot" + (which_slot_vis).toString()).style.opacity = 0 | |||
document.getElementById("dot-" + just_clicked).style.background = '#880000' | |||
document.getElementById("dot-" + (which_slot_vis).toString()).style.background = 'black' | |||
which_slot_vis = parseInt(just_clicked) | |||
update_link(which_slot_vis); | |||
} | |||
if(!mousetime){ | |||
window.clearTimeout(timer); | |||
timer = window.setTimeout(image_fade_forward, 6000); | |||
} | |||
} | |||
function mouseTimeReset(){ | |||
timer = window.setTimeout(image_fade_forward, 6000); | |||
mousetime = false; | |||
} | |||
function mouseTimePause(){ | |||
window.clearTimeout(timer); | |||
mousetime = true | |||
} | |||
function set_first_link(){ | |||
document.getElementById('imagelink').href = "http://energyeducation.ca/encyclopedia/Electrical_generation" | |||
} | |||
function update_link(visible){ | |||
if(visible == 1){ | |||
document.getElementById('imagelink').href = "http://energyeducation.ca/encyclopedia/Electrical_generation" | |||
}else if(visible==2){ | |||
document.getElementById('imagelink').href = "http://energyeducation.ca/encyclopedia/Environmental_impact" | |||
}else if(visible==3){ | |||
document.getElementById('imagelink').href = "http://www.energyeducation.ca/encyclopedia/End_use_energy" | |||
}else if(visible==4){ | |||
document.getElementById('imagelink').href = "http://energyeducation.ca/encyclopedia/Total_final_consumption" | |||
}else if(visible==5){ | |||
document.getElementById('imagelink').href = "http://energyeducation.ca/encyclopedia/Reserve" | |||
} | |||
} | |||
window.onload = set_first_link; | |||
</script> | |||
<div id="images-holder" onmouseover = "mouseTimePause()" onmouseout = "mouseTimeReset()"> | |||
<div class = "button next" id="next-button-1" onclick="image_fade_forward()"> | |||
<span class="arrow"> ›</span> | |||
</div> | |||
<div class = "button previous" id="previous-button-1" onclick="image_fade_back()"> | |||
<span class= "arrow">‹</span> | |||
</div> | |||
<div class = "nav-holder"> | |||
<div class = "navigation" id = "dot-1" onClick="nav_image_fade(this.id)"></div> | |||
<div class = "navigation" id = "dot-2" onClick="nav_image_fade(this.id)"></div> | |||
<div class = "navigation" id = "dot-3" onClick="nav_image_fade(this.id)"></div> | |||
<div class = "navigation" id = "dot-4" onClick="nav_image_fade(this.id)"></div> | |||
<div class = "navigation" id = "dot-5" onClick="nav_image_fade(this.id)"></div> | |||
</div> | |||
<div id="images-slider"> | |||
<a id = "imagelink"> | |||
<div class="image-slot" id="slot1"> | |||
<img src = "http://energyeducation.ca/wiki2develop/images/e/ee/SlideImage1.jpg" id="image1" class="images" /> | |||
<div class = "caption" id="cap1">Different countries get electricity from different sources. Where does your electricity come from?</div> | |||
</div> | |||
<div class="image-slot" id="slot2"> | |||
<img src="http://energyeducation.ca/wiki2develop/images/9/92/SlideImage2.jpg" id="image2" class="images" /> | |||
<div class = "caption" id="cap2"> Energy use impacts the environment. How do different sources of energy impact the environment differently?</div> | |||
</div> | |||
<div class="image-slot" id="slot3"> | |||
<img src="http://energyeducation.ca/wiki2develop/images/8/81/SlideImage3.jpg" id="image3" class="images" /> | |||
<div class = "caption" id="cap3">Consumers in different countries use different types of energy. How is your country different from other countries?</div> | |||
</div> | |||
<div class="image-slot" id="slot4"> | |||
<img src="http://energyeducation.ca/wiki2develop/images/9/9f/SlideImage4.jpg" id="image4" class="images" /> | |||
<div class = "caption" id="cap4">Different sectors require different energy. What uses the most energy in your country?</div> | |||
</div> | |||
<div class="image-slot" id="slot5"> | |||
<img src="http://energyeducation.ca/wiki2develop/images/8/8d/SlideImage5.jpg" id="image5 class="images" /> | |||
<div class = "caption" id="cap5">We've been using fossil fuels for hundreds of years. When will we run out?</div> | |||
</div> | |||
</div> | |||
</a> | |||
</div> | |||
</html> |