CSS or Javascript paper folding effect - javascript

I am trying to replicate create and effect where if a user clicks on a div, it will "open up" like a piece of paper that is being unfolded.
I have no clue where to start or what to even look for on google, so any help or links to relevant information would be extremely helpful.
Here is an image of what I want (for the hello text to also unfold with the paper):
Thank you all in advance

HTML
<div class="parentDiv">
<div class="div1"></div>
<div class="div2"></div>
</div>
CSS
div.parentDiv {
width: 200px;
height: 100px;
}
div.div1{
width :100px;
height: 100px;
float:left;
background-color: yellow;
transform: skew(0deg,20deg);
}
div.div2{
width :100px;
height: 100px;
float:left;
background-color: yellow;
transform: skew(0deg,-20deg);
}
You can place text "HELLO" inside parent div with position absolute and center aligned.

Related

html-css make part of a div blur

So, I'm learning HTML and CSS, and here's what I'm trying to do.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.floatdiv {
position: absolute;
display: inline-block;
transform: translateX(50%);
text-align: center;
}
.basediv {
position: relative;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="basediv" id="particle">
<!-- particles lives here -->
<div class="floatdiv"><!-- some content --></div>
</div>
</body>
</html>
I'm using this https://vincentgarreau.com/particles.js/ and this is a minimal example of my actual code. I have some text content in the floatdiv that stays in the middle of the page and over the basediv. Now the basediv has the particles animation. Now what I want to do is to blur the particles animation just below the flaotdiv. I cant blur the floatdiv, that will make the content blurry, also I can't make the basediv blur, that would make the particles blur everywhere. So how do I blur only the background of the floatdiv
Edit: Well, Its maybe confusing, but I actually want, the particles to get blurred when it goes under the floatdiv. Is it possible to do?
it is not possible to ignore child element.
you need to change html markup like this
<div class="basediv" style="position:relative;height:100px;width:100px;">
<div id="particle" style="position:absolute;top:0;left:0;right:0;bottom:0;background-color:red; filter: blur(4px);z-index:-1;"> active particle js</div>
<div class="floatdiv">some text</div>
</div>
This is actually possible if you apply backdrop-filter: blur(4px) and -webkit-backdrop-filter: blur(4px) css property to floatdiv. It will blur everything underneath floatdiv's content while floatdiv's content will remain clear. However, this is not natively supported property on all browsers, in fact it's support is very limited (check the support tables here https://caniuse.com/#feat=css-backdrop-filter).
If I understand the question correctly, there is a way to solve this styling issue.
Instead of blur(), try using box-shadow method, as it would not blur the contents of floatdiv. https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
Here is the example that might be helpful:
.floatDivBlurred{
transform: translateX(50%);
text-align: center;
background-color: green;
height: 100px;
width: 200px;
box-shadow: 0 0 8px 5px green;
}
.floatDivBot{
transform: translateX(50%);
text-align: center;
background-color: green;
height: 100px;
width: 200px;
box-shadow: 0 50px 20px #99ff99;
}
.basediv{
position: relative;
width: 100%;
height: 100%;
}
<body>
<div class="basediv" id="particle"> <!-- particles lives here -->
<div class="floatDivBlurred">
<p><font color="white"> floatDiv blurred </font></p>
</div>
<div class="floatDivBot">
<p><font color="white"> floatDiv bottom blurred/extended </font></p>
</div>
</div>
</body>

how to make a div to be fixed in the layout(container)?

I made an example. How to make that green div to have fixed position in the container?
<div class="container">
<div class="row">
<div class="col-xs-4">hey hou</div>
<div class="col-xs-8">
<div>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br></div>
<div id="fixed">This div should aligned to the left like yellow div and fixed</div>
</div>
</div>
</div>
Please not all elements must stay at same positions as they are now and green div should be fixed!
So it should looks like this:
and when the user scrolls the site:
Please note that this only works on specific dimensions. You will need (a lot) of media queries and/or JavaScript/jQuery to get it working on all window sizes.
You can use translateX to reposition your div.
This is the CSS for the #fixed div:
#fixed {
position: fixed;
top: 100px;
background: green;
width: 100px;
transform: translateX(-265px);
}
Here is the updated JSFiddle
Just change your fixed div to `absolute and position accordingly like this:
#fixed {
position: absolute;
left: -300px;
top: 100px;
background: green;
width: 100px;
}
Here's a jsfiddle with above codes: http://jsfiddle.net/AndrewL32/uLa02c62/2/

Is there a way to make the hover area larger than the image?

I was wondering if there is a way to make the hover area bigger than the image?
For example, I have an image that is 72px x 61px and when I hover over it, it changes to a different image. What I would like to know is if I can hover outside the image but still trigger the change in the image.
Sorry if this is confusing, I tried to post an image but since I just signed up I am not able to.
This is a working example, just hover in the gray colored region
.outer {
border: 1px solid;
padding: 60px;
width: 300px;
background-color: #ddd;
}
.outer:hover>img {
content: url('http://docs.gimp.org/en/images/filters/examples/color-taj-sample-colorize.jpg');
}
<div class="outer">
<img src="http://goo.gl/7VYJyX" />
</div>
Yes. Put it in a container (<div>, <a>, whatever), add padding to the container (to increase the area).
If what you're doing is in JS, attach the hover handler to the container instead of the image.
If you're doing CSS, something like this should be helpful:
.container:hover img{
/* styles for img when .container is hovered*/
}
Is this what you are going for. her is my fiddle https://jsfiddle.net/pdjoh1dy/1/
HTML
<div id="hover-example">
<div id="img-holder">
</div>
</div>
CSS
#hover-example{width: 500px; height: 500px; border-style: solid;}
#img-holder{margin: 25%; width: 50%; height: 50%; background-color: blue;}
#hover-example:hover > #img-holder{
background-color: red;
margin: 10%;
width: 80%;
height: 80%;
}
You could also set the image to display: block and add padding, if it does not mess with your layout.

How to use an image as a frame, and scroll inside? Simulating a phone on a website

I'm not sure what this is called, but how do developers accomplish being able to have, say a hollow image of a Nexus phone, and then scroll content inside of it? It's an ingenious way to simulate how a product will work in real life, so how does one pull this off?
Here's an example, about halfway down the page.
http://grupoweb.upf.edu/innova/q_kly/#step-6
#silversunhunter
I am able to get both images displayed, but the content seems to be completely obscuring the parent div. I measured the images and the dimensions are correct afaik.
css:
.nexus5-frame {
background: url(img/nexus5frame.png);
height:640px;
width:326px;
position: relative;
}
.nexus5-content {
overflow: scroll;
height: 515px;
width: 292px;
position: absolute;
left: 26px;
top 597px;
}
HTML:
<div class="col-lg-5 col-lg-offset-2 col-sm-6">
<div id="nexus5-frame">
<div id="nexus5-content">
<img src="img/content.png"/>
</div>
</div>
</div>
You need to set the image as a background image in the parent div. Then a properly measured div inside that is absolutely positioned can be your scrollable content.
<div id="main">
<div id="content"></div>
</div>
the phone image is 345px × 661px
#main {
background: url(/filelocation) no-repeat;
height: 661px;
width: 345px;
position: relative;
}
the screen is 305x601 (hypothetically)
#content {
overflow: auto; /*this gives us our scroll bar when the content is longer than the div*/
height: 601px;
width: 305px;
position: absolute;
left: 20px;
top: 30px;
}

Get Dimensions of background Image of div in HTML using Jquery or Javascript

AS shown in image I have a [wrapper] div which has background image inside this Image I want to place another div but as the Screen size changes the background image has different dimensions and thus the position of second div must change.
I have tried jquery to get width and height of the background image but it gives out 0,0.
What should I do.
jsfiddle code jsfiddle[dot]net/AFvak/
To my knowledge, there is no facility for querying for that kind of information about a background image. The only solutions I've seen seem to involve just loading in the image by some other means (e.g. with an img tag) and then querying that for the information.
See: How do I get background image size in jQuery?
If the center div should always be centered with a fix height and width then you could try this:
<div class="wrapper">
<div class="inside"></div>
</div>
Styles:
.wrapper {
width: 600px;
height: 500px;
margin: 40px auto 0;
position: relative;
border: 1px solid black;
background: url(image_here.jpg) no-repeat center center;
}
.inside {
top: 50%;
left: 50%;
width: 200px;
height: 100px;
margin-top: -50px; /* height/2 */
margin-left: -100px; /* width/2 */
position: absolute;
background: #000;
}
DEMO
try ..
$backWidth=$(window).width();
$backHeight=$(window).height();
As per my understanding you try to div tag should be on image with fixed position even browser will resized.
Here code:
<div id="wrapper">
<div id="test">
<img src="test.jpg" id="yourimg">
<div id="yourdiv"></div>
<div>
</div>
<style>
#test{
position:relative;
}
#yourimg{
position:absolute;
top:100px;
left:100px;
}
#yourdiv{
position:absolute;
top:120px;
left:120px;
}
</style>

Categories