Web: Animated Clouds - Overflow and Middle Click?
I'm building a website with a "toony" feel and decided that the animated clouds go from left to right. The only problem is that I can click in the middle where there are off-screen clouds. Is there a way to disable middle mouse click or hide the cloud until needed on the screen?
Note: the container already has: overflow: hidden;
This is my current HTML:
<div id="clouds">
<!-- Background Clouds -->
<div class="cloud background medium left-fast" style="top: 2%;"></div>
<div class="cloud background small left-slow" style="left: -5%; top: 20%;"></div>
<div class="cloud background large left-slower" style="top: 7.5%;"></div>
<div class="cloud background small left-slowest" style="left: 14%; top: 18%;"></div>
<!-- Foreground Clouds -->
<div class="cloud medium fast" style="top: 2%;"></div>
<div class="cloud small slow" style="left: 5%; top: 20%;"></div>
<div class="cloud large slower" style="top: 7.5%;"></div>
<div class="cloud small slowest" style="left: -14%; top: 18%;"></div>
</div>
and my current CSS:
/* Clouds container */
#clouds{
width: 100%; height: 20%;
padding: 100px 0;
}
/* General Cloud */
.cloud {
/* General properties of a cloud */
background: url('../images/clouds.png');
position: absolute;
visibility: hidden;
}
/* Background Clouds */
.cloud.background.small {
/* Appearance */
background-position: -23px -194px;
width: 250px; height: 85px;
}
.cloud.background.medium {
/* Appearance */
background-position: -666px -149px;
width: 279px; height: 119px;
}
.cloud.background.large {
background-position: -543px -329px;
width: 360px; height: 149px;
}
/* Foreground clouds */
.cloud.small {
background-position: -321px -24px;
width: 246px; height: 91px;
}
.cloud.medium {
/* Appearance */
background-position: -628px -18px;
width: 312px; height: 81px;
}
.cloud.large {
/* Appearance */
background-position: -27px -22px;
width: 259px; height: 104px;
}
/* Background Cloud Animations and Speeds */
.cloud.left-fast {
/* Fast animation */
-webkit-animation: cloudMovementBackground 40s linear infinite;
-moz-animation: cloudMovementBackground 40s linear infinite;
}
.cloud.left-slow {
/* Slow animation */
-webkit-animation: cloudMovementBackground 40s linear 3s infinite;
-moz-animation: cloudMovementBackground 40s linear 3s infinite;
}
.cloud.left-slower {
/* Slower animation */
-webkit-animation: cloudMovementBackground 40s linear 7s infinite;
-moz-animation: cloudMovementBackground 40s linear 7s infinite;
}
.cloud.left-slowest {
/* Slowest animation */
-webkit-animation: cloudMovementBackground 40s linear 12s infinite;
-moz-animation: cloudMovementBackground 40s linear 12s infinite;
}
/* Foreground Cloud Animations and Speeds */
.cloud.fast {
/* Fast animation */
-webkit-animation: cloudMovement 40s linear infinite;
-moz-animation: cloudMovement 40s linear infinite;
}
.cloud.slow {
/* Slow animation */
-webkit-animation: cloudMovement 40s linear 3s infinite;
-moz-animation: cloudMovement 40s linear 3s infinite;
}
.cloud.slower {
/* Slower animation */
-webkit-animation: cloudMovement 40s linear 7s infinite;
-moz-animation: cloudMovement 40s linear 7s infinite;
}
.cloud.slowest {
/* Slowest animation */
-webkit-animation: cloudMovement 40s linear 12s infinite;
-moz-animation: cloudMovement 40s linear 12s infinite;
}
/* Animations */
@-webkit-keyframes cloudMovement {
0% {
margin-left: -30%;
visibility: visible;
}
100% {
margin-left: 110%;
}
}
@-moz-keyframes cloudMovement {
0% {
margin-left: -30%;
visibility: visible;
}
100% {
margin-left: 110%;
}
}
@-webkit-keyframes cloudMovementBackground {
0% {
margin-left: 110%;
}
5% {
visibility: visible;
}
100% {
margin-left: -50%;
}
}
@-moz-keyframes cloudMovementBackground {
0% {
margin-left: 110%;
}
8% {
visibility: visible;
}
100% {
margin-left: -50%;
}
}
Thanks for the help!:)
source to share
Use both of the suggested approaches to get started. However, I'm going to help you with the second suggestion. You can use a Java script to disable pretty much any standard behavior. The key to this is function [preventDefault][1]
.
Here's an example that might work for you. (You have to add it to the html page in the header section)
<script>
window.addEventListener('click', function(e) {
if (e.button === 1){
e.preventDefault();
}
}, true);
</script>
This should capture any average clicks, including the scroll wheel. In some browsers it is still possible to scroll using the left or right button.
It is also possible to use the css property overflow-x. If you set overflow-x: hidden on a div containing clouds it should not render outside of the page. You can also set the div to be fixed so that the clouds don't scroll when scrolling down.
#id {
overflow-x:hidden;
width: 100%;
height: 100%;
position: fixed;
display: block;
top: 0;
left: 0;
}
I hope this works for you.
source to share