Simple CSS add remove classes with JQuery
<script>
$('#register').click(function() {
$('#boxcontt').addClass("slideOut");
$('#boxcontt').removeClass("slideDown");
$('#regform').addClass("slideDown");
$('#regform').removeClass("slideOut");
$('#forgetform').removeClass("slideDown");
});
</script>
Getting random background colors with JQuery
JQuery getting random background colors with CSS
<script>
$(document).ready(function() {
window.setInterval(function() {
$(".tile5").each(function() {
$(this).css("background", get_random_color());
});
}, 3000);
window.setInterval(function() {
$(".tile12").each(function() {
$(this).css("background", get_random_color());
});
}, 4000);
});
function get_random_color() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++) {
// color += letters[Math.round(Math.random() * 15)];
color += letters[Math.round(Math.random() * 15)];
}
return color;
}
</script>
<script>
$(document).ready(function() {
window.setInterval(function() {
$(".tile5").each(function() {
$(this).css("background", get_random_color());
});
}, 3000);
window.setInterval(function() {
$(".tile12").each(function() {
$(this).css("background", get_random_color());
});
}, 4000);
});
function get_random_color() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++) {
// color += letters[Math.round(Math.random() * 15)];
color += letters[Math.round(Math.random() * 15)];
}
return color;
}
</script>
Move Background Image on Hover mouse move
Move Background image X Y axis on mouse move or hove on a div or entire body and html page (Simple Parallax)
<script>
$('html,body').mousemove(function(e){
var amountMovedX = (e.pageX * -1 / 5);
var amountMovedY = (e.pageY * -1 / 1000);
$(this).css('background-position', amountMovedX + 'px ' + amountMovedY + 'px');
});
</script>
<script>
$('html,body').mousemove(function(e){
var amountMovedX = (e.pageX * -1 / 5);
var amountMovedY = (e.pageY * -1 / 1000);
$(this).css('background-position', amountMovedX + 'px ' + amountMovedY + 'px');
});
</script>
Subscribe to:
Posts (Atom)