In this code below I use clip path and the mouse to create a flashlight effect with your mouse and you can use it to look around an image and this works perfectly fine.
However I'm wondering how to create a JavaScript function to stop this happening and just display the whole image without the flashlight effect. This would be attached to the button turn on light.
I have tried and the closest I've got is that it shows the image fine but goes back to the flashlight after I move the mouse.
Any code on how to stop this and a bit of explanation how its stoping the effect would be great
So I want the flashlight effect to stop working when I click the button
<html>
<head>
<style>
.image {
width:600px;
height:400px;
border:5px solid black;
cursor:none;
}
.image .torch {
width:600px;
height:400px;
background:url("back.jpg") center no-repeat;
background-size:cover;
clip-path:circle(30% at 0% 0%);
}
</style>
<script>
function moveTorch(event){
var torch = document.getElementsByClassName("torch")[0];
torch.style.clipPath = `circle(30% at ${event.offsetX}px ${event.offsetY}px)`;
}
function turnOn(){
}
</script>
</head>
<body>
<div class="image" onmousemove="moveTorch(event)">
<div class="torch">
<button onclick="turnOn();">Turn on Light</button>
></div>
</div>
</body>
</html>
Try this code:
<html>
<head>
<style>
.image {
width:600px;
height:400px;
border:5px solid black;
cursor:none;
}
.image .torch {
width:600px;
height:400px;
background:url("back.jpg") center no-repeat;
background-size:cover;
clip-path:circle(30% at 0% 0%);
}
</style>
<script>
var flashLightOn = false;
function moveTorch(event){
if (!flashLightOn) {
var torch = document.getElementsByClassName("torch")[0];
torch.style.clipPath = `circle(30% at ${event.offsetX}px ${event.offsetY}px)`;
}
}
function turnOn(){
flashLightOn = true;
var torch = document.getElementsByClassName("torch")[0];
torch.style.clipPath = "none";
}
</script>
</head>
<body>
<div class="image" onmousemove="moveTorch(event)">
<div class="torch">
<button onclick="turnOn();">Turn on Light</button>
>
</div>
</div>
</body>
</html>
Basically it stores the flash liste state (on/off) in a variable. When on, the event that makes the flash light effect does nothing (if flashLightOn statement).
When you click on the button, the flashLightOn value is set to false, and the style of the "torch" is reset to default to disable the light effect.
Related
I am having is trying to have a grey background, but with text over top of it rather than before or after the grey square.
Here is my code, an HTML document with JS and CSS integrated:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/* Change svg background color. */
.area {
background-color: #75738a;
}
</style>
</head>
<body>
<svg width="2000px" height="2000px" class="area">
<script>
write("Power up to the top");
</script>
</svg>
<script>
// start game "press any to continue"
document.addEventListener('keypress', (event) => {
}, false);
</script>
</body>
</html>
Previously, I was drawing a square and expecting to be able to put text on it. I realized instead of setting it to print a square, I needed to set the background image in HTML, and use CSS to center and fullscreen it.
<body>
<img src="gymbackground.jpg" id="bg" alt="">
<body>
HTML^
<style>
#bg {
position: fixed;
top: 0;
left: 0;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
}
</style>
CSS within HTML^
The main idea is to obtain the UI design of the Canva website homepage. Here's the link: https://www.canva.com/en_in/
Steps that I followed:
I found no way to blur a background image, so I inserted an image within a <div> with an id="background".
And then modified the CSS of it as:
#background{
position:absolute;
top:0;
left:0;
z-index:-1;
}
Now I'll blur the image so that, when I hover my mouse over it, that particular part gets clear.
Obviously, when I hover over it, the entire image gets clear.
But the goal is to clear the area where the mouse pointer overs at.
I guess, we should make use of the Mouse event ClientX property to get the position of the mouse pointer and clear that particular co- ordinate.
But I'm clueless on how to code it.
https://github.com/thdoan/magnify
A simple way would to use magnify to zoom over the already blurred image.
$(document).ready(function() {
$('.zoom').magnify();
});
img {
-webkit-filter: blur(10px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnify/2.3.0/js/jquery.magnify.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnify/2.3.0/css/magnify.css" rel="stylesheet"/>
<img src="http://via.placeholder.com/350x150" class="zoom" data-magnify-src="http://via.placeholder.com/350x150">
Here is a pure JS solution that rely on clip-path and CSS variables, the idea is to duplicate the images to have one blurred and one not. Then we reveal the non-blurred one on the top:
var image =document.querySelector('.blur');
var p= image.getBoundingClientRect();
document.body.onmousemove = function(e) {
/*Adjust the clip-path*/
image.style.setProperty('--x',(e.clientX-p.top)+'px');
image.style.setProperty('--y',(e.clientY-p.left)+'px');
}
.blur {
display:inline-block;
width:400px;
height:200px;
position:relative;
}
.blur:before,
.blur:after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:var(--i);
}
.blur:before {
filter:blur(5px) grayscale(60%);
}
.blur:after {
clip-path: circle(60px at var(--x,-40px) var(--y,-40px));
}
<div class="blur" style="--i:url(https://picsum.photos/400/200?image=1069)">
</div>
With this solution you can easily do the oppsite if you want to blur a part of the image on hover:
var image =document.querySelector('.blur');
var p= image.getBoundingClientRect();
document.body.onmousemove = function(e) {
/*Adjust the clip-path*/
image.style.setProperty('--x',(e.clientX-p.top)+'px');
image.style.setProperty('--y',(e.clientY-p.left)+'px');
}
.blur {
display:inline-block;
margin:50px;
width:200px;
height:200px;
position:relative;
}
.blur:before,
.blur:after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:var(--i);
}
.blur:after {
filter:blur(5px);
}
.blur:after {
clip-path: circle(60px at var(--x,-40px) var(--y,-40px));
}
<div class="blur" style="--i:url(https://picsum.photos/200/200?image=1069)">
</div>
Currently I have this piece of code running a canvas animation that shows subtle stars moving and sparkling. Currently the canvas is it's own element but I'm wanting to move it to be a background element on a parent div. Can anybody show me how to do this. JS fiddle attached here - https://jsfiddle.net/83aahcng/
<div id="container">
<canvas id="pixie"></canvas>
</div>
I would just put a div over pixie like this... div over pixie.
HTML:
<div id="container">
<div id="over_stuff">
Here's some stuff over #pixie!
</div>
<canvas id="pixie"></canvas>
</div>
CSS:
#container {
overflow:hidden;
position:relative;
z-index: 1;
}
#pixie {
z-index:0;
background:#010222;
background:
}
#over_stuff{
color:white;
position:absolute;
top:0px;
left:0px;
z-index:5;
padding:10px;
}
Is there is something I'm not understanding? This seems way too simple
I've got a piece of javascript that launches an entire page cover on launch of the page and two divs 'dialog' and 'dialog2' that open on top of the cover. so it's like having a blacked out background with a notification.
The problem i'm getting is i want the 'cover' background to be transparent / have an opacity, and it does, but for some reason this is also causing the 'dialog' and 'dialog2' div backgrounds to be transparent, and i don't want this to happen and i'm not sure why this is happening?
Can someone tell me what i'm doing wrong please.
<script type="text/javascript">
window.onload = function showPopUp(el) {
var cvr = document.getElementById("cover")
var dlg = document.getElementById("dialog")
cvr.style.display = "block"
dlg.style.display = "block"
if (document.body.style.overflow = "hidden") {
cvr.style.width = "1024"
cvr.style.height = "100%"
}
}
</script>
<style type="text/css">
#cover {
display:none;
position:absolute;
z-index:98;
left:0px;
top:0px;
width:100%;
height:2648px;
background-color:#fff;
filter:alpha(Opacity=50);
opacity:0.7;
-moz-opacity:0.7;
-khtml-opacity:0.7;
overflow:hidden;
}
#dialog {
background-image: url(http://www.playtimeboys.com/img/packages/account1.png);
background-repeat: no-repeat;
background-size:311px 187px;
height:187px;
width:311px;
margin-top:300px;
margin-left:650px;
z-index: 99;
position:fixed;
}
#dialog2 {
background-image: url(http://www.playtimeboys.com/img/packages/account1.png);
background-repeat: no-repeat;
background-size:311px 187px;
height:187px;
width:311px;
margin-top:300px;
margin-left:230px;
z-index: 99;
position:fixed;
}
</style>
</head>
<div id="cover">
<div id="dialog">
</div>
<div id="dialog2">
</div>
<div class="foo"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
//To switch directions up/down and left/right just place a "-" in front of the top/left attribute
//Vertical Sliding
//Caption Sliding (Partially Hidden to Visible)
$('.boxgrid.caption').hover(function(){
$(".cover", this).stop().animate({top:'-38px'},{queue:false,duration:200});
}, function() {
$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:200});
});
});
</script>
The CSS opacity effects everything and all the tags inside of it. You have to separate the cover from the dialogs. like this:
<div id="cover"></div>
<div id="dialog">
</div>
<div id="dialog2">
</div>
<div class="foo"></div>
Instead of using opacity, you can use the rgba color format:
#cover {
....
background: rgba(255, 255, 255, 0.7);
....
}
That should solve your problem without messing with HTML.
Put
<div id="dialog">
</div>
<div id="dialog2">
</div>
Outside of
<div id="cover">
Or, put in css #dialog1 and #dialog2:
filter:alpha(Opacity=100);
opacity:1;
-moz-opacity:1;
-khtml-opacity:1;
Hope it helps :)
I'm trying to make an image appear when you roll over text on the bottom right side of the screen. How do I get it down there for all screen widths and heights?
you can use fixed positioning on the image and assign the left,top, right or bottom attributes to suit your needs see: http://www.w3schools.com/css/css_positioning.asp for an example
This'll work:
<style type="text/css">
img.floating {
position: absolute;
bottom: 0px;
left: 0px;
}
</style>
<img class="floating" src="url to image" />
:hover doesn't work for IE6 unless it's being used on a link. Use this.
<style type="text/css">
#myFavoriteFooterImage {
bottom:0px;
right:0px;
position:fixed;
display:none;
}
</style>
<script type="javascript">
document.getElementById("mousyTextFunTime").onmouseover = function(){
document.getElementById("myFavoriteFooterImage").style.display = "";
};
document.getElementById("mousyTextFunTime").onmouseout = function(){
document.getElementById("myFavoriteFooterImage").style.display = "none";
};
</script>
<div id="mousyTextFunTime">Text to mouse over</div>
<img id="myFavoriteFooterImage" />
Create a CSS style for :hover on the text.
<style type="text/css">
#bottom { display:none; }
#text:hover #bottom {
display:block;
position:absolute;
left:0; // how far from the left
bottom:0;
}
</style>
<div id="text>TEXT</div>
<img src="bottomimage.jpg" id="bottom">