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.
Related
I'm trying create a hover effect which displays the text centered in the image, both vertically and horizontally. My main problem is that the text keeps staying on top of the image and when I try to navigate it using percentages or pixels, the entire hover effect background changes its proportion.
In this JS fiddle you can see what I'm doing, just hover over the left image in order to achieve the effect. The text just appears on the top, while it shouldn't.
JS Fiddle
<div class="container-fluid">
<div class="row " id= "faded">
<img src = "img/logo.png" class ="img-responsive" id = "logo">
<div class = "col-md-3 col-sm-3 col-xs-12" >
<img src = "img/1.jpg" class = "img-responsive" id ="left-image">
<div class = "carousel-caption" id = "pricing">
<h2>PRICING</h2>
</div>
<div class = "text">
HAIRCUT $45<br>
SHAVE $45<br>
COMBO $80<br>
</div>
</div>
<div class = "col-md-6 col-sm-6 col-xs-12">
<img src = "img/2.jpg" class = "img-responsive" id = "middle-image">
<div class ="carousel-caption" id = "about-us">
<h2> ABOUT US </h2>
</div>
<img src = "img/3.jpg" class = "img-responsive" id= "mid-image">
<div class ="carousel-caption" id = "contact-us">
<h2> CONTACT US </h2>
</div>
</div>
<div class = " col-md-3 col-sm-3 col-xs-12">
<img src = "img/4.jpg" class = "img-responsive" id = "right-image">
<div class ="carousel-caption" id = "appointments">
<h3> APPOINTMENTS </h3>
</div>
</div>
</div>
</div>
CSS Code used:
#logo{
height: 10%;
width:15%;
}
.col-md-6, .col-md-3{
padding-left:0px;
padding-right:0px;
}
.img-responsive{
margin-left:0px;
padding-left:0px;
}
#pricing{
bottom:89%;
left:-30%;
}
#about-us{
bottom:89%;
left: -55%;
}
#contact-us{
bottom: 39%;
right:-53%;
}
#appointments{
bottom:89%;
left:-15%;
}
.text {
background-color: rgba(212, 212, 212, 0.83);
position: absolute;
color: black;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align:center;
font-size:2.5em;
opacity: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
pointer-events:none;
}
#left-image:hover ~ .text {
opacity: 1;
}
in your css you need to add
padding-top: 50%;
like so -
.text {
background-color: rgba(212, 212, 212, 0.83);
position: absolute;
color: black;
left: 0;
right: 0;
top: 0;
bottom: 0;
padding-top 50%;
text-align:center;
font-size:2.5em;
opacity: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
pointer-events:none;
}
padding changes the distance from the border, from the inside out. see - http://www.w3schools.com/css/css_padding.asp
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 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');
});
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;
}