This might be a stupid question but is there a way to create animations like mobile app in the browser.
Ref link: http://www.google.com/design/spec/animation/meaningful-transitions.html#meaningful-transitions-meaningful-transitions-examples
It would be great if something could be built like this. I know a bit of javascript/jquery but this seems to be way out of my knowledge.
Any technical details would be helpful
You can try using famo.us: http://famo.us/
It's a new framework so there are some issues but it has potential. It relies on matrix transforms and can do really amazing things such as this: http://www.youtube.com/watch?v=6jg-PlisAFc
You can check out more demos here: http://famo.us/demos/
And there is a DNA helix example here: http://www.youtube.com/watch?v=JbIL3asjZBs
Hope this helps.
Here is a little example of what you can do with a bit of jQuery to trigger the animation with a class change and CSS3 transitions to handle the animation.
It will need some tweaking and customizing to reach the quality of the linked animations but it shows that CSS3/jQuery animations can be pretty smooth.
DEMO
HTML :
<header></header>
<section>
<article>
<div class="wrap">
<img src="" alt="" />
<p>some text</p>
</div>
</article>
<article>
<div class="wrap">
<img src="" alt="" />
<p>some text</p>
</div>
</article>
....
</section>
CSS :
body,html{margin:0;}
header{
height:100px;
background:#000;
}
article{
float:left;
width:50%;
padding-bottom:16%;
position:relative;
color:#fff;
}
article .wrap{
position:absolute;
width:100%;
height:100%;
overflow:hidden;
z-index:1;
background-color: rgba(0, 0, 0, 0.9);
-webkit-transition: width 0.2s ease-out, height 0.2s ease-out, 1s z-index 0s;
transition: width 0.2s ease-out, height 0.2s ease-out, 1s z-index 0s;
}
article .wrap img{
display:block;
width:100%;
height:auto;
}
footer{
height:50px;
width:100%;
position:fixed;
bottom:0;
left:0;
background:#000;
}
article:nth-child(odd) .wrap.show{
width:200%;
height: 100vh;
z-index:2;
-webkit-transition: width 0.2s ease-out, height 0.6s ease-out;
transition: width 0.2s ease-out, height 0.6s ease-out;
}
jQuery :
$('.wrap').click(function(){
$('.wrap').not(this).removeClass('show');
$(this).toggleClass('show');
});
Related
I'm trying to create a carousel with plain CSS that can hold 5 items in the current view and display rest on click of sliders.
Reference : Bootstrap carousel
Here's my fruit list plunker that I've created with background grey.I tried by giving width to 50% but was not able to hide the items not display them on click of left/right arrow.Please help..
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="
padding-left: 0px;bottom: 10px">
<span class="glyphicon"></span>
<ul style="line-height:30px" id="nav" ng-repeat="item in fruitSlider">
<li>
<span class="fruit-name block" style="
text-align: left;">{{item.view}}</span>
<span class="mape-percent block">{{item.count}}%</span>
</li>
</ul>
<span class="glyphicon"></span>
</div>
So here is very basic simple example, don't have time now to provide more advanced code.
https://jsfiddle.net/maximelian/1f0dwbL9/26/
html:
<div class="leftbutton"><</div>
<div class="outer">
<div class="div1 shown">Test</div>
<div class="div2 right">test 2</div>
</div>
<div class="rightbutton">></div>
css:
.leftbutton {
float:left;
}
.rightbutton {
float:left;
}
.outer {
float:left;
position:relative;
width:50px;
height:50px;
background-color: red;
overflow:hidden;
}
.shown {
position:absolute;
width:50px;
left:0px;
transition: left 1s;
-webkit-transition: left 1s;
-moz-transition: left 1s;
-ms-transition: left 1s;
background-color:green;
}
.left {
position:absolute;
left:-50px;
transition: left 1s;
-moz-transition: left 1s;
-ms-transition: left 1s;
-o-transition: left 1s;
overflow:hidden;
background-color:grey;
}
.right {
position:absolute;
left:50px;
transition: left 1s;
-moz-transition: left 1s;
-ms-transition: left 1s;
-o-transition: left 1s;
overflow:hidden;
background-color:grey;
}
javascript:
$(".leftbutton").on("click",function(){
$(".shown").removeClass("shown").addClass("left");
$(".right").removeClass("right").addClass("shown");
});
$(".rightbutton").on("click",function(){
$(".shown").removeClass("shown").addClass("right");
$(".left").removeClass("left").addClass("shown");
});
Basically you just want div wrapper that hide overflow and those image or whatever div's with absolute position. Then you can trigger left position change with script and add some css transitions for animation.
Im currently building this project for some pals. However, the transition that I use to move the whole page to the left, when the menubutton is clicked. This animation does work in chrome and Firefox but not in edge. Why is this?
header HTML:
<div id="page" class="">
<div class="wow fadeIn" data-wow-duration="1s">
<header class="fixed topheader">
<div class="leftheader toplist">
<a id="logo" href="#">23-RuleZ</a>
</div>
<nav id="navbar" >
<ul class="menulist nav">
<li class="menuitem topitem">Join 23-RuleZ</li>
<li class="menuitem topitem">Blog</li>
<li class="menuitem topitem">Clanwar</li>
<li class="menubutton topitem"><a id="sidemenu" class="topbutton" href="javascript:void(0)"> ☰ </a></li>
</ul>
</nav>
</header>
Some JS:
var a = document.getElementById("sidemenu");
a.onclick = function() {
if ($('#page').hasClass('moved')){
$('header').removeClass('moved');
}
else {
$('header').addClass('moved');
}
$('#page').toggleClass('moved');
$('.sidebar').toggleClass('visible');
$('#sidemenu').toggleClass('error redbottom');
return false;
}
}
CSS:
.bodyheader {
background-color: #efefef;
height: 60px;
border-bottom: 3px solid #CCC;
transition: all 0.5s ease;
-moz-transition: all 0.5s ease; /* FF3.7+ */
-o-transition: all 0.5s ease; /* Opera 10.5 */
-webkit-transition: all 0.5s ease; /* Saf3.2+, Chrome */
}
.topheader {
height: 80px;
color: #FFF;
font-weight:700;
font-size:20px;
border-bottom: 1px solid #666;
transition: all 0.5s ease;
-moz-transition: all 0.5s ease; /* FF3.7+ */
-o-transition: all 0.5s ease; /* Opera 10.5 */
-webkit-transition: all 0.5s ease; /* Saf3.2+, Chrome */
}
All code is available at the site.
Any help is appreciated!
EDIT: What would be superb, is that the width changing of the page of the page is animatable. I could get this to work previously.
Edge is quite a new browser so it may take a while for all HTML/CSS/JS to be supported, blame the browser.
when i use a touchstart event to show a div on my phonegap app, thats open the div but also click on a button into this div.
Do you have any idea to prevent the button to be triggered ?
... i don't know exactly what you mean but maybe this helps ->
If you are using jQuery you could do it like this:
HTML
<div class="container">
<div class="header">Bla blah</div>
<div class="content">
<p> Some content here </p>
</div>
</div>
<div class="container collapsed">
<div class="header">Bla blah</div>
<div class="content">
<p> Some content here </p>
</div>
</div>
CSS
.container{
width:300px;
background:#ccc;
margin:10px;
float:left;
}
.header{
background:url('http://cdn1.iconfinder.com/data/icons/vaga/arrow_up.png') no-repeat;
background-position:right 0px;
cursor:pointer;
}
.collapsed .header{
background-image:url('http://cdn2.iconfinder.com/data/icons/vaga/arrow_down.png');
}
.content{
height:auto;
min-height:100px;
overflow:hidden;
transition:all 0.3s linear;
-webkit-transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
-ms-transition:all 0.3s linear;
-o-transition:all 0.3s linear;
}
.collapsed .content{
min-height:0px;
height:0px;
}
JS
$(function(){
$('.header').click(function(){
$(this).closest('.container').toggleClass('collapsed');
});
});
And here is a working fiddle for you:
http://jsfiddle.net/AMzfe/
This is my html code:
<div class="wrapper">
<a target="_blank" href="klematis_big.htm">
<img data-src="holder.js/180x180" style="height:20%;width:100%;float:left;"
src="../goyal/profile-pic.jpg" alt="Klematis">
</a><p class="text">gjhgkuhgfkuyfrjytdcj</p>
</div>
css:
#wrapper .text {
position:relative;
bottom:30px;
left:0px;
visibility:hidden;
}
#wrapper:hover .text {
visibility:visible;
}
This is my profile picture of my page.
when i hover on image it shows a button and some
text with opacity.
like edit profile picture etc
you can use jQuery code.
Demo Here
Replace
#wrapper .text {
with
.wrapper .text {
And
#wrapper:hover .text {
with
.wrapper:hover .text {
wrapper is an class not an id.id will represented with # and class will represented with .
You can also achieve that with opacity and CSS3 Transitions, here's a Fiddle
HTML
<div class="wrapper">
<a target="_blank" href="klematis_big.htm">
<img data-src="holder.js/180x180" style="height:20%;width:100%;float:left;"
src="../goyal/profile-pic.jpg" alt="Klematis"/>
</a>
<p class="text">Text Text Text ...</p>
</div>
CSS
.wrapper .text {
position:relative;
bottom:30px;
left:10px;
opacity:0;
transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-webkit-transition: opacity 0.3s linear;
}
.wrapper:hover .text {
opacity:1;
}
I have several elements below one transparent element(it has some things in it that are visible though). But it seems the padding is not allowing the mouse events through. I have it so when the mouse hovers over one of the lower elements, it changes color, then when it leaves, it slowly turns back to its original color. But for the areas where the element above it covers them, the hover doesn't go through. Does anyone know how to get those events to pass through to lower elements?
HTML
<body>
<div id="background">
<canvas class="gridBox" id="grid1x1"></canvas>
<canvas class="gridBox" id="grid2x1"></canvas>
<canvas class="gridBox" id="grid3x1"></canvas>
...
<canvas class="gridBox" id="grid18x8"></canvas>
</div>
<div id="header">
<p id="logo"><img src="img/logo.png"></p>
</div>
<div id="content">
<p>Nothing here yet</p>
</div>
<div id="footer">
</div>
</body>
CSS
body,html{
padding:0;
margin:0;
}
#background{
padding:0;
margin:0;
width:110%;
height:100%;
z-index:-1;
position:fixed;
top:0;
left:0;
overflow:visible;
line-height: 0;
}
.gridBox{
margin:0;
padding:0;
height:50px;
width:50px;
border:1px solid #000000;
background:black;
transition:background-color 1s linear;
}
.gridBox:hover{
background-color:green;
transition:background-color 0s linear;
}
Since you did not post your code, I guess that you are working with something like light box, hover parent element and making animation.
I recommend you to look at this question has been resolved
jQuery hover problem due to z-index
I think what you are looking for is this:
.gridBox:hover, .gridBox:hover * {
background-color:green;
transition:background-color 0s linear;
}
It just selects the .gridBox plus any child on the condition
that the user is hovering .gridBox