I want to recreate an effect I saw on airforce.com . It's right below the hero, I poked around a bit and can't seen to find out what they did.
It looks like it was developed using knockout but I would like to recreate it using jQuery and Css.
If you know what the effect is called or know of a library that can achieve this, PLEASE let me know thanks!
https://www.airforce.com/
I created a simple mockup of the effect using css only. View fiddle
https://jsfiddle.net/rob_primacy/p6ee9d71/2/
<div class="image-block">
<div class="image"></div>
</div>
.image-block {
position: relative;
width: 300px;
left: 200px;
}
.image {
display: block;
position: absolute;
left: 0;
right: 0;
overflow: hidden;
transition: all ease .3s;
height: 600px;
background: url("http://www.difrusciaphotography.com/wp-content/uploads /2015/08/Place-to-unwind_Lake-Kananaskis-Alberta-Canada.jpg") #000 no-repeat center center;}
.image-block:hover .image {
left: -40px;
right: -40px;
transition: all ease .3s;
}
Related
I want to create a div where one of the children is visible and one is out of the div, I've been using overflow:hidden for this, however whatever i try i can't seem to get this to work, I've tried positioning one absolute and that works, but as soon as I extend the div to reveal the extention it will overlap it obviously. Any help would be great, here are some pictures of the main concept.
Before Being Clicked
After Being Clicked
note: I am using react js to develop this, if you could make a codepen or something in vanilla javscript just as a concept of the main functionality and then I will convert it to react.
Thanks in advance :)
Here is one way:
.expandable {
position: relative;
}
.expandable>div {
width: 200px;
transition: all 1s;
overflow: hidden;
background-image: url('https://via.placeholder.com/200');
background-repeat: no-repeat;
min-height: 200px;
border: 1px solid black;
}
.expandable>div>img {
position: absolute;
width: 200px;
}
.expandable>input { display: none; }
.expandable>label {
position: absolute;
top: 90px;
left: 210px;
transition: all 1s;
background-image: url('https://img.icons8.com/flat_round/64/000000/arrow--v1.png');
width: 20px;
height: 20px;
background-size: cover;
background-repeat: no-repeat;
transform: rotate(0deg);
}
.expandable>input:checked+label {
left: 410px;
transform: rotate(180deg);
}
.expandable>input:checked~div {
width: 400px;
}
.expandable>div>div {
width: 200px;
padding-left: 200px;
}
<div class="expandable">
<input type=checkbox id='ex1'>
<label for='ex1'></label>
<div>
<div>
<!-- right side content -->
<h1>Stuff here</h1>
<p>lorem ipsum</p>
</div>
</div>
</div>
This uses the label as the button. When clicked, it triggers the input to be checked/unchecked. We then use the status of the checkbox to change our CSS, and we use transitions so that it is smooth, works across all modern browsers, and is very battery efficient for mobile devices.
I've created a modal that slides up and down on click using CSS and jQuery.
When viewed on the desktop, it looks "OK" ish but when viewed on mobile devices, its jerky. Especially when the modal goes down.
What I am tryingt o achieve is a very smooth slide up and down. I did come across quite a few similar questions but I don't see any difference between what I am doing and what was suggested to other people to fix this issue.
The main purpose of this modal is to be used in a hybrid mobile app in phonegap. And this modal should look similar to YouTube player on iPhones.... So if you open YouTube on your mobile device, and play a video, on the top left, you will see an arrow that's pointing down. If you click/tap on that, you will see that YouTube player will get minimise. That is the sort of animation that I am trying to achieve.
This is what I have so far:
https://jsfiddle.net/zshk3nex/1/
$(document).on('click', '.tol', function() {
if ($('.hid-box').hasClass("easout")) {
$('.hid-box').removeClass("easout");
$('.hid-box').addClass("easin");
$('.hid-box').css('top', 0);
} else {
$('.hid-box').addClass("easin");
$('.hid-box').css('top', 0);
}
});
$(document).on('click', '.minifyBtn', function() {
if ($('.hid-box').hasClass("easin")) {
$('.hid-box').removeClass("easin");
$('.hid-box').addClass("easout");
$('.hid-box').css('top', '90%');
} else {
$('.hid-box').addClass("easout");
$('.hid-box').css('top', '90%');
}
});
.holder {
height: 100%;
width: 100%;
overflow: hidden;
background: red;
position: absolute;
z-index: 9999;
top: 0;
height: 100%;
left: 0;
}
.hid-box {
height: 100%;
width: 100%;
overflow: hidden;
background: #ff0;
position: absolute;
z-index: 9999;
top: 100%;
height: 100%;
}
.easin {
transition: all 0.2s ease-in;
}
.easout {
transition: all 0.6s ease-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holder">
<button class="tol">
click here to show modal
</button>
<div class="hid-box">
<div style="position:absolute;width:100%;height:100%;top:0;left:0;background:none;z-index:999;">
<h1 class="minifyBtn">CSS3 slide up</h1>
<p style="text-align:center;">
<div style="text-align:center;" class="dsp player4" id="player4"></div>
</p>
</div>
</div>
</div>
Could someone please advice on this issue?
Absolute properties such at top and bottom aren't great for animations. Instead you could use transform. transform performs far better in animations and transitions.
When using percentages in transform the percentage is based on the elements box, rather than the parent, like with almost all other css values.
Another thing that could help improve performs is to narrow down your transition property. In your case you have selected to transition all properties. You could set it to only transition the properties you need. In this case that would be transition: transform 0.2s ease-in. While this won't necessarily.
Let's clean up your code a little bit.
$(document).on('click', '.tol', function() {
$('.hid-box').toggleClass("active")
});
.holder {
height: 100%;
width: 100%;
overflow: hidden;
background: red;
position: absolute;
z-index: 9999;
top: 0;
height: 100%;
left: 0;
}
.hid-box {
height: 100%;
width: 100%;
overflow: hidden;
background: #ff0;
position: absolute;
z-index: 9999;
top: 100%;
height: 100%;
transition: transform 200ms;
}
.hid-box.active {
transform: translateY(-100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holder">
<button class="tol">
click here to show modal
</button>
<div class="hid-box">
<div style="position:absolute;width:100%;height:100%;top:0;left:0;background:none;z-index:999;">
<h1 class="minifyBtn">CSS3 slide up</h1>
<p style="text-align:center;">
<div style="text-align:center;" class="dsp player4" id="player4"></div>
</p>
</div>
</div>
</div>
I've removed the vast majority of the jQuery you used, only toggling a single class now. I've moved the transition to the main element. I've also added a active class which simply sets the transform property to translateY(-100%). This means it will move it -100% of the elements height.
All of this should make it perform better on mobile. However at the end of the day it will also depend on the strength of your device. If it is somewhat older it might not perform as well.
I hope that helps!
I'm trying to create a Side menu for my responsive website. I'm not that good with JavaScript but it is working! (so far)
My problem is that, I'm toggling the <nav> class to make it appear and dissapear from the left side. The button to click is outside the <nav> content and the button to close is a simple text inside the <nav> content.
So, my HTML looks like this:
<nav id="nav-slide" class="nav-slide">
Side Content <br>
Close
</nav>
That's the nav that I'm trying to Toggle. The button to open should be this image:
<img id="menu-icon" src="images/menu-icon.svg"/>
CSS:
.nav-slide {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
max-width: 100%;
background-color: #3f3f3f;
z-index: 99;
box-sizing: border-box;
padding: 20px;
color:#fff;
margin-left: -100%;
transition: margin 200ms ease-in-out;
}
.nav-open {
margin-left: 0px;
transition: margin 200ms ease-in-out;
}
and my JAVASCRIPT:
$("#menu-icon").click(function(){
$("#nav-slide").toggleClass("nav-open");
});
$("#close-button").click(function(){
$("#nav-slide").toggleClass("nav-slide");
});
Is working so far! But when I click on Close text, and after closing the <nav> it keeps displaying <nav> content like this image:
Image with example of problem
Any way to solve this?
JQuerys toggleClass does add a new class to an item. If it already has that class, it will remove it from that item. So while your nav's base class is nav-slide, toggle nav-open only (not both). Here's a slightly different, basic example of an animated side-nav:
$('button').on('click', function (e) {
$('.menu').toggleClass('open');
});
html, body {
width: 100%;
height: 100%;
margin: 0;
}
.menu {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 20%;
background-color: tomato;
transform: translate(-100%, 0);
transition: transform 1s;
}
.menu.open {
transform: translate(0, 0);
}
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<button>menu</button>
<div class="menu">
<button>close</button>
</div>
Edit: Here is a pen of your example:
http://codepen.io/wilmaknattern/pen/xZXMaW
I have asked questions like this and have not really got an answer that really helped me! I know it is probably very easy and i just can't figure it out!
I have been studying jQuery for a few days now and have the basics down but cant create the right function to make this effect happen! Please visit the website below!
There are a few things i would like to know about! The first thing is when you first go to the site everything slides into place (sidebar, footer, etc.) The main concern is the sidebar how when you hover over one of the icons a kind of tool-tip eases appears and eases to the right side.
The next part i would like to know is when you click one of the icons a whole another window pops out. I kind of have an idea of how these both happen but i cant put all the pieces together. Please help me out! I know it cannot be that difficult. Even if you know of any jQuery plugins that can help achieve these results, would be even better!
http://intothearctic.gp/en/
HTML
<div id="sidemenu">
<div id="regionsContainer">
<div id="regionsUnitedStates"></div>
</div>
</div>
CSS
#sidemenu {
width: 60px;
height: 100%;
min-width: 60px;
height: 100vh;
max-width: 60px;
background-color: #383D3F;
background-size: 100% 100%;
background-attachment: fixed;
margin-top: -8px;
margin-bottom: -8px;
margin-left: -8px;
position: absolute;
}
#regionsContainer {
width: 60px;
height: 481px;
min-height: 481px;
min-width: 60px;
max-width: 60px;
max-height: 481px;
background-color: #383D3F;
position: relative;
top: 25%;
bottom: 25%;
}
#regionsUnitedStates {
width: 60px;
height: 60px;
background-image:url(../_images/_header/regionsUnitedStates.png);
}
#regionsUnitedStates:hover {
background-position:bottom;
}
you can do that using position: absolute like mentioned by fizzix before, and for each of your question with this html example
<div id="sidemenu">
<div id="submenu" class="not-open">
Sub
<div id="submenu-inner">
inner
</div>
</div>
<div id="submenu-item1">
item
</div>
</div>
1 The first thing is when you first go to the site everything slides into place (sidebar, footer, etc.)
This can be achieved with jQuery on document ready, and using setTimeout if you want to further delay it, then add a class to the element, like this
CSS :
#sidemenu {
background: #000;
width: 50px;
height: 100%;
position: absolute;
left: -50px;
transition: left ease-in-out 0.5s;
}
#sidemenu.show {
left: 0;
}
jQuery :
$(function() {
setTimeout(function() { $("#sidemenu").addClass("show") }, 500);
});
2 The main concern is the sidebar how when you hover over one of the icons a kind of tool-tip eases appears and eases to the right side.
This can be achieved with only CSS on hover, what you need is put the floating element inside the element you want to hover, in this example submenu-inner inside submenu, then add some CSS
#submenu {
background: #fff;
height: 50px;
margin: 150px 0 0 0;
text-align: center;
position: relative;
}
#submenu.not-open:hover #submenu-inner {
left: 50px;
opacity: 1;
}
#submenu-inner {
opacity: 0;
position: absolute;
transition: all ease-in-out 0.5s;
top: 0;
left: 250px;
height: 50px;
background: #f00;
}
firstly, the inner element is transparent and positioned more to the right using left, then on hover, set the position right beside the container, by setting the left CSS again to the width of the container
3 The next part i would like to know is when you click one of the icons a whole another window pops out
it's the same with number 1, except this one triggered by onClick event
here's the working example on JSFIDDLE
I dont think any plugin is required.
You can use translate to keep the menu hidden.transform:translate(90%)
Please refer this example:JSFIDDLE
The entire site is using absolute positions. This means that they are positioned on the page with pixel co-ordinates. They then using jQuery animate to move the top and left positions.
I have made a brief example of how to do this HERE. You can edit this to your liking.
If you are interested in seeing what the site was built with, you can see a whole list HERE
On this site (Chrome is ok) I'm trying to implement Fluidbox ... a beautiful, minimal lightbox (jQuery) with a clever imageloading trick.
CSS:
.fluidbox {
outline: none;
}
#fluidbox-overlay {
cursor: pointer;
cursor: -webkit-zoom-out;
cursor: -moz-zoom-out;
display: none;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 500;
}
.fluidbox-wrap {
background-position: center center;
background-size: cover;
margin: 0 auto;
position: relative;
z-index: 400;
transition: all .25s ease-in-out;
}
.fluidbox-opened .fluidbox-wrap {
z-index: 600;
}
.fluidbox-ghost {
background-size: cover;
background-position: center center;
position: absolute;
transition: all .25s ease-in-out;
}
One way or another it seems that the z-index(es) doesn't put the lightbox (image) on top of everything. It looks as if the enlargement is 'captured' in it's own HTML ... !?
Some help is highly appreciated.
++++
Partly solved ... the CSS of the menu (ScrollIt.js) was interferring (z-index) with the CSS of Fluidbox. Now Fluidbox is working and is on top of every element except the fixed menu. That's a pity ... and I don't know how to solve that. I will ask the devs.
Fluidbox author here.
According to the docs, you can either (1) alter the stackIndex setting of Fluidbox so it is greater than that of the fixed navigation menu, or (2) reduce the z-index value of the said fixed navigation menu.
v1.4.1 was released yesterday so it probably contains some crucial bug fixed since the version you're using was released.