Radial cursor with Background Image using JavaScript - javascript

I'm trying to create a radial cursor on a site with a background image.
I currently have two problems:
It currently works with Chrome, but not with Firefox. I receive a parsing error for "background" when it occurs.
On Chrome, sometimes two cursors appear instead of 1 and it appears to be mirrored, which can be seen in this JSFiddle
I'm currently using the following code adopted from here.
How would I go about fixing this? Thanks!
.
CSS:
html {
background: url("blocpartylandscape.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Javascript:
$(function() {
var originalBGplaypen = $("html").css("background"),
x, y, xy, bgWebKit, bgMoz,
lightColor = "rgba(255,255,255,0.75)",
gradientSize = 100;
var originalBG = $('html').css("background");
$('html')
.mousemove(function(e) {
x = e.pageX - this.offsetLeft;
y = e.pageY - this.offsetTop;
xy = x + " " + y;
bgWebKit = "-webkit-gradient(radial, " + xy + ", 0, " + xy + ", 100, from(rgba(255,255,255,0.8)), to(rgba(255,255,255,0.0))), " + originalBG;
bgMoz = "-moz-radial-gradient(" + x + "px " + y + "px 45deg, circle, " + lightColor + " 0%, " + originalBG + " " + gradientSize + "px)";
$(this)
.css({ background: bgWebKit })
.css({ background: bgMoz });
}).mouseleave(function() {
$(this).css({ background: originalBG });
});
});

To make things simpler for Firefox, I added another HTML element. The element is a container around everything in body. I did this so that the html element can have its persistent background image and not be disturbed by the competing radial cursor background (which is also an image). Chrome was okay with sharing the html element for both the background image and the radial cursor, but Firefox was not.
<div class="container">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas in diam vitae elementum. </h1>
</div>
I'm using the newly added container as a canvas on which to display the radial cursor.
.container {
height: 100vh;
}
Now, in your JavaScript, I simply use that new container element to show the radial background.
$(".container")
.css({ background: bgWebKit })
.css({ background: bgMoz });
And then for removing the radial cursor.
.mouseleave(function() {
$(".container").css({ background: originalBG });
});
Firefox also needs an rgb or rgba value instead of whatever your call to background was returning. That value wasn't a valid argument to the radial background, though the following is valid:
bgMoz = "-moz-radial-gradient(" + x + "px " + y + "px 45deg, circle, " + lightColor + " 0%, rgba(255,255,255,0.0) " + gradientSize + "px)";
You may want to refactor a bit more. My main goal was to get things working for you. Below is a demo which works in both Chrome and Firefox.
https://jsfiddle.net/7d17ufm7/

Related

Linear Gradients not working with javascript

I have this, it worked before if I set the background and put the linear gradient inside the data-src, but when I changed it to this so that it would support more browsers, it isn't working anymore. The background gets set to an image but the gradient isn't showing up. The message that gets sent to the console is
linear-gradient(to top, rgba(2, 0, 36, .8) 0%, rgba(0, 0, 0, 0) 100%), url( '/static/images/mountain.jpg');
var url = "url( '" + slide.dataset.src + "')";
slide.style.backgroundImage = url;
if (slide.dataset.type == 'linear') {
var direction = slide.dataset.lindir;
var linstart = slide.dataset.linstart;
var linend = slide.dataset.linend;
var gradient = "linear-gradient(" + direction + ", " + linstart + ", " + linend + ")";
if (!(url == null)) {
gradient += (", " + url);
}
gradient += (";");
console.log(gradient);
slide.style.background = "-moz-" + gradient;
slide.style.background = "-webkit-" + gradient;
slide.style.background = gradient;
}
<div class="content category cursor-hand has-text-centered load" data-type="linear" data-lindir="to top" data-linstart="rgba(2, 0, 36, .8) 0%" data-linend="rgba(0, 0, 0, 0) 100%" data-src="{{ category.url }}">
The root problem is that you don't need the semicolon you are adding because you are setting the style in JavaScript, not adding a style to a stylesheet. I've commented that out below, and you can see that it works.
As others have pointed out, you are also doing your vendor prefixes incorrectly. See Setting vendor-prefixed CSS using javascript for more info on that topic.
Note, though, that support for multiple CSS backgrounds goes back to IE 9, so you probably don't need prefixes at all.
One thing to note is that since you are not setting any other background properties in your JS besides the background-image it would probably be best to use style.backgroundImage throughout instead of switching to style.background. This will let you control the other properties included in the background shorthand in your stylesheet.
var slide = document.querySelector('.slide');
var url = "url( '" + slide.dataset.src + "')";
slide.style.backgroundImage = url;
if (slide.dataset.type == 'linear') {
var direction = slide.dataset.lindir;
var linstart = slide.dataset.linstart;
var linend = slide.dataset.linend;
var gradient = "linear-gradient(" + direction + ", " + linstart + ", " + linend + ")";
if (!(url == null)) {
gradient += (", " + url);
}
//gradient += (";");
console.log(gradient);
slide.style.MozBackground = gradient;
slide.style.WebkitBackground = gradient;
slide.style.background = gradient;
}
.slide {
width: 300px;
height: 300px;
}
<div class="slide content category cursor-hand has-text-centered load" data-type="linear" data-lindir="to top" data-linstart="rgba(2, 0, 36, .8) 0%" data-linend="rgba(0, 0, 0, 0) 100%" data-src="{{ category.url }}"></div>

Creating masked overlay spotlight effect to reveal image

I am trying to create an awesome "reveal" effect on my portfolio page.
Here is an example of what I am trying to visually accomplish with JS and CSS. My example was made using Photoshop.
Here is a JS FIDDLE I found and modified where I get sort of close.. But the spot light is too "hard" and not nearly as elegant as what I had in mind. I want it to feel more like a "glow" instead of a circle.
Does anyone know how to fix it? Any help would be much appreciated. I am open to any suggestions for achieving the effect.
// Create the spotlight
function createSpotlight() {
$('.spotlight').width(spotlightDiameter + 'px')
.height(spotlightDiameter + 'px');
for (var i = 0; i < numSpotlightLayers; i++) {
var layerDiameter = spotlightDiameter + (i * spotlightLayerThickness * 2);
var opacity = 1 - (i / numSpotlightLayers);
$('.spotlight').append('<div class="layer' + i + '"></div>');
$('.spotlight .layer' + i)
.width(layerDiameter + 'px')
.height(layerDiameter + 'px')
.css({borderRadius: (layerDiameter >> 1) + 'px',
opacity: opacity,
zIndex: (numSpotlightLayers - i)});
}
}
So I am going to answer my own question. Shout out and thanks to #Skyline3000 for suggesting the solution in the comment section.
The solution is to create a large div with a radial gradient containing a transparent center. Than you script that div to follow the mouse cursor. Set both the radial gradient div element and the content box "body" to a negative z-index value as to not obstruct page content. You also need to set the div to "Fixed" in the JS as to not create scroll bars when the mouse is near view port edges.
Here is a working fiddle.
https://jsfiddle.net/d4em31n2/16/
Required CSS:
position:fixed;
background: -webkit-radial-gradient(center center, circle cover, rgba(117, 245, 71, 0), rgba(0, 20, 42,1) 4%);
background: radial-gradient(center center, circle cover, rgba(117, 245, 71, 0), rgba(0, 20, 42,1) 100%) 4%);
Required JS:
var img=$('div');
$(document).ready(function(e) {
$(document).mousemove(function(e) {
var positionLeft = e.clientX - img.width()/2;
var positionTop = e.clientY - img.height()/2;
img.css({'position': 'fixed', 'left': positionLeft, 'top': positionTop});
mousePositionValueDiv.text(e.clientX+', '+e.clientY);
});
});

Multiple Transforms on mousemove jquery

Probably an easy fix, but for the life of me I can't figure it out or may be overthinking it. In short I have a div that rotatesY based on mousemove. I have that working, but I also need it to translate across the X axis as well. So I know I have to use transform: translateX(value), but not sure how to apply two transforms the best way in jquery. Thanks for the help. Fiddle link below.
Also is there a way to change the rotationY directions?
var $window = $(window),
$box = $('#box')
rotation = 0;
$window.on('mousemove', function(event){
rotation = (event.pageX/$window.width()*90) - 45;
$box.css('transform', 'perspective( 600px ) rotateY(' + rotation + 'deg)');
});
#box{
width: 300px;
height: 300px;
margin: 30px auto;
background: #aaa;
}
<div id="box"></div>
http://jsfiddle.net/6gbhfxrx/
Just apply it at the same time:
var $window = $(window),
$box = $('#box');
$window.on('mousemove', function(event){
var rotation = (event.pageX/$window.width()*90) - 45;
var transX= (event.pageX/$window.width()*500) - 250;
$box.css('transform', 'perspective( 600px ) rotateY(' + rotation + 'deg) translateX(' + transX + 'px)');
});
Here's a fiddle: http://jsfiddle.net/6gbhfxrx/2/

How to get the exact div positioning using jquery/javascript

I am trying to calculate the div positioning. This is my code .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
.content {width: 60%;
position: relative;
text-align: center ;
top: 150px;
left:300px;
right:450px; border-style: solid;
border-width: 5px;
}
</style>
</head>
<body>
<div class="content">
Testings content
</div>
<script>
function ReadDivPos() {
var content = document.getElementsByClassName('content');
for (i = 0; i < content.length; i++) {
console.log("Top " + content[i].getBoundingClientRect().top) //top
console.log("left " + content[i].getBoundingClientRect().left) //left
console.log("right " + content[i].getBoundingClientRect().right) //right
console.log("offsetWidth " + content[i].offsetWidth); //width
}
var _divPos = "LEft "+content[0].getBoundingClientRect().left + ",Width " + content[0].offsetWidth + ",Avail Width " + window.screen.availWidth + ",Right " + content[0].getBoundingClientRect().right;
return _divPos;
}
console.log(ReadDivPos());
</script>
</body>
</html>
This code works fine when the page is not resized but when the page is resized and horizontal scroll bar appears on the screen then it doesnot work fine. How can i get the exact positions of the div if the page is resized or not. For example these are the images i have captured to explain the problem .
When the page is resized and scroll bar is at the extreme right then left positioning of div shows 208px which is wrong and it should be 311 px .
When i move the scroller on the left and then i calculated the width using Chrome MeasureIT add on then it says 311px.
I want to get the exact positioning of the div.I am using class of the div to get the positioning as i am not using div id and i only had to use the class so this is how i have done it but it is not working when the page is resized. Any help?
Since you already have jQuery loading in the page, take a look at the jQuery offset() and position() methods and leverage jQuery selectors.
<script>
function ReadDivPos(selector) {
var _divPos = "";
$(selector).each(function() {
var p = $(this).offset();
var w = $(this).width();
console.log("Top " + p.top) //top
console.log("left " + p.left) //left
console.log("right " + p.left + w) //right
console.log("offsetWidth " + w); //width
_divPos += "Left " + p.left + ",Width " + w + ",Avail Width " + window.screen.availWidth + ",Right " + (p.left + w) + "\\n";
});
return _divPos;
}
console.log(ReadDivPos(".content"));
</script>

Subtract Display Pixels from Mouse Position

Full code can be viewed on JSBin - http://jsbin.com/inibAya/1/edit
So I'm working on a wysiwyg website designer and I added a crosshair to show the corrinates the mouse position is within the canvas. (NOTE: a div acts as the canvas not a html5 canvas element)
The div#canvas is positioned at...
#canvas {
position: absolute;
top:0; left:44px; right:291px; bottom:16px;
overflow: auto;
}
Whatever calculation I tried to remove the 44px from the canvas's display I got NaN or undefined. When the user moves their mouse I want it to start at 0 from the top left and move onwards. Does anyone know of anyway to get this to work?
Here's my JQuery/JavaScript:
// Crosshair
var cH = $('#crosshair-h'), cV = $('#crosshair-v');
$('#canvas').mousemove(function(e) {
cH.css('top', e.pageY);
cV.css('left', e.pageX);
$('#mousepos').text( "X: " + e.pageX + "px, Y: " + e.pageY + "px");
});
From e.pageX's documentation:
Description: The mouse position relative to the left edge of the document.
You will need to account for your canvas's offset (of 44px) to solve your problem.
var canvasPosition = $(canvas).position();
$(canvas).on('mousemove', function(e) {
var x = e.pageX - canvasPosition.left;
var y = e.pageY - canvasPosition.top;
cH.css('top', e.pageY);
cV.css('left', e.pageX);
$('#mousepos').text( "X: " + x + "px, Y: " + y + "px");
});
JSBin.

Categories

Resources