I tried to do an overlay for images, but I have 2 problems:
$(document).ready(function () {
$('#boximmagini img').click(function(){
$("#immagine img:last-child").remove()
var source= $(this).attr('src');
$('#immagine').append("<img src="+source+"/>")
$('#overlay').fadeIn('fast');
$('#box').fadeIn('slow');
});
$(".chiudi").click(function(){
$('#overlay').fadeOut('fast');
$('#box').hide();
});
$("#overlay").click(function(){
$(this).fadeOut('fast');
$('#box').hide();
});
});
.chiudi{
cursor:pointer;
}
.overlay{
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
z-index:100;
cursor:pointer;
}
#box{
width:600px;
height:400px;
display:none;
z-index:+300;
position:absolute;
left:30%;
top:20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="overlay" id="overlay" style="display:none"></div>
<div id="box">
<div class="chiudi">CHIUDI</div><br>
<div id="immagine"></div>
</div>
<div id="boximmagini">
<div><b>Clicca</b></div>
<img src="http://i62.tinypic.com/icpph2.jpg" class="imgoverlay" style="width: 31%" />
</div>
PROBLEMS:
I don't know how position #box in middle of screen. With left: 30% it isn't in the middle of screen. I have read other question where a lot of user suggest to use a div with position relative and inside it a div with position absolute. But in my case i think that is not possible.
when the box fadein, and i resize the window, the box is "out" window (the cause is left property)
I hope that you can help me!
Sorry for my english
Thanks!
I this fiddle I set both your changing color and making sure it is always in the middle, setting left:50% and translate3d -50% will always set it to the center because of the position absolute, if you want also vertical positioning do the same for top and -50% to the y (2nd parameter): http://jsfiddle.net/whb3mpg4/7/
#box{
width:600px;
height:400px;
display:none;
z-index: 300;
position:absolute;
top:20%;
left:50%;
transform: translate3d(-50%,0,0);
}
#box img{
position:absolute;
left:50%;
transform: translate3d(-50%,0,0);
}
I know I could use same CSS class for both but I wanted to keep it clear and not changing the JS or the CSS defenitions
Hope this helped you.
Related
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>
I have created div and place it right margin of the page with position:fixed. I need to place the div to bottom margin when I call the JavaScript function. I tried to use classList.add() and classList.remove() to accomplish my task.
here is the CSS classes I created,
.example-right{
position:fixed;
top:50px;
right:0px;
}
.example-bottom{
position:fixed;
left:50px;
bottom:0px;
}
This is JavaScript code what I tried,
function test(){
document.getElementById('target').classList.remove('example-right');
document.getElementById('target').classList.add('example-bottom');
}
When I trigger the test() function it removes the example-right and replace it with example-bottom. But the div's top value is not going to change after the function is triggered. So, it is not place the div on bottom margin of the window. I can puttop:## px; to example-bottom. But when page is resizing and
Is it possible to Solve this problem using CSS. I know I can use document.getElementById('target').style.top = window.innerHeight- div_Height to change the top value. but I like to know is there any way to do it using css or another method. (otherwise I have to use JavaScript all the times when I need to change the position)
pure CSS and JavaScript only
You . have done right. Only thing is understanding a bit of css more.
.example-right{
position:fixed;
top:50px;
right:0px;
}
.example-bottom{
position:fixed;
top:inital
left:50px;
bottom:0px;
}
add this css
.example-right{
position:fixed;
top:50px;
right:0px;
}
.example-bottom{
position:fixed;
left:50px;
bottom:0px;
top:auto;
}
function test(){
document.getElementById('target').classList.remove('example-right');
document.getElementById('target').classList.add('example-bottom');
}
.example-right{
position:fixed;
top:50px;
right:0px;
}
.example-bottom{
position:fixed;
left:50px;
bottom:0px;
top:auto;
}
#target{
width:200px;
height:200px;
background:red;
}
<div id="target" class="example-right">
</div>
<br/>
<button onclick="test()">Click</button>
I have a very simple parallax example set up but am noticing that changes to window.scrollY are not occurring (it's always 0) when scrolling through my elements. It's as if because we're just moving through a perspective, javascript doesn't detect any scrolling.
How can I detect scroll changes when scrolling through css viewport perspective?
I have my css setup as follows:
* {
margin:0;
padding:0;
}
body {
}
.parallax {
overflow-x:hidden;
overflow-y:auto;
perspective:1px;
height:200vh;
}
.back {
background-color:#fff;
height:100vh;
transform:translateZ(-1px) scale(2);
}
.base {
transform:translateZ(0);
background-color:#fff;
}
.parallax__layer {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
display:block;
}
.title {
text-align:center;
position:absolute;
left:50%;
top:50%;
color:blue;
transform:translate(-50%, -50%);
display:block;
}
And my dom content is:
<div class="parallax">
<div class="parallax__layer back">
<div class="title">test</div>
</div>
<div class="parallax__layer">
<div class="title">image</div>
<div class="frame">
test frame
</div>
</div>
</div>
Since the overflow property is set on .parallax you would check for scrolling on that instead of the window:
$('.parallax').on("scroll", function(){
var scrollPosition = $(this).scrollTop();
});
The key here is to detect scroll within the parallax element -- within a single frame div.
So you might do something like:
const handleScrolling () => if (window.scrollY || window.pageYOffset < totalheight) requestAnimate()
$('.parallax').on('scroll', handleScrolling);
I currently have a mobile website project in which I'm creating panels such that one panel can be viewed at a time, where when a user swipes left or right, the panel slides offscreen and a new panel slides in. Everything works fine on Android, and even behavior is acceptable on iPhone.
However, scrolling on iPhone seems to lack momentum. In other words, when "flicking" the panel up / down, it scrolls on Android natively, but on iPhone it seems to lose momentum very quickly. I'd like to find a simple CSS or combo CSS / JS solution that works, without including additional libraries if possible.
Here's the basic structure of the site:
<html>
<head>Head stuff here</head>
<body>
<div class="container">
<div class="headbox">Fixed position menu here</div>
<div id="pages">
<div class="page">Page panel here</div>
<div class="page">Page panel here</div>
<div class="page">Page panel here</div>
</div>
<div class="bottommenu">Fixed position bottom menu here</div>
</div>
</body>
</html>
Here is the basic CSS:
body {
width:100%;
overflow-x:hidden;
font-size:17px;
border-collapse:collapse;
}
.container {
width:100%;
height:100%;
overflow-x:hidden;
overflow-y:scroll;
position:relative;
/*-webkit-perspective:1000;
-webkit-backface-visibility:hidden;*/
}
.headbox {
font-size:17px;
height:2.3529em;
width:100%;
top:0;
position:fixed;
text-align:center;
color:#fff;
z-index:1;
}
#pages {
width:100%;
height:100%;
white-space:nowrap;
font-size:0;
-webkit-backface-visibility:hidden;
-webkit-transform-style:preserve-3d;
position:relative;
-webkit-transform:translate3d(-100%,0,0);
-moz-transform:translate3d(-100%,0,0);
-ms-transform:translate3d(-100%,0,0);
-o-transform:translate3d(-100%,0,0);
transform:translate3d(-100%,0,0);
}
.page {
width:100%;
height:100%;
display:inline-block;
vertical-align:top;
position:relative;
white-space:normal;
background:#fff;
font-size:17px;
}
.bottommenu {
position:fixed;
bottom:0;
left:0;
width:100%;
height:.2em;
transition:height 400ms;
-webkit-transition:height 400ms;
-moz-transition:height 400ms;
-ms-transition:height 400ms;
-o-transition:height 400ms;
z-index:1;
}
And finally, the listener for scrolling, which shouldn't interfere with CSS or the ability to repaint, but maybe I am missing something:
var that = this;
$(document).scroll(function(){
if (!that.direction && !that.loading) {
that.direction = 'vertical';
that.moving = true;
if (that.scrolling) { clearTimeout(that.scrolling); }
that.scrolling = setTimeout(function() {
that.direction = false;
that.sliding = 0;
that._getMore();
that.moving = false;
},500);
}
});
Any ideas? I've tried numerous variations of -webkit-overflow-scrolling:touch;, overflow-y:scroll;, and other possible hacks / fixes / supported syntax, but nothing seems to help. I need the content to scroll within the body tag so that on iPhone the screen resizes itself on scroll, otherwise I'd use a scrollable div. This is not an option.
I guess problem with loss of native elastic scrolling within container with position: relative; overflow: hidden.
Try -webkit-overflow-scrolling: touch; for .container.
I am trying to drag an element from a container which is an overflow:hidden div. While dragging , the element goes behind the container (looks as if it's behind the screen).The draggable elements should be dragged outside of their container and remain visible once they are outside.
LINK TO THE FIDDLE
Please note that
1)I cannot use the appendTo inside the draggable(Because it'll cause me issues elsewhere)
2)I cannot use helper:clone again for the same reason.
The complete code follows.
HTML
<div id='outer_container'>
<div id = 'inner_container'>
<div class = 'draggable_element'></div>
<div class = 'draggable_element'></div>
<div class = 'draggable_element'></div>
</div>
</div>
CSS
#outer_container
{
background:#ededed;
position:absolute;
top:100px;
left:40px;
width:400px;
height:100px;
overflow:hidden;
}
#inner_container
{
position:absolute;
width:2000px;
height:100px;
top:0px;
left:0px;
background:#ededed;
}
.draggable_element
{
position:relative;
width:90px;
height:80px;
top:10px;
left:20px;
margin-right:50px;
background:#ff9600;
float:left;
}
SCRIPT
$('.draggable_element').draggable();
I am hoping that somebody can point me in the right direction.Thanks!