Since a week I try to open a box with html5 css3 and some javascript.
The final result should be in the first step (button1) "open the box" (like a package) the second should be the "unfolding effect".
It work almost close in this example:
http://jsfiddle.net/Rases/wprt40nr/
<div id="cube">
<figure class="front">Cover</figure>
<figure class="top">TOP!</figure>
<figure class="back">Back</figure>
<figure class="right">R1</figure>
<figure class="right2">R2</figure>
<figure class="left">Left1</figure>
<figure class="left2">Left2</figure>
<figure class="bottom">Bottom</figure>
</div>
but as i learned some parts are not really connected. That's the reason why it's overlap to the step3
So I connected the parts in each other and replace the figure with div tags as you see here.: http://jsfiddle.net/Rases/71gy2qu9/
<div id="cube">
<div class="top">TOP! <div class="front">Cover</div></div>
<div class="back">back </div>
<div class="right">Right1 <div class="right2">Right2</div></div>
<div class="left">left1 <div class="left2">Left2</div></div>
<div class="bottom">bottom </div>
</div>
But this one didn't worked very well and I googled about the diffrent between div and figure and find out the coordinate System woks diffrent
My next idea was to replace the div-tags with the span-tag, because i saw it in section 6: http://rupl.github.io/unfold/
<div class="sandbox">
<div class="cube rotate labels">
<span class="top side"></span>
<span class="left side"></span>
<span class="right side"></span>
<span class="bottom side"><span class="back side flat"></span></span>
</div>
</div>
Here you can see the folding effect in the second part of section 6
so I try this version: http://jsfiddle.net/Rases/1b6a87t0/
<div class="box" >
<div id="cube">
<span class="top">TOP!<span class="front">Front</span></span>
<span class="back">BACK</span>
<span class="right">Right1<span class="right2">Right2</span></span>
<span class="left">Left1<span class="left2">L2</span></span>
<span class="bottom">Bottom</span>
</div>
</div>
In the last version of the box is connected but the unfolding effect from step1 to step2 looks wacky. I can't find the mistake and the css have diffrent coordinates the rest ( box and cube is the same )
here is the CSS - Code from my last example
/******* cube-Style *******/
.box {
width: 248px;
height: 234px;
position: relative;
margin: 0 auto 40px;
border: 1px solid #000;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000px;
}
#cube {
width: 100%;
height: 100%;
position: absolute;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(0deg) translateZ(-116px);
-moz-transform: rotateX(0deg) translateZ(-116px);
-o-transform: rotateX(0deg) translateZ(-116px);
transform: rotateX(0deg) translateZ(-116px);
-webkit-transition: -webkit-transform 3s;
-moz-transition: -moz-transform 3s;
-o-transition: -o-transform 3s;
transition: transform 3s;
}
#cube span {
display: block;
position: absolute;
font-size: 15px;
margin: 0px;
font-weight: bold;
color: white;
text-align: center;
}
Update: today I tryed http://matthewlein.com/ceaser/ on the first example but it don't work because the one end move in a circle and the other hand move in a line
The problem on the first example is still, that the Layers are not connected very well:
So I have to work with the other examples but in this case there is a error for the first open effect. (open the box)
Just Remember: Step one open the box, Step two flat the box.
I can't find the bug... thanks for your support.
I looked at your second example from http://rupl.github.io/unfold/ and added more sides + 2 buttons to control the single steps:
http://jsfiddle.net/uu98t6en/
All you have to do now is to adjust the flat classes to the point where you want to start and do an animation by defining "step"-Classes or just one-by-one.
$(".buttton1").click(function()
{
$(".step1").addClass("flat");
});
$(".buttton2").click(function()
{
$(".step2").addClass("flat");
});
$(".reset").click(function()
{
$(".step1, .step2").removeClass("flat");
});
Example:
http://jsfiddle.net/uu98t6en/2/
I hope this was helpful.
-moritz
Related
I would like a transition like this
#my-div {
width: 20px;
transition: width 1s ease;
}
#my-div:hover {
width: 100%
}
Inside my div will be an icon that sits inside the 20px. When you mouse over the icon the width will expand to it's parent's container. Here's where I'm getting tripped up. I want the text "Auto Refresh" to be centered at the 100% width at all times. So when the container is at 20px then "Auto Refresh" text will be hidden because it's too far over (i.e it won't fit inside the 20px width). When you hover over the icon the width will expand revealing the hidden "Auto Refresh" text.
I've tried using overflow: no-wrap and overflow: hidden but hidden seems to do nothing. I'm wondering if this is even possible in CSS or if I need to use multiple layers and trigger animations on those layers with javascript. Here is the effect I'm going for.
In the absolute center of the orange div should be "Auto Refresh". I hope the gif conveys my goal well. The important part is that the text is hidden before mouse over and as the orange background slides over it slowly reveals the text as though it was always there, but was just hidden before.
Do I need multiple layers and trigger animations via javascript to accomplish this? Or is this doable in pure CSS?
Relevant HTML (Please excuse the inline style. I'm fiddling with dev tools)
<div class="col-sm-6 col-md-4 col-12 region-div us-region-div">
<div class="inner border-grey-light">
<div id="us-datasource" class="crossfade data-source-blizzard-api">
<img class="bottom" src="assets/data-source-blizzard-api-30x30.png" title="Price data from Battle.net Web API" alt="Price data from Battle.net Web API">
<img class="top" src="assets/data_source_wow_30x30.png" title="Price data from in-game" alt="Price data from in-game">
</div>
<h3 class="region-title">US</h3>
<p class="money-text"><span id="us-money-text" class="odometer">175,673</span><img src="assets/gold-transparent-compressed.png" class="gold"></p>
<div class="price-trend">
<span class="money-text-small">
<span id="us-arrow" class="crossfade down-arrow arrow">
<img class="bottom" src="assets/downarrow-resized.png">
<img class="top" src="assets/uparrow-resized.png">
</span>
<span id="us-money-text-small" class="odometer">-1,206</span>
<img src="assets/gold-transparent-compressed.png" class="gold-small">
</span>
</div>
<p id="us-last-change-text" class="last-change"> </p>
<p id="us-datetime" class="region-date"> </p>
<div class="refresh-container">
<div id="patreon">
<i class="fab fa-patreon" style="
color: white;
font-size: 1.25rem;
top: 12px;
position: absolute;
left: 12px;
"></i>
</div>
<p id="us-new-price" class="lead new-price show-price"><i id="us-price-refresh-icon" class="fas fa-sync-alt"></i> New Price!</p>
</div>
</div>
You can use clip-path to simulate the illusion of the text being revealed when the rectangular div container expands. Pure CSS, here are the relevant HTML and CSS you can apply to your code:
#my-div {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
background-color: #000;
color: #FFF;
padding: 20px;
/* Relevant starting here */
width: 400px;
transition: clip-path 1s ease;
clip-path: polygon(0 0, 20% 0%, 20% 100%, 0% 100%);
}
#my-div:hover {
clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
}
<div id = "my-div">This is a test div</div>
I have an HTML page containing a table, in which i have three columns with display:none and visibility:hidden. When clicking a cell in the adjacent column, the attributes change to table-cell and visible respectively, showing the three columns. Another click at the cell of said adjacent column resets the values to none and hidden.
The only problem is that, of course, it's not pleasant to see. I would like to include an animation so that i can see the other columns shrink in order to let the hidden columns slide in the middle and an animation when i can do the opposite thing.
What should I use? I'm asking for help because I'm relatively new to web designing and I have no idea about where to look for guidance.
The tables themselves are not animated. Perhaps this option may suit you. (Google translate.)
$('.show').on('click', function(){
$('.table').find('.td').each(function(){
if($(this).css('display') === 'none'){
$(this).show().addClass('animate');
}
});
});
.table{
display: flex;
flex-direction: column;
}
.td{
border: 1px solid #999;
border-collapse: collapse;
}
.tr{
display: flex;
}
.td{
padding: 10px;
}
.td:nth-of-type(2){
display: none;
}
*{
transition: all 0.3s ease;
}
button{
margin-top: 20px;
}
.animate{
animation: show 1s ease forwards;
}
#keyframes show{
from{
transform: translateX(-100%);
display: block;
}
to{
transform: translateX(0%);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table">
<div class="tr">
<div class="td">1</div>
<div class="td">2</div>
<div class="td">3</div>
</div>
<div class="tr">
<div class="td">1</div>
<div class="td">2</div>
<div class="td">3</div>
</div>
<div class="tr">
<div class="td">1</div>
<div class="td">2</div>
<div class="td">3</div>
</div>
</div>
<button class="show">Show</button>
Just as I finished posting the question, a friend of mine introduced me to the fadeToggle function available using JQuery. This is precisely what I was looking for.
My website loads and only after few seconds I get for example functionality.
For example I have
<a href="news.php" class="home-page--news-box-button-wrapper">
<div class="home-page--news-box-button-text-wrapper">
<span class="home-page--news-box-button-text">Sve vijesti</span>
</div>
<div class="home-page--news-box-button-arrow-wrapper">
<span>here goes arrow</span>
</div>
</a>
And css has a simple transition
.home-page--news-box-button-wrapper {
background-color: $red;
transition: background-color 100ms;
&:hover{
background-color: $brown;
.home-page--news-box-button-arrow-wrapper {
text-align: center;
height: 43px;
transform: translateX(5px);
}
}
And hover only triggers after few seconds.
Did anyone had this problem before
I am writing a bootstrap site, and want to make a sort of pop out menu from the right of the screen. This menu needs to be hidden' and when a button "Menu" is clicked it pops out of screen right, and covers whatever is on screen right. it does not push the content out of the way. Kind of like the windows 8 menu when you slide your finger from screen right.
I've thought of making a dropdown menu, since it behaves almost like I want, except for it's position. But I need to change the dropdown behaviour, So that instead of the dropdown menu popping out attached to the dropdown button, it pops out of screen right, but I can't find out how to do this.
<head>
...
<link href ="CSS/Bootstrap.min.css" rel ="stylesheet"/>
</head>
<div class="col-xs-3">
<!--some side content-->
</div>
<div class="col-xs-9">
<!--some side content-->
</div>
<div class="col-xs-12">
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container-fluid">
<li class="dropup">
<a class="dropdown-toggle" data-toggle="dropdown">Menu
<ul> class="dropdown-menu">
<li>
</li>
<li>
</li>
</ul>
</a>
</li>
</div>
</nav>
</div>
<script src="JS/jquery-1.11.3.min.js"></script>
<script src="JS/bootstrap.min.js"></script>
I have three folders in my project:
Css with bootstrap css files(bootstrap-theme, bootstrap-theme min, bootstrap, bootstrap min)
Fonts
JS with bootstrap.js and bootstrap.min.js
Please show me how to do this.
If you know of a different way of making the menu I want in bootstrap I'd love to hear it as well.
Here is a simple example to get you going:
jsFiddle Demo
Note that an id was added to the a tag that opens the menu, to make it easy for jQuery to capture the click event on that element.
In the jQuery, we are using a variable mnuOut to keep track of whether the menu is IN or OUT (visible or hidden).
Also, we use the .animate() method to animate the slide out from the right. This works by changing the css attribute right:
FROM right:-80px (slid 80px beyond the right side of the screen)
TO right:0 where the right-most edge of the myMenu DIV is flush against the right side of the screen.
HTML:
<div id="myMenu">
<div id="item1" class="submenu">Item 1</div>
<div id="item2" class="submenu">Item 2</div>
<div id="item3" class="submenu">Item 3</div>
</div>
<a id="menuTrigger" class="dropdown-toggle" data-toggle="dropdown">Menu
CSS:
#myMenu{position:fixed;top:20px;right:-80px;width:80px;height:300px;background:palegreen;}
.submenu{width:100%;height:20px;padding:20px 5px;border:1px solid green;}
#menuTrigger:hover{cursor:pointer;}
jQuery:
mnuOut=false;
$('#menuTrigger').click(function(){
if (mnuOut){
//Menu is visible, so HIDE menu
$('#myMenu').animate({
right: '-80px'
},800);
mnuOut = false;
}else{
//Menu is hidden, so SHOW menu
$('#myMenu').animate({
right: 0
},800);
mnuOut = true;
}
})
If you want your menu to cover the content make sure you add
position: absolute;
Or
position: fixed;
Then after that give it
right: 500px;
But instead of 500px use the width of your menu
And to make it popout just override the
right: 0;
Making it 0 will make it stick to the right back to its original position
What you want requires a little more than just a couple of lines of css but I think this will give you a good start. Just style according to your theme:
HTML
<div id="oneout">
<span class="onetitle">
menu
</span>
<div id="oneout_inner">
<center>
menu info here
<br>
</center>
</div>
</div>
CSS
#oneout {
z-index: 1000;
position: fixed;
top: 64px;
right: 1px;
width: 18px;
padding: 40px 0;
text-align: center;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
#oneout_inner {
top: 60px;
right: -250px;
position: fixed;
width: 230px;
padding: 10px;
background: #FFFFFF;
height: auto;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
text-align: left;
border:1px solid #333;
}
#oneout:hover {
z-index: 1000;
right: 250px;
}
#oneout:hover #oneout_inner {
z-index: 1000;
right: 0px;
}
.onetitle {
display: block;
writing-mode: lr-tb;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
position: absolute;
right: -11px;
top: 3px;
font-family: Lucida Sans;
font-size: 16px;
font-weight: normal;
text-transform: uppercase;
letter-spacing: -1px;
}
Here is a working DEMO
As the continuation of my previous Question How to make the textbox above the slider.
The textbox needs to be displayed in the centre of both slider.
How can i do this ?
Here is the Jsfiddle that i have.
http://jsfiddle.net/Cv9DM/12/
css :
.view-fifth:hover img {
-webkit-transform: translateX(300px);
-moz-transform: translateX(300px);
-o-transform: translateX(300px);
-ms-transform: translateX(300px);
transform: translateX(300px);
}
Note : Make the Result Tab little wide to make the two slider visible in Horizontal
The horizontalized screen is given below
Edit : Expected output :
Check this
Changed CSS for input
<input type='text' style="z-index:999;position: absolute; top: 50%; left: 50%; margin: -11px 0 0 -82px; width:160px; padding: 4px;">
added a div to wrap both the slides .outer
.outer {
position: relative;
height: 200px;
float: left
}
Is this what you want?
Fiddle: fiddle
<div>
<input type='text' style="z-index:999;position: absolute;
top: 70px;
left: 230px;">
<div class="view view-fifth">
<img src="http://s15.postimg.org/aranu1b5n/image.jpg" />
<div class="mask">
<h2>Hover Style #5</h2>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
Read More
</div>
</div>
<div class="view view-fifth">
<img src="http://s15.postimg.org/aranu1b5n/image.jpg" />
<div class="mask">
<h2>Hover Style #5</h2>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
Read More
</div>
</div>
</div>
if you need to input box vertically center you can use this property. see the DEMO.
input[type="text"]{
position: relative;
top: 50%;
transform: translateY(-50%);
z-index:1;
position:fixed;
left:18em;
top:9em;
}
According to your edit, you need to use position:fixed instead of position:absolute.
<div style="z-index:999;position: fixed; top: 50px; left:0; right:0; margin:0px auto;"><input type='text' /></div>
DEMO
You can refer this one too
with use of jQuery
<div class="view-ten clearfix">
<input type='text' class='textbox' style="z-index:999;position: absolute;"/>
</div>
<div class="view view-fifth"></div>
<div class="view view-fifth"></div>