If you open google chrome and open multiple tabs, you see the effect by hovering over a background tab. The pointer will have an "aura" effect which follows it around.
To clarify, I'm NOT asking how to make the entire tab glow a lighter color, I'm asking how to give the pointer the effect within some specified radius of it.
The key part is to get the mouse coordinates, then to place a radial gradient with those coordinates.
var originalBG = $(".nav a").css("background-color");
$('.nav li:not(".active") a').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
});
});
Something like that will do the job.
Check this demo from the illustrious Chris Coyier: http://css-tricks.com/examples/MovingHighlight/
some ideas --
use javascript to place an absolutely positioned semitransparent png under the cursor position
create a .cur file with your own cursor and some semi-transparent glow under it and hope the browser can render it
replace the entire cursor with javascript
Why has nobody thought to mention CSS3 transitions? With CSS3 you can create this effect with pure css, no flash or javascript needed.
Here's a simple example for ya :D
#auraThingy{
height:50px;
width:200px;
background:blue;
transistion:background 3s;
-webkit-transition:background 3s; /*safari/chrome*/
-moz-transition:background 3s; /*firefox*/
-o-transition:background 3s; /*opera*/
}
#auraThingy:hover{
background:lightblue;
}
I found a nice link with info here http://www.w3schools.com/css3/css3_transitions.asp
Edit[ Just realized I should of read your entire post before answering, my bad ^-^
You could probably still use the transition with a gradient image, and on hover update the background image coordinates with the mouse position :/
$('some_element').hover(function(){
$(this).css('opacity','.5');
},function(){
$(this).css('opacity','.2');
});
Something like that.
Fiddle: http://jsfiddle.net/maniator/Sf92n/
Related
folks I want to make a demo design of this and I got confused how to achieve this. should I go for parallax scrolling or should I prefer skrollr or scrollmagic or just simple css with few jquery code? suggest the simplest way to achieve this.
Thanks :)
Here is working example;
Html
<div class="rotate"></div>
Css
body{
height: 1000px;
background: yellow;
}
.rotate{
background: url("http://i.imgur.com/zZ3fMuh.png");
width: 101px;
height: 102px;
position: fixed;
}
Js
$(function() {
var rotation = 0,
scrollLoc = $(document).scrollTop();
$(window).scroll(function() {
var newLoc = $(document).scrollTop();
var diff = scrollLoc - newLoc;
rotation += diff, scrollLoc = newLoc;
var rotationStr = "rotate(" + rotation + "deg)";
$(".rotate").css({
"-webkit-transform": rotationStr,
"-moz-transform": rotationStr,
"transform": rotationStr
});
});
})
In this particular case they used CSS with the help of JavaScript but the part what you are watching at is CSS (really fluent) and it get executed my an scroll handler.
In this specific case they used the transform: translate3d() property to rotate the yellow background.
If you want to rotate the background when scrolling, look this: https://codepen.io/sarkiroka/pen/gByRmd
In nutshell it uses the sidebar elements for this effect. This elements has :before property with background setting, and a little javascript calculate the rotating degree from the scrollTop. And this javascript overwrite the defined css rule transform property.
I have a div with class box1 and it has following css properties(I've given a background image of a random pic from the web)
.box1{
height:600px;
width:600px;
position:absolute;
background-position:center center;
background-size:150%;
top:0;
left:0;
background-image:url(http://www.slx-photographic.co.uk/wp-content/uploads/2014/03/Photography-Camera-HD-Wallpaper1.jpg);
}
The question is HOW DO I MOVE THE BACKGROUND with movement of mouse using mousemove(); method of jquery? as of now I've come this far with JQUERY and I can't seem to get it to work
$(document).ready(function(){
$(document).mousemove(function(e){
var x = e.pageX;
var y = e.pageY;
$(".box1").css({
' background-position':' x/2 +"20px" , y/2 + "20px" '
});
});
});
I am trying to change the background position related to movement of mouse so it will be helpful if somebody could explain it if this is not how you do it..
You are having the quotes in jquery css method incorrectly. It should be like:
$(".box1").css({
"background-position": x/2 + "20px ," + y/2 + "20px"
});
Also you'd need to callibrate your x and y to distances from left of box1 and top box1 repectively. You could subract box1's positions. This might be what you want: https://codepen.io/chrisboon27/pen/rEDIC
I'm trying to change the color of a gradient background in kind of a trippy manner (The colors are going to be weird)
I wrote the code below but i dont understand why I cant change the background color at all.
var start1 = [0,216,255];
var start2 = [50,255,224];
setInterval(function (){
$("body").css("background", "-webkit-gradient(linear, 0% 0%, 100% 0%, from(rgb("+start1[0]+", "+start1[1]+", "+start1[2]+")), to(rgb("+start2[0]+", "+start2[1]+", "+start2[2]+")));");
start1[0] = checknumber(start1[0]+1);
start1[1] = checknumber(start1[1]+1);
start1[2] = checknumber(start1[2]+1);
start2[0] = checknumber(start1[0]+1);
start2[1] = checknumber(start1[1]+1);
start2[2] = checknumber(start1[2]+1);
},100);
I dont get any errors and the background only stays white. I'm guessing it's going to be a little more complicated than I imagined
The the checknumber() function just checks if the number is greater than 255- if it is then it resets back at 0.
Are you looking for something like this:
http://jsfiddle.net/4nuhpmov/
The issue was your CSS syntax, I think you may have been using an old reference.
I changed the CSS manipulation JavaScript as follows:
$("body").css("background",
"linear-gradient(" + degrees + "deg, rgba(" + start1[0] + ", " + start1[1] + ", " + start1[2] + ", 1), rgba(" + start2[0] + ", " + start2[1] + ", " + start2[2] + ", 1))");
I also added a counter for degrees.
This is probably not the best way to do this but it should get you started (I don't think it's as trippy/crazy as you expected but you can play around with the values).
You can use the following link to find the most up-to-date syntax:
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
I'm currently using ScrollReveal.js to make a bunch of tiny pixelated boxes do random things when scrolled upon, with the following code:
var index=0;
$(document).ready(function(){
jQuery('.pixel-box').each(function() { //each tiny box has class pixel-box
var directions =[ 'left', 'right', 'top', 'bottom']
index += 1
var currentElement = $(this);
var randEffect = getRandomInt(0,1);
var randTime = getRandomArbitrary(1, 3.5);
var randDirection = getRandomInt(0,3);
if(randEffect == 0){
var rand = getRandomInt(-360, 360);
$(this).attr('data-sr', 'wait .5s, enter ' + directions[randDirection] + ', flip ' + rand + 'deg, over '+ randTime +'s');
}
else if(randEffect == 1){
// move 24px
var rand = getRandomInt(10, 120);
$(this).attr('data-sr', 'wait .5s, enter ' + directions[randDirection] +', move '+ rand + 'px, over '+ randTime +'s');
}
if(index == 81){
window.sr = new scrollReveal();
}
});
});
It's working perfectly on Chrome, but on Safari, the behavior is extremely clunky and not what I want. Would you or anyone else have any insights as to why this is happening?
To illustrate, here's what it looks like on Chrome:
https://gyazo.com/4f51ff8279cf5a76ad3ab38a680ae2af
Here's what it looks like on Safari:
https://gyazo.com/8c30e489a2470ac415da3dde1d95d4ef
For reference, one of these boxes is being rendered using the HTML code:
<rect class="pixel-box" id="Rectangle-167-Copy-7" fill="#FDD93D" filter="url(#filter-35)" x="823.65422" y="188.994877" width="16.675" height="19.0983607"></rect>
I suspect that the problem may be due to inconsistencies with CSS transformations and SVG elements like <rect> and <path> across different browsers, but I haven't been coming up with much.
Looks like a browser issue with Safari animating opacity and transforms at the same time.
...we came across a particularly frustrating bug in Safari involving
animation of SVG elements using CSS3 transforms and opacity
simultaneously.
Safari will not animate both attributes at the same time, instead
choosing to animate the opacity with the correct timings and when that
animation is complete the transform jumps to its correct position, or
the translation is just ignored completely.
Reference: https://www.theparticlelab.com/safari-svg-animation-bug/
Looks like others have had similar problems in the past, but the browser bug appears fixed.
I'm new here, so I can't comment/follow-up yet on another question that PARTIALLY provided an answer
for what I'm trying to achieve.
On this question here [Moving Background image in a loop from left to right the fantastic and very detailed answer by Jack Pattishall Jr lets me set the page background to scroll either vertically OR horizontally.
Is there any way to combine the directional code, so that the page background scrolls diagonally
(i.e. bottom left to top right)?
I've been "mutilating" Jack's code for days now, but can't figure out how to make the background scroll in 2 directions simultaneously. :-(
http://jsfiddle.net/f5WjJ/2/
updates the fiddle from Jack Pattishall Jr to update both x AND y parameters. Also set the repeat CSS to both x AND y as well.
$(function(){
var x = 0;
var y = 0;//here
setInterval(function(){
x+=1;
y-=1;//here
$('body').css('background-position', x + 'px ' + y + 'px');//here too
}, 10);
})
background-repeat: repeat;/*and also here*/
Starting from the example mentioned above, here are my changes:
html, body { height: 100%; width: 100%;}
body {
background-image: url('http://coloradoellie.files.wordpress.com/2013/10/25280-ginger-kitten-leaping-with-arms-outstretched-white-background.jpg?w=300&h=222');
background-repeat: repeat-x repeat-y; // this line could be removed entirely
}
$(function(){
var x = 0;
var y = 0;
setInterval(function(){
x+=1;
y-=1;
$('body').css('background-position', x + 'px ' + y + 'px');
}, 10);
})
Brief description of changes:
Add repeat-y to background-repeat or remove the line (we have replicated the default behavior)
Instantiate and initialize a y-position variable
Move additively on the x-axis and negatively on the y-axis to get the background to move in the desired direction
Edit the $('body') css to include the new non-static y-position
Thanks for the advice, Joseph Neathawk