I'd like to have the .container and .box scale in and out from the one I clicked on. The problem I'm running into is when I scale in and out, it scales in and out from the first .box div, not the one I clicked on.
Each .box will contain it's own unique content, so when viewing this in "Artboard" view (Zoomed Out), I want people to be able to see what's contained in that particular .box. When people click on one of the boxes, I want it to scale back to (1) to cover the viewport. And if the person is on the 4th .box and they click "Zoom Out", I want it to zoom out from that particular .box.
Each box will be the size of the viewport, which is how it's set up now.
Does anyone have a solution in CSS only? Or is this something that can be better accomplished in JS? I'm not a JS expert, I'm just getting into it, so I'm curious if there's something I can do in some simple JS.
Please see my codepen:
http://codepen.io/jareko999/pen/eZGLZB
HTML
<div class="bar">
<button class="zoomout" onclick="zoomOut()">Zoom Out</button>
</div>
<div class="container">
<div class="artboard">
<div class="box">
<i class="fa fa-diamond"></i>
</div>
<div class="box">
<i class="fa fa-bolt"></i>
</div>
<div class="box">
<i class="fa fa-flag"></i>
</div>
<div class="box">
<i class="fa fa-flask"></i>
</div>
</div>
</div>
CSS
body {
margin: 0;
padding: 0;
height: 100vh;
width: 100%;
background: #e1e1e1;
overflow-y: hidden;
}
.bar {
position: fixed;
display: flex;
flex-direction: row;
box-sizing: border-box;
bottom: 0;
width: 100%;
height: 80px;
background: white;
padding: 14px 0;
z-index: 1;
}
.zoomout {
-webkit-appearance: none;
border: none;
outline: 0;
width: 100px;
height: 40px;
margin: auto;
background: black;
color: white;
border-radius: 10px;
cursor: pointer;
}
.container {
height: 100vh;
width: 100%;
transition: .2s ease-out;
transform: scale(1);
}
.container-small {
height: 100vh;
width: 100%;
transition: .2s ease-out;
transform: scale(.7);
}
.artboard {
height: 100%;
width: 100%;
display: flex;
display: -webkit-flex;
background: #e1e1e1;
}
.box {
padding-top: 44vh;
box-sizing: border-box;
text-align: center;
flex-shrink: 0;
width: 100%;
height: 100%;
box-shadow: 0 2px 4px #a9a9a9;
background: linear-gradient(to right, #276cd6 , #00a651);
transition: .2s ease-out;
transform: scale(1);
}
.box-small {
padding-top: 44vh;
box-sizing: border-box;
text-align: center;
flex-shrink: 0;
width: 100%;
height: 100%;
box-shadow: 0 2px 4px #a9a9a9;
background: linear-gradient(to right, #276cd6 , #00a651);
transition: .2s ease-out;
transform: scale(.9);
cursor: pointer;
}
.box i {
color: #e1e1e1;
font-size: 3em;
}
.overflow {
overflow: hidden;
}
.remove {
display: none;
}
::-webkit-scrollbar {
width: 12px;
height: 4px;
}
/* Track */
::-webkit-scrollbar-track {
background: white;
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 100px;
border-radius: 100px;
background: #4099ff;
}
JS
$(document).ready(function() {
$('.container').addClass('overflow');
});
function zoomOut() {
$('.bar').addClass('remove');
$('.box').addClass('box-small');
$('.container').removeClass('overflow');
$('.container').addClass('container-small');
}
$('.box').click(function() {
$('.bar').removeClass('remove');
$('.box').removeClass('box-small');
$('.container').addClass('overflow');
$('.container').removeClass('container-small');
});
What you're trying to achieve can be done using a CSS only method.
This method relies on using location hashes (url.com#foobar) and the :target pseudo selector.
The :target pseudo selector allows you to target the element which has the id matching the location hash. For example, imagine you have an element with the id "foobar", the #foobar:target selector will only apply if you have navigated to url.com#foobar. You can create a link with the href attribute pointing #foobar to have a button trigger this pseudo selector.
In your case, you can apply the zoom out styles when the #container location hash is matched, and only show the slide matched by the location hash.
The drawback of this method is that you have to add ids, and add links to actually trigger the :target pseudo class.
My explanation might not be clear, so I put up this demo:
http://codepen.io/ntim/pen/ONxGJd
Related
What's the best approach to achieving a lasting effect like in this gif?
I thought the framer-motion whileHover attribute would be my best chance, but I misunderstood how it works, I thought its possible to enter from and to parameters like in CSS animation.
I want to reveal the 'footer' either while the cursor hovers on it or when reaching a certain viewport height.
What's in the gif was made with keyframes animation in css.
I'd appreciate any hint, guide, link to a video on how to build such things.
Thanks in advance
I believe that you can achieve that exact effect using CSS only. This is often preferable, since javascript would bloat your code and be slower to execute.
You can see a way of achieving this effect in this fiddle
Basically, you can use the "hover" pseudoclass to make the aesthetic changes, and then use the "transition" property to animate them.
In the fiddle above, this is the code that actually does the trick:
/* setting base styles for the footer element */
footer {
margin: 0 auto;
width: 200px;
transform: translateY(60px);
transition: width 1s, transform 1s;
}
/* having an inner child will give that "truncated border radius" effect you see in the gif */
footer .inner {
background-color: lightblue;
padding: 3em;
border-radius: 50%;
transition: border-radius 1s;
}
/* Make changes using the "hover" pseudoclass */
footer:hover {
transform: translateY(0px);
width: 100%;
}
footer:hover .inner {
border-radius: 0%;
}
Please be aware that the fiddle I posted is just a hint on how to build this component, but it still miss some features, like the handling of the footer text content itself (right now it won't work well if it's multiline) and accessibility.
See this solution using only css:
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: Segoe UI, sans-serif;
}
.container {
width: 100vw;
height: 100vh;
}
.container main {
width: 80%;
height: 400px;
margin: auto;
border-radius: 30px;
display: flex;
justify-content: center;
align-items: center;
font-size: 3em;
font-weight: 800;
color: white;
background: rgb(70, 100, 52);
}
.container footer {
width: 100%;
display: flex;
justify-content: center;
}
.container footer .expand {
width: 200px;
height: 50px;
background: royalblue;
border-radius: 40px 40px 0 0;
position: fixed;
bottom: 0px;
display: flex;
justify-content: center;
font-size: 1em;
color: white;
transition: 1000ms;
}
.container footer .expand:hover {
width: 100%;
animation-name: resize;
animation-duration: 700ms;
height: 150px;
border-radius: 0;
}
#keyframes resize {
0% {
height: 50px;
border-radius: 60px 60px 0 0;
}
50% {
height: 160px;
border-radius: 90px 90px 0 0;
}
100% {height: 150px;}
}
<div class="container">
<main>
this is your main feed
</main>
<footer>
<div class="expand">^^^</div>
</footer>
</div>
I'm trying to create a "bubble" which gets bigger in order to change its parent color with a nice animation. I like my approach, but I only need to put it inside the parent div.
This is what I have:
HTML
<html>
<body>
<div class="nav-menu" style="top: -64px;">
<div class="test"></div>
<div class="brand" onclick="test();">
<h1>App</h1>
</div>
<ul class="menu-list">
<li class="menu-item">Item</li>
</ul>
</div>
</body>
</html>
CSS
#import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
* {
margin: 0;
padding: 0;
}
.nav-menu {
z-index: 1000;
padding: 0 16px;
display: flex;
justify-content: space-between;
background-color: #B67171;
color: white;
position: fixed;
width: 100%;
transition: background-color .5s, top .2s;
}
.test {
background-color: blue;
position: absolute;
border-radius: 50%;
z-index: -1;
width: 32px;
height: 32px;
left: 50%;
top: 50%;
transform: scale(0) translate(-50%, -50%);
transform-origin: top left;
transition: transform .25s;
}
.nav-menu .brand h1 {
margin: 0;
padding: 0;
line-height: 64px;
font-family: 'Satisfy', cursive;
}
.nav-menu .menu-list {
list-style: none;
margin: 0;
}
.nav-menu .menu-list a {
display: inline-block;
margin: 0;
padding: 0 16px;
line-height: 64px;
font-size: 21px;
vertical-align: middle;
transition: background-color .2s;
color: white;
text-decoration: none;
}
.nav-menu .menu-list a:hover {
background-color: #D8C292;
}
(And a .js just for testing)
let navMenu = document.getElementsByClassName("nav-menu")[0];
window.addEventListener('load', function (e) { navMenu.style.top = "0"; });
var showing = false;
function test () {
document.getElementsByClassName("test")[0].style = "transform: scale(" + (showing ? 0 : 4) + ") translate(-50%, -50%);";
showing = !showing;
}
Here you have a demo in which you can press the "App" text and it would scale the "bubble" just a little bit. I want to remove the following stuff:
Can anybody give me a hint? However if you know any better solution for this "feature", I will appreciate it.
Thank you in advance!
Adding overflow:hidden property to your navigation div would work. Try this code.
.nav-menu {
z-index: 1000;
padding: 0 16px;
display: flex;
justify-content: space-between;
background-color: #B67171;
color: white;
position: fixed;
width: 100%;
transition: background-color .5s, top .2s;
overflow: hidden;
}
Add to .navmenu property overflow
DOC: overflow
nav-menu {
...
overflow: hidden;
}
Simply add overflow: hidden; to your div with class nav-menu.
Here is your edited example: https://jsfiddle.net/4r1n2cux/2/
use overflow: hidden; in style of first <div>
I am working with a navigation bar that has slides a menu from right to left.
With my code, when the user picture is being clicked, it will show the menu.
So when it is loaded, menu is hidden and when it is clicked will be showed. I used to add class hidden and show to toggle to menu.
$(document).ready(function(){
$(".img-profile").click(function(){
$(".menu-wrapper").addClass("show");
});
$(".menu-bg").click(function(){
$(".menu-wrapper").removeClass("show");
});
});
CSS
.show{
display: inline-block !important;
}
.hidden{
display: none;
}
The problem is it's not animating even if I added the transition: all 0.2s linear 0s and the transform from 250px to 0
.menu-wrapper > .login-menu{
background-color: #fff;
height: 100%;
overflow-y: auto;
position: fixed;
right: 0;
width: 250px;
z-index: 5;
padding: 30px 20px;
text-align: center;
transition: all 0.2s linear 0s;
transform: translateX(0px);
}
.menu-wrapper .show > .login-menu{
transform: translateX(250px);
}
Also, I want to animate it on menu-close from right to left.
My full code is at JSFIDDLE
Changing the display CSS attribute does not trigger animations. Use the visibility attribute instead. This one triggers animations.
If you have good reason to use display (which is completely possible), you'll need to set the display attribute first to show the element, but keep the visibility on hidden. Set the visibility: visible attribute right after and the animation will be triggered.
Edit: I had a look at your fiddle. Don't use the .hidden class, because bootstrap sets display:none on .hidden elements. Just use the .show class alone, putting visibility:visible in the show class, and setting visibility:hidden on the .menu-wrapper element. Remove all the display:none lines in your CSS and you'll be fine.
Try to do it with this trick.
<header class="header">
<div class="container">
<a class="logo" href="/"></a>
<div class="login">
<div class="img-profile" style="background-image: url('http://graph.facebook.com/4/picture?width=100&height=100')"></div>
<div class="login-menu">
<div class="img-profile" style="background-image: url('http://graph.facebook.com/4/picture?width=100&height=100')"></div>
<p>Mark Zuckerberg</p>
<button type="button" class="btn btn-danger btn-block">Logout</button>
</div>
<div class="menu-bg"></div>
</div>
</div>
.header{
width: 100%;
height: 50px;
background: #fff;
border-bottom: 2px solid #ececec;
}
.header > .container{
height: 100%;
position: relative;
}
.logo {
background: url("http://d12xrwn9fycdsl.cloudfront.net/static/images/sv_logo.png") no-repeat scroll center center / contain ;
display: inline-block;
width: 23rem;
height: 100%;
}
.select-lang {
display: inline-block;
position: absolute;
top: 15px;
}
.login{
position: absolute;
right: 0;
top: 0;
}
.img-profile{
background: no-repeat scroll center center / contain;
position: relative;
top: 3px;
border-radius: 40px;
width: 40px;
height: 40px;
display: block;
margin: auto;
}
.login > .menu-wrapper{
display: none;
position: fixed;
left: 0;
top: 0;
bottom: 0;
z-index: 5;
height: 100%;
width: 100%;
}
.login-menu{
background-color: #fff;
height: 100%;
overflow-y: auto;
position: fixed;
top: 40px;
right: -250px;
width: 250px;
z-index: 5;
padding: 30px 20px;
text-align: center;
transition: all 0.2s linear 0s;
}
.show{
right: 0;
}
.hidden{
right: -250px;
}
.login-menu > .img-profile {
border-radius: 70px;
height: 70px;
width: 70px;
}
.login-menu > p {
font-weight: bold;
margin: 10px 0 20px;
}
.menu-wrapper > .menu-bg{
background-color: rgba(0, 0, 0, 0.6);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
$(document).ready(function(){
$(".img-profile").click(function(){
$(".login-menu").addClass("show");
});
$(".img-profile").click(function(){
$("body").removeClass("show");
});
});
Take a look here https://jsfiddle.net/SkiWether/KFmLv/
this is working for me
$(".myButton").click(function () {
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = { direction: $('.mySelect').val() };
// Set the duration (default: 400 milliseconds)
var duration = 500;
$('#myDiv').toggle(effect, options, duration);
});
autocomplete working fine but i need a transition effect(slide down) in suggested menu,
I referred from this sites http://tutsforweb.blogspot.in/2012/05/auto-complete-text-box-with-php-jquery.html
and i tried
$(document).ready(function() {
$("#tag").autocomplete("autocomplete.php", {
selectFirst: true
});
});
.ac_results {
background-color: white;
border: 1px solid #5c5c5c;
left: 174.5px !important;
overflow: hidden;
padding: 0;
width: 247px !important;
z-index: 99999;
}
.ac_results ul {
width: 100%;
list-style-position: outside;
list-style: none;
padding: 0;
margin: 0;
}
.ac_results li {
margin: 0px;
padding: 2px 5px;
cursor: default;
display: block;
font-family: "armataregular";
font-size: 12px;
line-height: 16px;
overflow: hidden;
}
.ac_loading {
background: white url('indicator.gif') right center no-repeat;
}
.ac_odd {
background-color: #eee;
}
.ac_over {
background-color: #ccc;
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="listone">
<input type="text" placeholder="Enter Keyword" id="tag">
</div>
I added transition property on id="tag" and .ac_results its not working,
please suggest any idea.,
Transitions work by listening to a property and will "animate" when that property changes. So in your case you would need to add a transition to #ac_results. Set the #ac_results height to 0, and when it finds results change the height that element and it should slide down
transition: height 0.5s ease-in-out;
height: 0;
Here is a quick example of it (note that it doesn't do any auto complete, just it shows when input is detected)
http://jsfiddle.net/schwqa7k/1/
I have a few images where I'd like half borders to the top right corner and to the bottom left corner. The problems I am running into are:
problem 1: I have managed to cut of borders at all four corners, but can't cut of top left and bottom right. code below (I'm using this fiddle provided by KillaCam, and experimented a little, with the result that all four corners appear at first and then three of them disappears! : http://jsfiddle.net/3jo5btxd/
#div1 {
position: relative;
height: 100px;
width: 100px;
background-color: white;
border: 1px solid transparent;transition: border 2000ms ease 0s;
}
#div2 {
position: absolute;
top: -2px;
left: -2px;
height: 84px;
width: 84px;
background-color: #FFF;
border-radius: 15px;
padding: 10px;
}
Problem 2 I already have a panel that has a link vertically centered using the css table method, which is also visible on hover. When I combine the panel's code with the corner borders, my vertical centering goes out of whack! I guess that is happening because of the extra div I am using for borders, but I haven't managed to make the corners with :before (doesn't work on hover). HTML and css below and the also the image showing what I want to make:
<ul class="img-list">
<li class="category_lists one-third column-block" '="">
<a href="http://kohphangan.smartsolutionpro.us/category/adventure/">
<img src="something.jpg"/>
<span class="text-content">
<span>Adventure</span>
</span>
</a>
</li>
<li class="category_lists one-third column-block" '="">
<a href="http://kohphangan.smartsolutionpro.us/category/beach-2/">
<img src="something2.jpg" />
<span class="text-content">
<span>Beach</span>
</span>
</a>
</li> </ul>
CSS:
/*css for the categories on home page*/
.img-list{margin:0;padding:0; list-style:none}
ul.img-list li {
display: inline-block;
height: 20em;
margin: 0;
position: relative;
}
.category_lists.one-third{width:33%; margin-left:0;}
.category_lists img{width:100%; height:auto;}
span.text-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
span.text-content {
background: rgba(38,196,83,0.7);
color: white;
cursor: pointer;
display: table;
height: 7em;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
font-size:42px;
text-transform:uppercase;
font-family: 'Raleway', sans-serif; font-weight:300
}
ul.img-list li:hover span.text-content {
opacity: 1;
}
And the image showing what I want to make: http://tinypic.com/r/2gy5zk4/8 .
If I have to use javascript, I will, but I am not very good at it, so counting on css to make it work. Thanks a lot for any help.
Here's one solution: http://jsfiddle.net/f7u6yxLq/.
HTML:
<div></div>
CSS:
* {
margin: 0;
padding: 0;
}
body {
padding: 10px;
}
div {
position: relative;
display: table;
width: 200px;
height: 100px;
background: url("http://placehold.it/200x100")
no-repeat
top left;
}
div:before,
div:after {
content: "";
position: absolute;
width: 50px;
height: 50px;
border: solid white;
border-width: 2px 2px 0 0;
display: none;
}
div:before {
right: 5px;
top: 5px;
}
div:after {
border-width: 0 0 2px 2px;
bottom: 5px;
left: 5px;
}
div:hover:after,
div:hover:before {
display: block;
}
Solution for problem #1: http://jsfiddle.net/3jo5btxd/2/
.div2:before, .div2:after {width:9px; height:9px; position: absolute;background:#fff; content:'';}
.div2:before {top:0; left:0;}
.div2:after {bottom:0; right:0; }